/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#constants	
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */


/* #Constants
================================================== */
@labstext: #262626;
@labsGray: #f3f3f3;
@labsBlue: #00b4ff;
@labsRed: #d73300;
@labsGreen: #92bf84;
@labsPrimary: @labsBlue;
@labsSecondary: @labsRed;


/* #Site Styles
================================================== */
@import "helpers.less";

html{
	height: 100%;
}

.hide{
	display: none;
}
body{
	
	 /* fallback */
	background-color: @labsGray;
	background-image: url(../images/bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	min-height: 670px;
	/*height: 100%;*/
	/*padding-top: 30px;*/
	/*padding-bottom: 50px;*/
	@whiteShade: #eeeeee;
	@blueShade: #bccad5;
  
	/* Safari 4-5, Chrome 1-9 */
	/* Can't specify a percentage size? Laaaaaame. */
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(@whiteShade), to(@blueShade));
  
	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-radial-gradient(circle, @whiteShade, @blueShade);
  
	/* Firefox 3.6+ */
	background: -moz-radial-gradient(circle, @whiteShade, @blueShade);
  
	/* IE 10 */
	background: -ms-radial-gradient(circle, @whiteShade, @blueShade);
  
	/* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
	background: #f9f9f9 !important;
	
	
	/*background: url(../images/bg.jpg) no-repeat center top;*/
	/*background-size: cover;*/
	font-family: 'Roboto';
	font-size: 14px;
	vertical-align: middle;
	
	/*
	&.uploaded-screen{
		.copyright{
			position: fixed;
		}
	}
*/
	
	&.overlay-parent{
		overflow: hidden;
		height: 100%;
	}
}
/*
body{
    background: @labsGray;
	font-family: Roboto;
	font-size: 14px;
	font-weight: 200;
	color: @labstext;
}
*/
h1, h2, h3, h4, h5, h6{
	font-family: Roboto;
	margin: 0;
	font-weight: 100;
	color: @labsPrimary;
	line-height: 100%;
	
	&.white{
		color: #fff;
	}
}

h1{
	font-size: 200px;
}
h2{
	font-size: 100px;
}
h3{
	font-size: 50px;
}
h4{
	font-size: 40px;
}
h5{
	font-size: 30px;
}
h6{
	font-size: 20px;
	font-weight: 300;
}

.overlay-page-type-content{
	text-align: left;
	padding: 0 10px;
	max-height: 400px;
	overflow: auto;
	margin-top: 15px;
	a{
		color: @labsPrimary;
		&:hover{
			text-decoration: none;
		}
	}
}

.toggle-next-ul{
	cursor: pointer;
	margin-bottom: 10px;
	text-decoration: underline;
	&:hover, &.active{
		color: @labsPrimary;
		text-decoration: none !important;
	}
}

.listing{
	ul, li{
		list-style: disc;
	}
}
.no-pointer-events{
	pointer-events: none;
	input{
		pointer-events: all !important;
	}
}

.pad-me{
	padding: 10px;
}
.social-fixed-height{
	&.fb{
		height: 30px;
	}
	&.twt{
		height: 30px;
	}
	&.gp{
		height: 15px;
	}
	display: block;
}

#qtip-overlay div{
	background: #fff;
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(Opacity=80)";
}
.qtip{
	min-width: 330px;
	font-family: roboto;
	font-weight: 300;
	font-size: 18px;
	line-height: 100%;
	p{
		margin-bottom: 10px;
	}
}
.qtip-titlebar{
	font-weight: 400;
	font-family: roboto;
	padding: 10px 35px 10px 10px;
}




.template{
	display: none;
}
.loader, .notification{
    display: none;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 99999999;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    &.empty{
        background: transparent !important;
    }
	.background{
		display:block;
		
		background: #fff;
		opacity: 0.85;
		filter: alpha(opacity=85);
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		z-index: 1;
	}
    .ajax-loader{
        position: absolute;
        left: 50%;
        top: 50%;
        opacity: 1;
        filter: alpha(opacity=100);
        margin-left: -16px;
        margin-top: -16px;
		z-index: 2;
    }
    
}


.blur{
	-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	-o-filter: blur(15px);
	-ms-filter: blur(15px);
	filter: blur(15px);
	.transitioner(all 0.5s);
}

.overlay{
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 99999999;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
	
	.background{
		display:block;
		background: #000;
		position: absolute;
		top:0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
	}
	
    .content{
		position: relative;
		z-index: 2;
		display: table;
		width: 100%;
		height: 100%;
		.close{
			position: absolute;
			right: 20px;
			top: 20px;
			display: block;
			z-index: 1111;
			width: 16px;
			height: 16px;
			background-image: url(../images/icons/icon-s.png);
			background-repeat: no-repeat;
			background-position: -1px -52px;
		}
    }
    
}

.overlay-content{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	
	.title{
		color: #fff;
		font-family: Roboto;
		font-size: 15px;
		margin-bottom: 10px;
	}
	
}


.overlay-parent,
.loader-parent{
	position: relative;
}



.qtip{
	background-color: #fff;
	.border-radius(4px);
	.box-shadow(6px 6px #c5d0d9);
	font-family: Roboto;
	font-size: 20px;
	min-width: 0;
	font-weight: 300;
	border: 0px;
	color: @labsPrimary;
	&.hover:hover{
		background-color: @labsPrimary;
		color: #fff;
	}
	&.extra-padding .qtip-content{
		padding: 10px;
	}
	.qtip-content{
		padding: 0;
	}
}

.tooltip-padding{
	padding: 13px;
}
.normal-upload-form{
	position: relative;
	cursor: pointer;
	form{
		margin: 0;
		padding: 0;
	}
	.upload-button-normal-upload{
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}
}




.block{
	display: block !important;
}

.link{
	
	display: inline-block;
	position: relative;
	z-index: 10;
	.border-radius(3px);
	padding: 0 10px;
	text-decoration: none;
	border: 1px solid transparent;
	.transitioner(all 0.2s);

	height: 30px;
	line-height: 30px;
	font-size: 12px;
	

	&.margin-right{
		margin-right: 10px;
	}
	&.margin-left{
		margin-left: 10px;
	}
	&.margin-top{
		margin-top: 10px;
	}
	&.margin-bottom{
		margin-bottom: 10px;
	}
	
	&.no-padding{
		padding: 0;
	}
	&.center-icon{
		.icon{
			margin-left: 5px;
			padding-left: 0;
			padding-right: 5px;
		}
	}
	
	.icon{
		margin: 7px 0;
		padding: 0 0 0 10px;
		background-image: url(../images/icons/icon-s.png);
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
	}
	
	.text, .icon{
		display: inline-block;
		line-height: 30px;
		float: left;
	}
	
	&.large{
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		padding: 0 50px;
		.text, .icon{
			line-height: 45px;
		}
	}
	
	
	
	@linkColor: @labsPrimary;
	&.red{
		@linkColor: @labsRed;
	}
	
	&.primary{
		background: @labsPrimary;
		.box-shadow(1px 1px 0 0 darken(@labsPrimary, 13%));
		&:hover{
			border-color: darken(@labsPrimary, 13%);
		}
		&:active{
			border-color: darken(@labsPrimary, 13%);
			background: darken(@labsPrimary, 6%);
		}
	}
	&.branding{
		&.facebook-branding{
			background: #3B5998;
			.box-shadow(1px 1px 0 0 darken(#3B5998, 13%));
			&:hover{
				border-color: darken(#3B5998, 13%);
			}
			&:active{
				border-color: darken(#3B5998, 13%);
				background: darken(#3B5998, 6%);
			}
		}
		&.facebook-hover-branding{
			&:hover{
				background: #3B5998;
				border-color: darken(#3B5998, 13%);
				.box-shadow(1px 1px 0 0 darken(#3B5998, 13%));
			}
			&:active{
				border-color: darken(#3B5998, 13%);
				background: darken(#3B5998, 6%);
			}
		}
		
		&.twitter-branding{	
			background: #4099ff;
			.box-shadow(1px 1px 0 0 darken(#4099ff, 13%));
			&:hover{
				border-color: darken(#4099ff, 13%);
			}
			&:active{
				border-color: darken(#4099ff, 13%);
				background: darken(#4099ff, 6%);
			}
		}
		&.twitter-hover-branding{	
			&:hover{
				background: #4099ff;
				.box-shadow(1px 1px 0 0 darken(#4099ff, 13%));
				border-color: darken(#4099ff, 13%);
			}
			&:active{
				border-color: darken(#4099ff, 13%);
				background: darken(#4099ff, 6%);
			}
		}
	}
	
	&.red{
		background: @labsRed;
		.box-shadow(1px 1px 0 0 darken(@labsRed, 13%));
		&:hover{
			border-color: darken(@labsRed, 13%);
		}
		&:active{
			border-color: darken(@labsRed, 13%);
			background: darken(@labsRed, 6%);
		}
	}
	
	
	&.primary, &.red, &.branding{
		color: #fff;
		.icon-facebook{
			background-position: 3px -154px;
		}
		.icon-twitter{
			background-position: 3px -188px;
		}
		.icon-cancel{
			background-position: -1px -52px;
		}
		.icon-delete{
			background-position: -1px -86px;
		}
		.icon-share{
			background-position: -1px -18px;
		}
		.icon-crop{
			background-position: -1px -120px;
		}
	}
	
	&.white{
		background: #fff;
		.box-shadow(1px 1px 0 0 #c5c5c5);
		border-color: #dcdcdc;
		color: @labsPrimary;
		.icon-facebook{
			background-position: 3px -137px;
		}
		.icon-twitter{
			background-position: 3px -171px;
		}
		.icon-cancel{
			background-position: -1px -35px;
		}
		.icon-delete{
			background-position: -1px -69px;
		}
		.icon-share{
			background-position: -1px -1px;
		}
		.icon-crop{
			background-position: -1px -103px;
		}
		
		&:hover{
			border-color: #c5c5c5;
		}
		&:active{
			border-color: #c5c5c5;
			background: darken(#fff, 6%);
		}
	}
	
	
	
	
	&.input-selector{
		.input{
			display: none;
			width: auto;
			border: 0;
			height: 20px;
			line-height: 20px;
			padding: 0 2px;
			margin-bottom: 0;
			color: #000;
		}
	}
}
/* #Page Styles
================================================== */



/* Mixins */

.labsPrimaryText{
	color: @labsPrimary;
	.text-shadow(1px 1px @labsGray);
}














#labs-head{
	display: none;
	background: #fff;
	border-bottom: 2px solid @labsPrimary;
	height: 60px;
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	
	/*.box-shadow(0px 0px 1px 1px #e1e1e1);*/
	
	.labs-content{
		padding: 15px;
		line-height: 30px;
		h1, h2, h3, h4, h5, h6{
			line-height: 30px;
			font-weight: 300;
		}
	}
	
	.title{
		font-size: 30px;
		float: right;
		font-weight: 100;
		.labsPrimaryText;
	}
	
}


body.dropping{
	.white-area{
		background: #fff;
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	
	.camera-graphic{
		.transitioner(all 1s);
		opacity: 0;
		margin-top: 5px;
		margin-left: @cameraLeft + 5px;
	}
	
	.drop-elements .text-instruction{
		/*
		left: 228px !important;
		top: 186px !important;
		*/
		left: 261px !important;
		top: 196px !important;
	}
}

.app-title-container{
	display: block;
	text-align: center;
}
.app-title{
	position: relative;
	z-index: 1;
	text-align: center;
	padding-top: 60px;
	display: inline-block;
	text-decoration: none !important;	
	.text-shadow(1px 1px #fff);
	h2, h6{
		span{
			cursor: pointer;
		}
	}
}

@cameraLeft: -256px;


.real-image{
	opacity: 0;
	filter: alpha(opacity=0);
	width: 1px;
	height: 1px;
	overflow: scroll;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}

.white-area,
.drop-area{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.drop-area{
	z-index: 4;
}
.white-area{
	z-index: 2;
	opacity: 0;
	filter: alpha(opacity=0);
	.transitioner(all 1s);
}

.drop-elements, .manual-upload{
	width: 512px;
	height: 384px;
	z-index: 3;
	margin: 0 auto;
	margin-top: 90px;
	.normal-upload-form{
		position: static;
	}
}

.manual-upload{
	position: absolute;
	margin-left: -256px;
	left: 50%;
	height: 60px;
	width: 60px;
	margin-left: 124px;
	
	z-index: 5;
	
	.upload-link{
		/*
		font-size: 60px;
		color: @labsBlue;
		position: absolute;
		font-weight: 100;
		text-decoration: none;
		right: 76px;
		top: 22px;
		z-index: 0;
	*/
		font-size: 60px;
		color: @labsPrimary;
		position: absolute;
		font-weight: 100;
		text-decoration: none;
		top: 20px;
		left: 50%;
		z-index: 0;
		display: block;
		margin-left: -15px;
		
	}
}

.lens-upload{
	position: absolute;
	left: 50%;
	margin-left: -92px;
	width: 183px;
	height: 188px;
	z-index: 6;
	margin-top: 220px;
	.normal-upload-form{
		position: static;
	}
}
.drop-elements{
	position: relative;
	
	/*
	.camera-graphic{
		background-image: url(../images/sprite-1.png);
		background-repeat: no-repeat;
		background-position: -1px -1px;
		width: 512px;
		height: 384px;
		position: absolute;
		left: 50%;
		margin-left: @cameraLeft;
	}
	
	.camera-gray{
		margin-top: 5px;
		margin-left: @cameraLeft + 5px;
		background-position: -1px -386px !important;
	}
	*/
	
	.camera-graphic{
		position: absolute;
		left: 50%;
		margin-left: @cameraLeft;
		z-index: 2;
		.transitioner(all 0.1s);
	}
	.camera-graphic-gray{
		position: absolute;
		left: 50%;
		margin-top: 5px;
		margin-left: @cameraLeft + 5px;
		z-index: 1;
	}
	.text-instruction{
		text-align: center;
		position: absolute;
		/*left: 222px;*/
		left: 50%;
		margin-left: -50px;
		width: 100px;
		
		top: 173px;
		font-weight: 100;
		font-size: 30px;
		line-height: 120%;
		z-index: 3;
		.labsPrimaryText;
		
		.normal-upload-form{
			position: static;
		}
	}
	
	
	.progress-upload{
		background: @labsPrimary;
		position: absolute;
		left: 155px;
		width: 5px; /*0%*/
		//width: 200px; /*100%*/
		height: 200px;
		top: 121px;
		z-index: 0;

	}
}



.image-area{
	width: 1200px;
	margin: 45px auto 0;
	padding-bottom: 80px;
	text-align: center;
	/*position: relative;*/
	z-index: 3;
	.image{
		
		/*max-height: 500px;*/
		margin: 0 auto;
	}
	
	.caption{
		font-weight: 400;
		width: 429px;
		margin: 20px auto 20px;
		display: block;
		color: black;
		font-size: 20px;
		line-height: 140%; 
	}
	
	.view-count{
		font-weight: 100;
		margin: 10px auto 0px;
		display: block;
		color: black;
	}
	/*
	.transitioner(transform 0.5s);
	.transformer(scale(0.9));
	&.display-time{
		.transformer(scale(1));
	}
*/
	
	img.user-added,
	img.response-image{
		max-width: 100%;
		/*max-height: 100%;*/
		margin: 0 auto;
		display: block;
		/*.box-shadow(0 0 45px 20px #fff);*/
		.box-shadow(0 0 3px 0px #898989);
	}
	.jcrop-selection{
		.box-shadow(0 0 20px 0 #000);
		/*outline: 1px solid #333;*/
		
	}
	.jcrop-holder{
		margin: 0 auto;
	}
	
	.actions{
		min-width: 450px;
		position: relative;
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
		&.small-image{
			.right{
				/*float: none !important;*/
			}
			.link-upload{
				margin-left: 0 !important;
			}
		}
		.drag-crop-instruction{
			position: absolute;
			top: -73px;
			left: 10px;
		}
		.link-upload{
			margin-left: 85px;
		}
		.link-cancel{
			margin-bottom: 15px;
		}
	}
}


#caption{
	width: 50%;
	margin: 0 auto 10px;
	min-width: 240px;
}







/********************* foot *******************/
.footer{
	position: fixed;
	
	top: 10px;
	z-index: 10;
	
	&.footer-right{
		right: 10px;
	}
	&.footer-left{
		left: 10px;
	}
	
	.copyright{
		font-size: 15px;
		font-family: Roboto;
		color: #fff;
		padding: 5px;
		.transitioner(all 0.2s);
		text-shadow: 1px 1px 1px #aaa;
		a{
			text-decoration: none;
			color: @labsPrimary;
			text-shadow: none;
			&:hover{
				color: #000;
				text-decoration: none !important;
			}
		}
		&:hover{
			background: @labsPrimary;
			color: #fff;
			text-shadow: none !important;
			a{
				text-decoration: underline;
				color: #fff;
			}
		}
	}
}






/*Initial setup - hide everything */

.manual-upload,
.drop-area,
.drop-elements,
.lens-upload{
	display: none;
}
/* #Media Queries
================================================== */






	/* Medium Desktops - between 1280 and 960*/
	
	@media only screen and (min-width: 960px) and (max-width: 1279px) {
		.image-area,
		.image-area .image,
		.image-area .caption,
		.actions{
			max-width: 940px !important;
			min-width: 0px !important;
		}
		
		
	}


	/* Desktops only */
	@media only screen and (min-width: 959px) {
		
		.show-on-desktop{
			display: block !important;
		}
		.hide-on-desktop{
			display: none !important;
		}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.link{
			float: none !important;
			display: block;
			margin-right: 0 !important;
			margin-left: 0 !important;
			margin-bottom: 10px;
			&.upload-more{
				margin-top: 30px;
			}
		}
		
		.overlay-page-type-content{
			padding: 0;
			max-height: 200px;
			overflow: auto;
		}
		
		.overlay{
			position: fixed !important;
		}
		
		.drop-elements{
			max-width: 300px;
			min-width: 0;
			height: 280px;
			.camera-graphic{
				max-width: 100%;
				left: 0;
				margin: 0;
			}
			
			.camera-graphic-gray{
				max-width: 100%;
				left: 0;
				margin: 4px 0 0 4px;
			}
			.text-instruction, .progress-upload{
				display: none !important;
			}
		}
		.lens-upload{
			margin-top: 120px;
		}
		.manual-upload{
			width: 300px;
			margin: 0 auto;
			position: absolute;
			left: 50%;
			margin-left: -150px;
			
			.upload-link{
				top: 190px;
				line-height: 100%;
			}
			
			.normal-upload-form{
				display: none;
				position: absolute;
				width: 100px;
				height: 100px;
				margin-top: 160px;
				margin-left: 90px;
			}
		}
		
		#caption{
			width: 292px !important;
		}
		
		
		.overlay-content{
			.link{
				margin-left: auto !important;
				margin-right: auto !important;
				max-width: 320px;
			}
		}
		
		.footer{
			position: relative !important;
					
			&.footer-right{
				float: right;
			}
			&.footer-left{
				float: left;
			}
			
		}
		
		
		
		.show-on-mobile, .show-on-tablet{
			display: block !important;
		}
		.hide-on-mobile, .hide-on-tablet{
			display: none !important;
		}
		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		.image-area,
		.image-area .image,
		.image-area .caption,
		.actions{
			max-width: 700px !important;
			min-width: 0px !important;
		}
		
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		.image-area,
		.image-area .image,
		.image-area .caption,
		.actions{
			max-width: 300px !important;
			min-width: 0px !important;
		}
		
		
		h1{
			font-size: 180px;
		}
		h2{
			font-size: 80px;
		}
		h3{
			font-size: 35px;
		}
		h4{
			font-size: 30px;
		}
		h5{
			font-size: 20px;
		}
		h6{
			font-size: 18px;
			font-weight: 300;
		}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

/* Modern Photare refinements ------------------------------------------------ */
body{
	background: #f8fbff !important;
	color: #263746;
	min-height: 100vh;
}

.app-title{
	padding-top: 42px;
}
.app-title h2{
	letter-spacing: -4px;
}
.app-title h6{
	margin-top: 4px;
}

/* Drag handling is bound at document level; this layer is visual only. */
.drop-area{
	pointer-events: none;
}
.drop-elements{
	margin-top: 52px;
	max-width: calc(100vw - 36px);
	transition: transform 180ms ease;
}
.drop-elements .camera-graphic,
.drop-elements .camera-graphic-gray{
	max-width: 100%;
	height: auto;
}
body.dropping .drop-elements{
	transform: translateY(-4px) scale(1.015);
}
body.dropping .camera-graphic{
	opacity: 1 !important;
	margin-top: 0 !important;
	margin-left: -256px !important;
}

.image-area{
	width: calc(100% - 36px);
	max-width: 960px;
	margin-top: 32px;
	padding-bottom: 42px;
}
.image-area .image{
	max-width: 100%;
	min-height: 1px;
}
.image-area img.user-added,
.image-area img.response-image{
	/* JavaScript sets the rendered dimensions after the image has loaded. */
	max-width: 100%;
	/* Less 1.3 compiles mixed-unit calc() heights to 0px. The preview
	 * dimensions are already constrained by App.fitImageToViewport(). */
	max-height: none !important;
	object-fit: contain;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	border-radius: 8px;
	box-shadow: 0 12px 34px rgba(38, 85, 120, .18);
}
/* Do not let old Jcrop wrapper styles collapse the actual preview image. */
.image-area .image > img.user-added,
.image-area .image > img.response-image{
	position: relative;
	z-index: 1;
}
.image-area .actions{
	min-width: 0;
	max-width: 960px;
	margin-top: 20px;
}
#upload-image{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
#caption{
	box-sizing: border-box;
	flex: 0 0 100%;
	width: 100% !important;
	min-width: 0;
	margin: 0 0 4px;
	padding: 12px 14px;
	border: 1px solid #c9d9e5;
	border-radius: 6px;
	font: 400 15px Roboto, sans-serif;
	box-shadow: inset 0 1px 2px rgba(29, 70, 100, .05);
}
#caption:focus{
	border-color: #00b4ff;
	box-shadow: 0 0 0 3px rgba(0, 180, 255, .14);
	outline: 0;
}
#upload-image .link-upload{
	margin: 0 auto !important;
	border-radius: 6px;
}
#upload-image .link-cancel{
	margin: 0 0 0 auto;
	border-radius: 6px;
}
.image-area .caption{
	width: auto;
	max-width: 760px;
	margin: 18px auto 8px;
	font-size: 18px;
}

.footer{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid rgba(190, 210, 226, .85);
	border-radius: 8px;
	background: rgba(255, 255, 255, .86);
	box-shadow: 0 8px 24px rgba(49, 82, 110, .10);
}
.footer .left{
	float: none;
}
.footer .copyright{
	padding: 0 4px;
	color: #647989;
	text-shadow: none;
}
.share-site-dialog{
	max-width: 360px;
	padding: 10px;
	text-align: center;
}
.share-site-dialog h3{
	margin-bottom: 12px;
}
.share-site-dialog p{
	margin-bottom: 20px;
	color: #536d7e;
}

@media only screen and (max-width: 767px) {
	.app-title{
		padding-top: 30px;
	}
	.app-title h2{
		font-size: 62px;
	}
	.drop-elements{
		margin-top: 32px;
	}
	.image-area img.user-added,
	.image-area img.response-image{
		/* The desktop renderer writes fixed pixel dimensions. On a phone that
		 * left the image inside a tall white canvas. Let the image determine
		 * the card height and retain its original aspect ratio instead. */
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		border-radius: 8px;
	}
	.image-area{
		width: calc(100% - 32px) !important;
		max-width: none !important;
		margin-top: 22px;
		padding-bottom: 24px;
	}
	.image-area .image{
		width: 100% !important;
		max-width: none !important;
		min-height: 0;
		margin: 0 auto !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	#upload-image .link-upload,
	#upload-image .link-cancel{
		margin: 0 !important;
	}
	.footer-dock{
		position: fixed;
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		display: flex;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		z-index: 20;
		padding: 6px;
		border: 1px solid rgba(190, 210, 226, .92);
		border-radius: 12px;
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 10px 28px rgba(49, 82, 110, .14);
		overflow: hidden;
	}
	.footer{
		position: static !important;
		float: none !important;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
	.footer-left{
		flex: 0 0 auto;
		width: 100px;
		min-width: 0;
	}
	.footer-right{
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		gap: 6px;
	}
	.footer .link{
		box-sizing: border-box;
		height: 38px;
		padding: 0 9px;
		font-size: 11px;
		line-height: 38px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.footer button.link{
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
		font-family: inherit;
	}
	.footer-right .link{
		flex: 1 1 0;
		margin: 0 !important;
		text-align: center;
	}
	.footer-left .link{
		width: 100%;
		min-width: 0;
		text-align: center;
	}
	body{
		padding-bottom: 76px;
	}
}

/* Lightboxes and camera controls */
.drop-elements .manual-upload{
	position: absolute;
	top: 16px;
	right: 20px;
	left: auto;
	width: 54px;
	height: 54px;
	margin: 0;
	z-index: 8;
}
.drop-elements .manual-upload .upload-link{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 2px solid #00b4ff;
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 6px 18px rgba(30, 105, 150, .18);
	color: #00a8ef;
	font: 300 38px/1 Roboto, sans-serif;
	text-decoration: none;
}
.drop-elements .manual-upload .normal-upload-form,
.drop-elements .manual-upload .normal-upload-form form,
.drop-elements .manual-upload .upload-button-normal-upload{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.drop-elements .manual-upload .normal-upload-form{
	z-index: 2;
	display: block !important;
}
.drop-elements .manual-upload .upload-button-normal-upload{
	opacity: 0;
}
.drop-elements .manual-upload .upload-link{
	z-index: 3;
}

.overlay{
	position: fixed !important;
	inset: 0;
	width: auto;
	height: auto;
}
.overlay .background{
	background: rgba(18, 39, 57, .62);
	backdrop-filter: blur(8px);
}
.overlay .content{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 24px;
}
.overlay-content{
	display: block;
	width: 100%;
	max-height: none;
	overflow: visible;
	color: #263746;
}
.overlay-content .container,
.overlay-content .six.columns.offset-by-three{
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}
.lightbox-card{
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	padding: 42px;
	border: 1px solid rgba(201, 220, 233, .9);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(8, 29, 45, .28);
	text-align: left;
}
.lightbox-card.about-card,
.lightbox-card.guide-card{
	max-height: 88vh;
	padding: 0;
	overflow: hidden;
}
.lightbox-card .lightbox-scroll{
	box-sizing: border-box;
	max-height: 88vh;
	overflow-y: auto;
	padding: 42px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #a8c7d9 transparent;
}
.lightbox-card .lightbox-scroll::-webkit-scrollbar{
	width: 8px;
}
.lightbox-card .lightbox-scroll::-webkit-scrollbar-thumb{
	border: 2px solid #fff;
	border-radius: 8px;
	background: #a8c7d9;
}
.lightbox-card h2{
	margin: 6px 0 12px;
	color: #167cb4;
	font-size: 38px;
	font-weight: 300;
	letter-spacing: -1.2px;
	line-height: 1.1;
}
.modal-eyebrow{
	margin: 0;
	color: #00a8ef;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.modal-intro{
	max-width: 530px;
	margin: 0;
	color: #617889;
	font-size: 17px;
	line-height: 1.55;
}
.overlay .content .close{
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #edf6fb;
	color: #4a718a;
	font: 300 28px/31px Arial, sans-serif;
	text-align: center;
	text-decoration: none;
}
.overlay .content .close:before{
	content: '×';
}
.feature-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 30px;
}
.feature-grid > div{
	padding: 18px;
	border: 1px solid #e1edf4;
	border-radius: 10px;
	background: #f9fcfe;
}
.feature-grid span{
	display: block;
	margin-bottom: 18px;
	color: #00a8ef;
	font-size: 12px;
	font-weight: 700;
}
.feature-grid h4{
	margin-bottom: 8px;
	color: #2c536b;
	font-size: 18px;
	font-weight: 400;
}
.feature-grid p{
	margin: 0;
	color: #6a8191;
	font-size: 14px;
	line-height: 1.5;
}
.guide-steps{
	margin: 28px 0 22px;
	padding: 0;
	list-style: none;
	counter-reset: guide;
}
.guide-steps li{
	position: relative;
	min-height: 42px;
	margin: 0 0 20px;
	padding-left: 62px;
	counter-increment: guide;
}
.guide-steps li:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #e8f7ff;
	color: #00a8ef;
	content: counter(guide);
	font: 700 14px/38px Roboto, sans-serif;
	text-align: center;
}
.guide-steps strong,
.guide-steps span{
	display: block;
}
.guide-steps strong{
	margin-bottom: 4px;
	color: #31566e;
	font-size: 17px;
}
.guide-steps span{
	color: #69808f;
	line-height: 1.5;
}
.guide-steps kbd{
	padding: 1px 5px;
	border: 1px solid #d7e6ef;
	border-radius: 4px;
	background: #f7fbfd;
	color: #487188;
	font: 12px monospace;
}
.guide-tip{
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	background: #f0f9fd;
	color: #597788;
	font-size: 14px;
	line-height: 1.5;
}
.share-site-dialog{
	max-width: 470px;
	text-align: center;
}
.share-site-dialog .modal-intro{
	margin-right: auto;
	margin-left: auto;
}
.share-actions{
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}
.share-actions .link{
	margin: 0 !important;
	border-radius: 6px;
}
.share-actions .whatsapp-share{
	border-color: #1ea952;
	background: #25d366;
	color: #fff;
}

@media only screen and (max-width: 959px) {
	.drop-elements .manual-upload{
		display: block;
		top: 10px;
		right: 10px;
		width: 48px;
		height: 48px;
	}
	.lightbox-card{
		max-width: 560px;
	}
}
@media only screen and (max-width: 600px) {
	.overlay .content{
		align-items: center;
		padding: 8px;
		overflow: hidden;
	}
	.lightbox-card{
		margin: 0 auto;
		padding: 28px 18px;
		border-radius: 12px;
	}
	.lightbox-card.about-card,
	.lightbox-card.guide-card{
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
		margin: 0 auto;
	}
	.lightbox-card .lightbox-scroll{
		max-height: 88vh;
		padding: 26px 18px;
	}
	.lightbox-card h2{
		font-size: 30px;
	}
	.feature-grid{
		grid-template-columns: 1fr;
	}
	.feature-grid > div{
		padding: 14px 16px;
	}
	.feature-grid span{
		margin-bottom: 8px;
	}
	.share-actions{
		flex-direction: column;
	}
	.share-actions .link{
		display: block;
	}
}

/* Consistent controls across upload and shared-photo screens. */
.overlay .content .close{
	position: fixed !important;
	top: 18px !important;
	right: 18px !important;
	z-index: 100000001 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(166, 198, 217, .9);
	border-radius: 50%;
	background: #fff !important;
	background-image: none !important;
	background-position: 0 0 !important;
	box-shadow: 0 6px 18px rgba(15, 50, 74, .16);
	color: #41677e;
	font: 300 30px/1 Arial, sans-serif;
}
.overlay .content .close:before{
	line-height: 1;
}
.lightbox-card .lightbox-close{
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	z-index: 3;
	border: 1px solid #d6e4ed;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 10px rgba(15, 50, 74, .12);
	color: #41677e;
	font: 300 25px/1 Arial, sans-serif;
	text-decoration: none;
}

#upload-image{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
#upload-image #caption{
	grid-column: 1 / 3 !important;
	grid-row: 1;
	width: 100% !important;
}
#upload-image .link-upload,
#upload-image .link-cancel{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	margin: 0 !important;
	border-radius: 7px;
	line-height: 1;
}
#upload-image .link-upload{
	grid-column: 1;
	grid-row: 2;
}
#upload-image .link-cancel{
	grid-column: 2;
	grid-row: 2;
}

/* The bundled Less compiler predates CSS Grid. Use flexbox here so the
 * equal two-button layout is reliable in every browser this app supports. */
#upload-image{
	display: flex !important;
	align-items: stretch;
	flex-wrap: wrap;
}
#upload-image #caption{
	flex: 0 0 100% !important;
	width: 100% !important;
}
#upload-image .link-upload,
#upload-image .link-cancel{
	flex: 0 0 calc(50% - 5px) !important;
	width: calc(50% - 5px) !important;
	min-width: 0;
}
#upload-image .link-cancel .icon,
#upload-image .link-cancel .text{
	float: none;
	line-height: 1;
}

.flex {
	display: flex !important;
	width: 100%;
}
.space-between {
	justify-content: space-between
}

.uploaded-image-actions{
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, 42px);
	align-items: center;
	gap: 8px;
}
.uploaded-image-actions .link{
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	float: none !important;
	min-width: 42px;
	height: 42px;
	margin: 0 !important;
	border-radius: 7px;
	line-height: 1;
}
.uploaded-image-actions .link .icon,
.uploaded-image-actions .link .text{
	float: none;
	line-height: 1;
}
.uploaded-image-actions .link-share{
	padding: 0 14px;
	grid-column: 1;
}
.uploaded-image-actions .link-facebook-share{
	grid-column: 2;
}
.uploaded-image-actions .link-twitter-share{
	grid-column: 3;
}
.uploaded-image-actions .link-delete-image{
	grid-column: 4;
}
.uploaded-image-actions .upload-more{
	grid-column: 1 / 3;
	margin-left: 0 !important;
	padding: 0 14px;
}
.uploaded-image-actions .link-download-image{
	grid-column: 3 / 5;
	padding: 0 14px;
}

@media only screen and (max-width: 767px) {
	.footer-dock{
		gap: 6px;
		padding: 4px;
		border-radius: 14px;
		/* background: rgba(255, 255, 255, .98); */
		border: 0px !important;
		background: transparent !important;
		box-shadow: none !important;
		left: 50%;
		transform: translateX(-50%);
	}
	.footer .link{
		height: auto;
		border-radius: 10px;
	}
	 .social-spread-the-word {
		margin-bottom: 0;
	 }
	.uploaded-image-actions{
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
	.uploaded-image-actions .link{
		width: 100%;
		min-width: 0;
	}
	.uploaded-image-actions .link-share,
	.uploaded-image-actions .link-delete-image{
		grid-column: 1 / -1;
	}
	.uploaded-image-actions .link-facebook-share,
	.uploaded-image-actions .link-twitter-share,
	.uploaded-image-actions .upload-more,
	.uploaded-image-actions .link-download-image{
		grid-column: auto;
	}
	.uploaded-image-actions .upload-more{
		margin-left: 0 !important;
	}
	/* Footer controls follow the page on mobile and stay deliberately quiet. */
	.footer-dock{
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		width: calc(100% - 28px);
		max-width: 390px;
		margin: 34px auto 18px;
		transform: none;
		display: flex;
		gap: 4px;
		box-sizing: border-box;
		padding-right: 16px;
		overflow: hidden;
	}
	.footer-left{
		flex: 0 0 29%;
		width: 29%;
	}
	.footer-right{
		display: flex;
		flex: 1 1 auto;
		width: 71%;
		min-width: 0;
		gap: 4px;
	}
	.footer .link{
		height: 32px;
		min-width: 0;
		padding: 0 6px;
		font-size: 10px;
		line-height: 32px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.footer-left .link{
		width: 100%;
	}
	.footer-right .link{
		flex: 1 1 0;
	}
}