/* ================================================================================== */
/*                                                                                    */
/*                               STYLE-TILES-SEARCH.CSS                               */
/*                                                                                    */								
/*                             The search area for tiles                              */
/*                           Currently part of style-tiles                            */							 
/* ================================================================================== */

/* TILES:NAV:SEARCH */

#tiles-search {
	position:fixed;
	z-index:10;
	top:0;
	left:0;
	width:100vw;
	height:0;
	display:block;
	box-sizing:border-box;
	border:none;
	outline:none;
	background:none;
	}

/* TILES:NAV:SEARCH:BACKGROUND/LABEL/GUESS/INPUT */

#tiles-search-background,
#tiles-search-label,
#tiles-search-guess,
#tiles-search-input {
	display:block;
	position:absolute;
	box-sizing:border-box;
	top:0;
	left:50vw;
	margin-left:-40vw;
	width:80vw;
	height:30px;
	margin-top:9px;
	margin-left:-35vw;
	width:70vw;
	}

#tiles-search:focus-within #tiles-search-background,
#tiles-search:focus-within #tiles-search-label,
#tiles-search:focus-within #tiles-search-guess,
#tiles-search:focus-within #tiles-search-input {
	margin-top:3px;
	margin-left:-49vw;
	width:98vw;
	height:60px;
	}

#tiles-search:focus-within #tiles-search-label {
	margin-top:9px;
	height:57px;
	}

@media only screen and (min-width: 460px) {
#tiles-search-background,
#tiles-search-label,
#tiles-search-guess,
#tiles-search-input {
	top:0;
	margin-top:3px;
	margin-left:-30vw;
	width:60vw;
	height:44px;
	}

#tiles-search:focus-within #tiles-search-background,
#tiles-search:focus-within #tiles-search-label,
#tiles-search:focus-within #tiles-search-guess,
#tiles-search:focus-within #tiles-search-input {
	margin-left:-40vw;
	width:80vw;
	}
}

@media only screen and (min-width: 1024px) {
#tiles-search-background,
#tiles-search-label,
#tiles-search-guess,
#tiles-search-input {
	margin-left:-290px;
	width:580px;
	}

#tiles-search:focus-within #tiles-search-background,
#tiles-search:focus-within #tiles-search-label,
#tiles-search:focus-within #tiles-search-guess,
#tiles-search:focus-within #tiles-search-input {
	margin-left:-390px;
	width:780px;
	}
}


/* TILES:NAV:SEARCH:BACKGROUND */

#tiles-search-background {
	z-index:2;
	border-radius:22px;
	background:white;
	box-sizing:border-box;
	border:1px solid #888;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
	transition: .225s, left 0s;
	}

#tiles-search:focus-within #tiles-search-background {
	border-radius:30px;
	border: 3px solid cornflowerblue;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.33);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.33);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.33);
	}

/* TILES:NAV:SEARCH:LABEL (my placeholder) */

#tiles-search-label {
	background:transparent;
	text-align:center;
	line-height:31px;	
	color:#444;	
	z-index:2;
	opacity:1;
	transition: opacity .5s;
}

#tiles-search:focus-within #tiles-search-label {
	transition: opacity .5s .25s;
}

@media only screen and (min-width: 460px) {
#tiles-search-label {
	line-height:44px;
	}
}

#tiles-search-label,
#tiles-search-guess,
#tiles-search-input {
	font-size:14px;
	font-family:arial;
	}

#tiles-search:focus-within #tiles-search-label,
#tiles-search:focus-within #tiles-search-guess,
#tiles-search:focus-within #tiles-search-input {
	font-size:14px;
	}

@media (min-width:320px) {
#tiles-search-label,
#tiles-search-guess,
#tiles-search-input {
	font-size:16px;		/* input text */

	}

#tiles-search:focus-within #tiles-search-label,
#tiles-search:focus-within #tiles-search-guess,
#tiles-search:focus-within #tiles-search-input {
	font-size:18px;
	}
}

@media (min-width:400px) {
#tiles-search-label,
#tiles-search-guess,
#tiles-search-input {
	font-size:18px;		/* input text */
	}

#tiles-search:focus-within #tiles-search-label,
#tiles-search:focus-within #tiles-search-guess,
#tiles-search:focus-within #tiles-search-input {
	font-size:22px;
	}
}

@media (min-width:800px) {
#tiles-search-label,
#tiles-search-guess,
#tiles-search-input {
	font-size:21px;		/* input text */
	}

#tiles-search:focus-within #tiles-search-label,
#tiles-search:focus-within #tiles-search-guess,
#tiles-search:focus-within #tiles-search-input {
	font-size:28px;
	}
}

#tiles-search:focus-within #tiles-search-label {
	opacity:0;
	transition:.225s;
	}

.tiles-search-msg #tiles-search-label {
	opacity:0;
	}

#tiles-search-label:before {
	content:'Where to?';
	}

@media only screen and (min-width:360px) {
#tiles-search-label:before {
	content:'Where shall we go?';
	}
}

/* TILES:NAV:SEARCH:GUESS */

#tiles-search-guess {
	top:0;
	padding:0;
	border-radius:30px;
	/* padding:3px 120px 16px 46px; cannot remember why 120px on the right side */
	padding:0 42px;
	line-height:44px;	/* input text */
	text-align:left;
	color:#888;
	z-index:2;
	transition:.195s, left 0s;
	opacity:0;	
	}

.hide-fonts #tiles-search-guess {
	display:none;
	}

/* TILES:NAV:SEARCH:GUESS:FOCUS */
#tiles-search:focus-within #tiles-search-guess {
	padding:0 50px;
	line-height:60px;	/* input text */
	transition:.225s, left 0s;
	opacity:1;
	}

/* TILES:NAV:SEARCH:ICON */

#tiles-search-icon {
	position:absolute;
	top:9px;
	left:50vw;
	font-size:0;
	line-height:0;
	width:30px;
	height:30px;
	margin-left:-35vw;
	border-radius:22px;
	z-index:2;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:center;
	background-size:14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaa' viewBox='0 0 512 512'%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E%0A");
	transition:.225s, left 0s;
	}

#tiles-search:focus-within #tiles-search-icon {
	top:3px;
	width:54px;
	height:60px;
	margin-left:-49vw;
	border-radius:30px;
	background-size:22px;
	}

@media only screen and (min-width: 460px) {
#tiles-search-icon {
	top:3px;
	margin-left:-30vw;
	width:44px;
	height:44px;
	background-size:18px;
	}

#tiles-search:focus-within #tiles-search-icon {
	margin-left:-40vw;
	}
}

@media only screen and (min-width: 960px) {
#tiles-search-icon {
	margin-left:-287px;
	}
#tiles-search:focus-within #tiles-search-icon {
	margin-left:-390px;
	}
}

/* TILES:NAV:SEARCH:INPUT */
#tiles-search-input {
	-webkit-appearance:none;	/* Have to clear default styling or rest (particularly height) does not work */
	box-sizing:border-box;
	/* font-family:'Source Sans Pro',arial; Don't know why but without this input uses arial */
	font-family:arial;
	border:none;
	top:0;
	padding:0 42px;
	line-height:44px;	/* input text */
	color:black;		/* input text */
	caret-color:black;	/* Input caret (blinking cursor */
	background:transparent;
	z-index:4;
	transition:.225s, left 0s;	
	}

.hide-fonts #tiles-search-input {
	display:none;
	}

#tiles-search:focus-within #tiles-search-input {
	padding:0 50px;
	line-height:60px;	/* input text */
	}

@media only screen and (min-width: 960px) {
#tiles-search:focus-within #tiles-search-input2 {
	padding:0 60px;	
	}
}

#tiles-search-accept, #tiles-search-cancel, #tiles-search-cancel2 {
	display:none;	/* turned on by JS, could not get CSS to work */
	position:absolute;
	top:12px;
	left:85%;
	margin-left:-28px;
	border:none;
	width:24px;
	height:24px;
	border-radius:20px;
	font-size:0;
	background-color:rgb(238,238,238,.5); /* white */
	background-repeat:no-repeat;
	background-position:center;
	background-size:12px;
	/* Font Awesome cancel */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaa' viewBox='0 0 352 512'%3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E%0A"); /* https://fontawesome.com/license */
	cursor:pointer;
	z-index:5;
	transition:.195s;
	}

@media only screen and (min-width: 460px) {
#tiles-search-accept, #tiles-search-cancel, #tiles-search-cancel2 {
	top:10px;
	left:80%;
	margin-left:-36px;
	border:none;
	width:30px;
	height:30px;
	border-radius:20px;
	background-size:14px;
	}
}

@media only screen and (min-width: 1024px) {
#tiles-search-accept, #tiles-search-cancel, #tiles-search-cancel2 {
	left:50vw;
	margin-left:253px;
	}
}

#tiles-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;	Have to clear default styling or rest does not work
	display:none;
	}

/* 
#tiles-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;	Have to clear default styling or rest does not work
	content:'';
	display:block;
	display:none;
	top:7px;
	margin-left:-8px;
	left:90%;
	z-index:5;
	}
 */
#tiles-search-accept {
	margin-left:-76px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aaa' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E%0A"); /* https://fontawesome.com/license */
	}

@media only screen and (min-width: 1024px) {
#tiles-search-accept {
	left:50vw;
	margin-left:216px;
	}
}

#tiles-search:focus-within #tiles-search-accept, #tiles-search:focus-within #tiles-search-cancel, #tiles-search:focus-within #tiles-search-cancel2 {
	top:13px;
	left:100%;
	padding:0;
	margin:0;
	margin-left:-52px;
	width:40px;
	height:40px;
	border-radius:20px;
	background-size:18px;
	transition:.225s;
	}

@media only screen and (min-width: 460px) {
#tiles-search:focus-within #tiles-search-accept, #tiles-search:focus-within #tiles-search-cancel, #tiles-search:focus-within #tiles-search-cancel2 {
	left:90%;
	}
}

@media only screen and (min-width: 1024px) {
#tiles-search:focus-within #tiles-search-accept, #tiles-search:focus-within #tiles-search-cancel, #tiles-search:focus-within #tiles-search-cancel2 {
	left:50vw;
	margin-left:340px;
	}
}

#tiles-search:focus-within #tiles-search-accept {
	margin-left:-100px;
	background-size:24px;
	}

@media only screen and (min-width: 1024px) {
#tiles-search:focus-within #tiles-search-accept {
	left:50vw;
	margin-left:294px;
	}
}
/*
#tiles-search:focus-within #tiles-search-input::-webkit-search-cancel-button {
	display:block;
	top:10px;
	margin-left:-12px;
	}
*/

#tiles-search-cancel2 {
	transition:0s .225s;
	}

#tiles-search:focus-within #tiles-search-cancel2 {
	height:0;
	transition:0;
	}

#tiles-search-cancel:hover {
	background-color:black;/*qq2*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffc000' viewBox='0 0 352 512'%3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E%0A"); /* https://fontawesome.com/license */
	}

#tiles-search-accept:hover {
	background-color:black;
	/* Font Awesome check */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffc000' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E%0A"); /* https://fontawesome.com/license */
	}

#tiles-search-accept:after, #tiles-search-cancel:after {
	display:none; /* remove previous CSS */
	}

/* Later could style
::-webkit-search-results-button
*/


/* TILES:NAV:SEARCH:STATUS */

#tiles-status {
	/*position:absolute;
	top:50px;*/
	box-sizing:border-box;
	width:100%;
	height:32px;
	padding:0;
	text-align:center;
	font-size:12px;
	line-height:32px;
	background:white;
	/* color:#bbb; */
	color:#888;	/* 76% black with touch of blue */
	/* font-family:'Source Sans Pro',arial; */
	height:auto;	/* show pitch-description */
	height:0;
	display:none;
	}

@media (min-width:460px ) {
#tiles-status {
	height:46px;
	font-size:14px;
	line-height:46px;
	}
}

#tiles-status.show, .tiles-search-msg #tiles-status {
	display:block;
	height:auto;
	}

.hide-fonts #tiles-status {
	color:white;
	}

.theme-black #tiles-status {
	background:black;
	/* color:#bbb; */
	color:#323749;	/* 76% black with touch of blue */
	}

.hide-fonts .theme-black #tiles-status {
	color:black;
	}

.theme-midnight #tiles-status {
	background:midnightblue;
	color:lightskyblue;
	}

.hide-fonts .theme-midnight #tiles-status {
	color:midnightblue;
	}

.theme-coffee #tiles-status {
	background:bisque;
	color:tan;
	}

.hide-fonts .theme-coffee #tiles-status {
	color:bisque;
	}

#tiles-status.show {
	height:46px;
	}

#tiles-status b {
	font-weight:normal;
	}

#tiles-status.show {
	z-index:1;
	}

/* TILES:NAV:SEARCH:STATUS:RESULT TAG */

.tiles-tag {
	display:inline-block;
	box-sizing:border-box;
	width:auto;
	height:44px;
	line-height:44px;
	text-transform:capitalize;
	font-size:18px;
	padding:0 6px;
	/*color:#444;*/
	color:#323749;	/* 76% black with touch of blue */
	background:white;
	border:none;
	cursor:pointer;
	}

.tiles-tag:hover {
	/*background:blue;
	color:white;*/
	background:black;
	color:#ffc000;	/* PhotoSecrets gold */
	}

/* TILES:NAV:SEARCH:SUGGESTIONS */

#tiles-search-suggestions {
	position:absolute;
	display:block;
	background:transparent;
	width:100%;
	top:50px;
	font-size:0;
	line-height:0;
	box-sizing:border-box;
	transition: top .225s;
	}

#tiles-search:focus-within #tiles-search-suggestions {
	top:66px;
	transition: top .195s;
	}

#tiles-search.qty1 #tiles-search-suggestions {
	height:46px;
	}

#tiles-search.qty2 #tiles-search-suggestions {
	height:90px;
	}

#tiles-search.qty3 #tiles-search-suggestions {
	height:134px;
	}

#tiles-search.qty4 #tiles-search-suggestions {
	height:178px;
	}

#tiles-search.qty5 #tiles-search-suggestions {
	height:222px;
	}

#tiles-search.qty6 #tiles-search-suggestions {
	height:266px;
	}

#tiles-search.qty7 #tiles-search-suggestions {
	height:310px;
	}

#tiles-search.qty8 #tiles-search-suggestions {
	height:354px;
	}

#tiles-search.qty9 #tiles-search-suggestions {
	height:398px;
	}

#tiles-search-suggestions button {
	display:inline-block;
	text-align:center;
	width:100%;
	height:44px;
	line-height:0;
	font-size:14px;
	vertical-align:top;
	margin:0;
	border:none;
	border-radius:0;
	cursor:pointer;
	background:#ffc000;	/* PhotoSecrets gold */
	color:black;
	font-weight:bold;
	-webkit-transition:all 100ms;
	transition:all 100ms;
	}

@media (min-width:420px) {
	#tiles-search-suggestions button {
		font-size:18px;
	}
}

@media (min-width:500px) {
	#tiles-search-suggestions button {
		font-size:14px;
	}
	#tiles-search.qty2 #tiles-search-suggestions {
		height:46px;
	}

	#tiles-search.qty3 #tiles-search-suggestions,
	#tiles-search.qty4 #tiles-search-suggestions {
		height:90px;
	}

	#tiles-search.qty5 #tiles-search-suggestions,
	#tiles-search.qty6 #tiles-search-suggestions {
		height:134px;
	}

	#tiles-search.qty7 #tiles-search-suggestions,
	#tiles-search.qty8 #tiles-search-suggestions {
		height:178px;
	}

	#tiles-search.qty9 #tiles-search-suggestions {
		height:222px;
	}

	#tiles-search-suggestions button.width50,
	#tiles-search-suggestions button.width33 {
		width:50%;
	}

}

@media (min-width:600px) {
	#tiles-search-suggestions button {
		font-size:18px;
	}
}

@media (min-width:700px) {

	#tiles-search-suggestions button {
		font-size:22px;
		height:60px;
	}

	#tiles-search.qty1 #tiles-search-suggestions,
	#tiles-search.qty2 #tiles-search-suggestions {
		height:62px;
	}

	#tiles-search.qty3 #tiles-search-suggestions,
	#tiles-search.qty4 #tiles-search-suggestions {
		height:122px;
	}

	#tiles-search.qty5 #tiles-search-suggestions,
	#tiles-search.qty6 #tiles-search-suggestions {
		height:182px;
	}

	#tiles-search.qty7 #tiles-search-suggestions,
	#tiles-search.qty8 #tiles-search-suggestions {
		height:242px;
	}

	#tiles-search.qty9 #tiles-search-suggestions {
		height:302px;
	}

}

@media (min-width:900px) {

	#tiles-search.qty3 #tiles-search-suggestions {
		height:62px;
	}

	#tiles-search.qty5 #tiles-search-suggestions,
	#tiles-search.qty6 #tiles-search-suggestions {
		height:122px;
	}

	#tiles-search.qty7 #tiles-search-suggestions,
	#tiles-search.qty8 #tiles-search-suggestions,
	#tiles-search.qty9 #tiles-search-suggestions {
		height:182px;
	}

	#tiles-search-suggestions button.width50 {
		width:50%;
	}

	#tiles-search-suggestions button.width33 {
		width:33.3333%;
	}
}

#tiles-search-suggestions button:hover {
	background:black;
	color:#ffc000;	/* PhotoSecrets gold */
	}

#tiles-search-suggestions button:focus {
	outline:none;
	}

/* TILES:NAV:SEARCH:SPACER */

.tiles-search-spacer {
	height:0;
	padding-top:36px;
	transition: padding .225s;
	}

@media only screen and (min-width: 460px) {
.tiles-search-spacer {
	padding-top:50px;
	}
}

#tiles-search:focus-within ~ .tiles-search-spacer {
	padding-top:66px;
	}

@media only screen and (min-width: 800px) {
.tiles-search-spacer {
	padding-top:0;
	}
.tiles-status-msg .tiles-search-spacer {
	padding-top:52px;
	}
}

#tiles-search.qty1 ~ .tiles-search-spacer {
	height:46px;
	}

#tiles-search.qty2 ~ .tiles-search-spacer {
	height:90px;
	}

#tiles-search.qty3 ~ .tiles-search-spacer {
	height:134px;
	}

#tiles-search.qty4 ~ .tiles-search-spacer {
	height:178px;
	}

#tiles-search.qty5 ~ .tiles-search-spacer {
	height:222px;
	}

#tiles-search.qty6 ~ .tiles-search-spacer {
	height:266px;
	}

#tiles-search.qty7 ~ .tiles-search-spacer {
	height:310px;
	}

#tiles-search.qty8 ~ .tiles-search-spacer {
	height:354px;
	}

#tiles-search.qty9 ~ .tiles-search-spacer {
	height:398px;
	}

@media (min-width:500px) {

	#tiles-search.qty2 ~ .tiles-search-spacer {
		height:46px;
	}

	#tiles-search.qty3 ~ .tiles-search-spacer,
	#tiles-search.qty4 ~ .tiles-search-spacer {
		height:90px;
	}

	#tiles-search.qty5 ~ .tiles-search-spacer,
	#tiles-search.qty6 ~ .tiles-search-spacer {
		height:134px;
	}

	#tiles-search.qty7 ~ .tiles-search-spacer,
	#tiles-search.qty8 ~ .tiles-search-spacer {
		height:178px;
	}

	#tiles-search.qty9 ~ .tiles-search-spacer {
		height:222px;
	}

}

@media (min-width:700px) {

	#tiles-search.qty2 ~ .tiles-search-spacer {
		height:76px;
	}

	#tiles-search.qty3 ~ .tiles-search-spacer,
	#tiles-search.qty4 ~ .tiles-search-spacer {
		height:120px;
	}

	#tiles-search.qty5 ~ .tiles-search-spacer,
	#tiles-search.qty6 ~ .tiles-search-spacer {
		height:164px;
	}

	#tiles-search.qty7 ~ .tiles-search-spacer,
	#tiles-search.qty8 ~ .tiles-search-spacer {
		height:208px;
	}

	#tiles-search.qty9 ~ .tiles-search-spacer {
		height:252px;
	}

}
/* TILES:NAV:SEARCH:MORE (at bottom) */

#tiles-more-div {
	position:relative;
	margin-top:-54px;
	text-align:center;
	font-size:0;
	line-height:0;
	z-index:1;
	}

#tiles-more-div button {
	display:none;
	text-align:center;
	width:33.3333%;
	height:44px;
	line-height:0;
	font-size:14px;
	vertical-align:top;
	margin:0;
	border:none;
	background:white;
	/*color:#aaa;*/
	color:#323749;	/* 76% black with touch of blue */
	cursor:pointer;
	border-radius:none;
	}

.theme-black #tiles-more-div button {
	background:black;
	color:white;
	}

.theme-midnight #tiles-more-div button {
	background:midnightblue;
	color:lightskyblue;
	}

.theme-coffee #tiles-more-div button {
	background:bisque;
	color:saddlebrown;
	}

#tiles-more-div button:hover {
	/*background:blue;
	color:white;*/
	background:black;
	color:#ffc000;	/* PhotoSecrets gold */
	}

.theme-black #tiles-more-div button:hover {
	background:#ffc000;	/* PhotoSecrets gold */
	color:black;
	}

.theme-midnight #tiles-more-div button:hover {
	background:cornflowerblue;
	color:midnightblue;
	}

.theme-coffee #tiles-more-div button:hover {
	background:saddlebrown;
	color:tan;
	}

#tiles-more-div button:focus {
	outline:none;
	}

#tiles-more-div button.show {
	display:inline-block;
	}

/* End of TILES:NAV:SEARCH */

/* TILES:NAV:OPTIONS */
#tiles-options {font-size:0;line-height:0;margin:0 auto;}
.tiles-buttons{max-width:1024px;margin:auto;color:#666;font-size:0;text-align:center;}
.tiles-button-group {display:inline-block;}
.tiles-button-group.bg4b {display:none;}
.tiles-button-group button {box-sizing:border-box;width:25vw;height:10vw;line-height:8vw;font-size:5vw;margin:0;padding:0;background:white;border:none;border-right:1px solid #aaa;border-bottom:1px solid #aaa;color:#666;cursor:pointer;outline:none;}
.tiles-button-group button:first-child {border-left:none;}
.tiles-button-group.bg8 button:nth-child(-n+4) {border-top:1px solid #aaa;}
.tiles-button-group button:nth-child(4n) {border-right:none;}
.tiles-button-group button:hover, .tiles-button-group button.selected {background:#ccc;color:black;}
.tiles-button-group button.title:hover {background:white;color:#666;}
.tiles-button-group button.title {font-weight:bold;}
@media only screen and (min-width: 420px) {
.tiles-button-group.bg4b {display:inline-block;}
.tiles-button-group button {box-sizing:border-box;width:12.5vw;height:5vw;line-height:4vw;font-size:2.2vw;}
.tiles-button-group.bg8 button {border-top:1px solid #aaa;}
.tiles-button-group.bg8 button:nth-child(4n), .tiles-button-group.bg4a button:nth-child(4n) {border-right:1px solid #aaa;}
.tiles-button-group.bg8 button:nth-child(8n) {border-right:none;}
}
@media only screen and (min-width: 800px) {
.tiles-button-group button {width:100px;height:40px;line-height:36px;font-size:20px;}
.tiles-button-group.bg8 button:first-child, .tiles-button-group.bg4a button:first-child {border-left:1px solid #aaa;}
.tiles-button-group.bg8 button:nth-child(8n), .tiles-button-group.bg4b button:last-child {border-right:1px solid #aaa;}
.tiles-button-group.bg8 button:nth-child(8n-7) {border-left:1px solid #aaa;}
.tiles-button-group.bg8 button:first-child {border-radius:6px 0 0 0;}
.tiles-button-group.bg8 button:last-child {border-radius:0 6px 0 0;}
.tiles-button-group.bg4a button:first-child {border-radius:0 0 0 6px;}
.tiles-button-group.bg4b button:last-child {border-radius:0 0 6px 0;}
}
@media only screen and (min-width: 1025px) {
.tiles-button-group {display:inline-block;width:auto;margin:auto;}
.tiles-button-group+.tiles-button-group {margin-left:32px;}
.tiles-button-group button {width:60px;height:30px;line-height:15px;font-size:13px;border-top:1px solid #aaa;}
.tiles-button-group button:nth-child(8n) {border-right:1px solid #aaa;}
.tiles-button-group button:nth-child(8n-7) {border-left:1px solid #aaa;}
.tiles-button-group.bg8 button:first-child {border-radius:6px 0 0 6px;}
.tiles-button-group.bg8 button:last-child {border-radius:0 6px 6px 0;}
.tiles-button-group.bg4a button:first-child, .tiles-button-group.bg4b button:first-child {border-radius:6px 0 0 6px;}
.tiles-button-group.bg4a button:last-child, .tiles-button-group.bg4b button:last-child {border-radius:0 6px 6px 0;}
}
button.button-as-3, .tiles-button-group.asd button.button-as-3.selected {background:#ccc;}
.tiles-button-group.asd button.button-as-3 {background:white;}
@media only screen and (min-width: 700px) {
button.button-as-4, .tiles-button-group.asd button.button-as-4.selected {background:#ccc;}
button.button-as-3, .tiles-button-group.asd button.button-as-4 {background:white;}
}
@media only screen and (min-width: 900px) {
button.button-as-6, .tiles-button-group.asd button.button-as-6.selected {background:#ccc;}
button.button-as-4, .tiles-button-group.asd button.button-as-6 {background:white;}
}


/* ================================================================================== */
/*                                                                                    */
/*                                  STYLE-TILES.CSS                                   */
/*                                                                                    */								
/*                                    Mosaic tiles                                    */
/*                                                                                    */							 
/* ================================================================================== */


/* TILES (MOSAIC, TILES) */

#tiles {}

.tiles {
	position:relative;		/* Required if use position:absolute later */
	width:101.2vw;
	padding:0;
	margin:0;
	margin-left:-1.2vw;
	/*margin-top:1.2vw;*/
	font-size:0;
	line-height:0;
	padding-bottom:60px;	/* for tiles-more buttons */
	}/* need margin:0 as old tiles set a margin */

.tiles.margin-top, #tiles-options + .tiles {
	margin-top:1.2vw;
	}

.ps .tiles.bb {
	display:none;
	}

.bb .tiles.ps {
	display:none;
	}

.tiles li {
	margin:0;	/* Removes margin added by style-basic.css */
	}

/* TILES:TILE */

.tile, .tile.image-link {		/* .tile { otherwise .image-link removes the border on an a tag */
	position:relative;	/* For absolute inside */
	/*display:inline-block; default is off */
	display:none; /* default is off. Show a tile with class show_this_tile */
	box-sizing:border-box;
	width:33.73333vw;
	height:33.73333vw;
	padding:0;
	border:none;
	border-left:1.2vw solid white;
	border-bottom:1.2vw solid white;
	vertical-align:top;
	background-color:white;		/* home page wants white/transparent background for books */
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	cursor:pointer;
	}

.tiles.no-sort .tile, .tile.show_this_tile {
	display:inline-block;
	}

/* TILES:TILE:SIZE:OTHER SIZES */

.tile.group, .tile.pano, .tile.row, .tile.blog-item, .tile.big-square, .tile.big-horiz, .tile.video, .tile.a16x9 {
	width:101.2vw;
	}

.tile.wide {	/* 2:1 */
	width:67.466666vw;
	}

.tile.horiz {	/* 3:2 */
	width:50.6vw;
	}

.tile.square { /* 1:1, default, small square */
	}

.tile.video, .tile.a16x9 {
	height:56.925vw;
	}

.tile.big-square {
	height:101.2vw;
	}

.tile.big-horiz {
	height:67.466666vw;
	}

.tile.group {
	padding:0;	/* 64px = height of title and padding, 24vw = height of book xxx */
	margin-top:44px;
	height:26vw;
	background:white;	
	}

@media (min-width:1052px) {
.tiles {
	width:1052px;
	margin:0 auto;
	}

.tiles.margin-top {
	margin-top:14px;
	}

.tile, .tile.image-link {		/* otherwise .image-link removes the borderon an a tag */
	width:346px;
	height:346px;
	border-left:14px solid white;
	border-bottom:14px solid white;
	}

.tile.group, .tile.pano, .tile.row, .tile.blog-item, .tile.big-square, .tile.big-horiz, .tile.video, .tile.a16x9 {
	width:1038px;
	}

.tile.group {
	height:256px;	
	}

.tile.wide {	/* 2:1 */
	width:692px;
	}

.tile.horiz {	/* 3:2 */
	width:519px;
	}

.tile.square { /* 1:1, default, small square */
	}

.tile.big-square {
	height:1038px;
	}

.tile.big-horiz {
	height:692px;
	}

.tile.video, .tile.a16x9 {
	height:590px;
	}
}

.theme-black .tile.group {
	background:black;
	}

.theme-midnight .tile.group { 
	background:midnightblue;
	}

.theme-coffee .tile.group {
	background:bisque;
	}

.theme-black .tile { 
	border-color:black;
	}

.theme-midnight .tile { 
	border-color:midnightblue;
	}

.theme-coffee .tile {
	border-color:bisque;
	}

/* TILES:TILE:SHOW/HIDE */

.tile.show_this_tile {
	display:inline-block;
	}

.show_the_map .tile.show_this_tile, .show_the_map #tiles-options-sort, .show_the_map #tiles-options-qty {
	display:none;
	}

.show_the_map #the_map {
	display:inline-block;
	min-height:100vw;	/* do not know why but without this the height is very small */
	}

.tiles-button-group.map, .tiles-button-group.map.bg4a, .tiles-button-group.map.bg4b, .show_the_map .tiles-button-group.map.bg4b {
	display:none;
	}

.show_the_map .tiles-button-group.map.bg4a {
	display:inline-block;
	}

@media only screen and (min-width: 420px) {
.show_the_map .tiles-button-group.map.bg4b {
	display:inline-block;
	}
}

.show_the_map .tile-status-sort {
	display:none;
	}

/* TILES:TILE:HOVER */

#tiles:hover .tile {
	}

#tiles:hover .tile:hover {
	/* as written, this messes up .details
	opacity:0.9;
	z-index:2;
	*/
	}

/* TILES:TILE:FREE */
/* blur tiles when guide is free (i.e. not paid) */

/* Safari 4.0 - 8.0 */
@-webkit-keyframes blur-flash {
  0% {
  	filter: blur(0) opacity(1);
	}
  5% {
	-webkit-filter: blur(2vw) opacity(.3); /* Safari 6.0 - 9.0 */
	}
  95% {
	-webkit-filter: blur(2vw) opacity(.3); /* Safari 6.0 - 9.0 */
	}
  100% {
	-webkit-filter: blur(0) opacity(1); /* Safari 6.0 - 9.0 */
	}
}

/* Standard syntax */
@keyframes blur-flash {
  0% {
  	filter: blur(0) opacity(1);
	}
  5% {
  	filter: blur(2vw) opacity(.3);
	}
  95% {
  	filter: blur(2vw) opacity(.3);
	}
  100% {
  	filter: blur(0) opacity(1);
	}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes blur-map-flash {
  0% {
  	filter: blur(0) opacity(1);
	}
  5% {
	-webkit-filter: blur(6px) opacity(1); /* Safari 6.0 - 9.0 */
	}
  95% {
	-webkit-filter: blur(6px) opacity(1); /* Safari 6.0 - 9.0 */
	}
  100% {
	-webkit-filter: blur(0) opacity(1); /* Safari 6.0 - 9.0 */
	}
}

/* Standard syntax */
@keyframes blur-map-flash {
  0% {
  	filter: blur(0) opacity(1);
	}
  4% {
  	filter: blur(6px) opacity(.8);
	}
  96% {
  	filter: blur(6px) opacity(.8);
	}
  100% {
  	filter: blur(0) opacity(1);
	}
}

body.blur .tile:not(.free) {
	animation: blur-flash 20s linear 0s infinite;
}

body.blur .tile:not(.free):nth-child(7n+1) {
	animation: blur-flash 20s linear .25s infinite;
}

body.blur .tile:not(.free):nth-child(7n+2) {
	animation: blur-flash 20s linear .5s infinite;
}

body.blur .tile:not(.free):nth-child(7n+3) {
	animation: blur-flash 20s linear .75s infinite;
}

body.blur .tile:not(.free):nth-child(7n+4) {
	animation: blur-flash 20s linear 1s infinite;
}

body.blur .tile:not(.free):nth-child(7n+5) {
	animation: blur-flash 20s linear 1.25s infinite;
}

body.blur .tile:not(.free):nth-child(7n+6) {
	animation: blur-flash 20s linear 2s infinite;
}

body.blur .map-photo-small:not(.free), body.blur .map-photo-large:not(.free) {
	animation: blur-map-flash 20s linear 0s infinite;
}


/* TILES:TILE:FORMAT:LARGE/SMALL */
/* If use this, change to vw
#tiles.large .tile {
	width:25%;
	padding:0 25% 25% 0;
	}

#tiles.small .tile {
	width:10%;
	padding:0 10% 10% 0;
	}
*/

/* TILES:TILE:FORMAT:LIST */

#tiles.list .tile {
	/* do not put a display here as js sets that (to inline-block) */
	width:100%;
	height:60px;
	padding:0;
	border-bottom:1px solid #ccc;
	margin-bottom:0;
	opacity:1;
	transition:opacity .2s;
	}

#tiles.list .tile:hover {
	border:1px solid #888;
	background:white;
	z-index:1;
	}

#tiles.list:hover .tile {
	opacity:.666;
	}

#tiles.list:hover .tile:hover {
	opacity:1;
	}

/* TILES:TILE:SIZE:ROW */

.tile.row:first-child {
	}

.theme-black .tile.row:first-child {
	border-color:black;
	}

.theme-midnight .tile.row:first-child {
	border-color:midnightblue;
	}

.theme-coffee .tile.row:first-child {
	border-color:bisque;
	}

.tile.row {
	border-bottom:none;
	}

.tile.row + .tile.row {
	/*padding-top:1px; this caused a problem with .group */
	border-top:1px solid #ddd;
	}

.tile.row.group + .tile.row.group {
	/*padding-top:1px; this caused a problem with .group */
	border-top:none;
	}

.theme-black .tile.row + .tile.row {
	border-color:#333;
	}

.theme-coffee .tile.row + .tile.row {
	border-color:bisque;
	}

.theme-midnight .tile.row + .tile.row {
	border-color:midnightblue;
	}

/* TILES:BACKGROUND IMAGE */
.tile .image {
	position:absolute;
	height:0;
	padding:0 16.666% 16.666% 0;
	padding:0 100% 100% 0;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:contain;
	transition:margin 0.1s;
	}

.tile.icon {	/* As style-logo.css puts the PhotoSecrets icon on .icon */
	background-color:none;
	background-image:none;
	}

#tiles.list .tile .image {
	top:0;
	left:0;
	width:60px;
	height:60px;
	padding:0;
	background-size:cover;
	background-position:50% 0;
	transition:opacity .1s, width .1s, height .1s, top .1s, left .1s, background .1s;
	}

.tile:hover .image {
	}

#tiles.list .tile:hover .image {
	margin-top:0;
	width:120px;
	height:120px;
	background-color:transparent;
	background-size:contain;
	background-position:50% 50%;
	top:-30px;
	left:-30px;
	}

#tiles.list:hover .tile .image {
	opacity:0.5;
	}

#tiles.list .tile:hover .image {
	opacity:1;
	}

/* TILES:BACKGROUND IMAGE:H3 ON PHOTO*/

.tile h3.on-image {
	position:absolute;
	width:100%;
	bottom:0;
	margin:0;
	text-align:center;
	color:white;
	font-size:5vw;
	line-height:10vw;
	/* Fade to black */
	background:transparent; /* For browsers that do not support gradients */
	background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.667)); /* For Safari 5.1 to 6.0 */
	background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.667)); /* For Opera 11.1 to 12.0 */
	background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.667)); /* For Firefox 3.6 to 15 */
	background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.667)); /* Standard syntax */
	}

.theme-midnight .tile h3.on-image {
	color:lightskyblue;
	}

.theme-coffee .tile h3.on-image {
	color:bisque;
	}

.hide-fonts .tile h3.on-image {
	display:none;
	}

@media (min-width:960px) {
	.tile h3.on-image {
		font-size:48px;
		line-height:96px;
	}
}

.tile h3.on-image.two-lines {
	line-height:0;
	}

.tile h3.on-image .smaller {
	display:block;
	line-height:0;
	padding-bottom:1.5em;
	font-size:.5em;
	}

.theme-midnight .tile h3.on-image {
	background:-webkit-linear-gradient(rgba(25,25,112,0), rgba(25,25,112,0.667)); /* For Safari 5.1 to 6.0 */
	background:-o-linear-gradient(rgba(25,25,112,0), rgba(25,25,112,0.667)); /* For Opera 11.1 to 12.0 */
	background:-moz-linear-gradient(rgba(25,25,112,0), rgba(25,25,112,0.667)); /* For Firefox 3.6 to 15 */
	background:linear-gradient(rgba(25,25,112,0), rgba(25,25,112,0.667)); /* Standard syntax */
	}

.tile.big-horiz h3.on-image, .tile.big-square h3.on-image {
	font-size:10vw;
	line-height:20vw;
	}

@media (min-width:960px) {
	.tile.big-horiz h3.on-image, .tile.big-square h3.on-image {
		font-size:96px;
		line-height:192px;
	}
}

/* TILE:INSIDE */

.tile > div, .tile .inside {
	position:absolute;
	display:block;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:0;
	width:100%;
	height:100%;
	transition:all 0.333s ease;
	}

.tile.row .inside {
	background:white;
	}

.theme-black .tile.row .inside {
	background:black;
	}

.theme-midnight .tile.row .inside {
	background:midnightblue;
	}

.theme-coffee .tile.row .inside {
	background:bisque;
	}

.tile .inside.margin, .tile .inside.inset, .tile > .inset {
	margin:6%;
	}

/* TILES:INSIDE:PANEL */

.tile.panel .inside {
	position:absolute;
	top:5%;
	left:5%;
	width:90%;
	height:90%;
	background:white;
	border-radius:12px;
	}

.tile.apdiv .inside {
	position:absolute;
	top:8%;
	left:10%;
	width:80%;
	height:80%;
	background:white;
	border-radius:24px;
	}

.tile.future .inside {
	position:absolute;
	top:10%;
	left:10%;
	width:80%;
	height:80%;
	background:white;
	border-radius:50%;
	}

.tile.panel:hover .inside {
	margin-top:-1px;
	top:-1%;
	left:-1%;
	width:102%;
	height:102%;
	/*background:#dadada;*/
	background:#a3abb6;	/* Faint blue */
	border-radius:14px;
	color:black;
	}

.hide-fonts .tile.panel:hover .inside {
	color:white;
	}

.tile.apdiv:hover .inside {
	top:3%;
	left:5%;
	width:90%;
	height:90%;
	/*background:#dadada;*/
	background:#a3abb6;	/* Faint blue */
	color:black;
	border-radius:28px;
	}

.tile.future:hover .inside {
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*background:#dadada;*/
	background:#a3abb6;	/* Faint blue */
	color:black;
	}

#tiles.list .tile .inside, #tiles.list .tile:hover .inside,
#tiles.list .tile.panel .inside, #tiles.list .tile.apdiv .inside,
#tiles.list .tile.panel:hover .inside, #tiles.list .tile.apdiv:hover .inside {
	top:0;
	left:0;
	width:100%;
	height:60px;
	margin-top:0;
	background:transparent;
	border-radius:none;
	}

/* TILE:INSIDE:ROW IMAGE */

.tile.row .img {
	position:absolute;
	width:33.333%;
	height:0;
	padding:33.33% 1px 0 0;
	}

.tile.row .img.png {
	background-color:transparent;
	}

.tile.row .img.inset {
	top:12.5%;
	left:5%;
	width:25%;
	padding:12.5% 0;
	}

.tile .text {
	position:absolute;
	top:13%;
	right:6%;
	width:58%;
	font-size:3.8vw;
	line-height:1.33em;
	/*color:#444;*/
	color:#323749;	/* 76% black with touch of blue */
	}

.theme-black .tile .text {
	/*color:#aaa;*/
	color:#323749;	/* 76% black with touch of blue */
	}

.theme-midnight .tile .text {
	color:lightskyblue;
	}

.theme-coffee .tile .text {
	color:saddlebrown;
	}

.hide-fonts .tile .text {
	color:white;
	}

@media (min-width:960px) {
	.tile .text {
		font-size:36px;
	}
}

.tile .img.inset + .text {
	}

.tile .text .date {
	position:absolute;
	right:-6%;
	top:-3vw;
	font-size:2.4vw;
	line-height:2.4vw;
	font-style:normal;
	/*color:#aaa;*/
	color:#a3abb6;	/* Faint blue */
	}

.theme-black .tile .text .date {
	/*color:#888;*/
	color:#323749;	/* 76% black with touch of blue */
	}

.theme-midnight .tile .text .date {
	color:cornflowerblue;
	}

.theme-coffee .tile .text .date {
	color:tan;
	}

.hide-fonts .tile .text .date {
	color:white;
	}

@media (min-width:960px) {
	.tile .text .date {
		font-size:23px;
		right:-10%;
		top:-29px;
	}
}

.tile .text h3 {
	position:relative;
	top:0;
	margin:0.1vw 0 1.2vw 0;
	padding:0;
	font-size:5.2vw;
	line-height:1.2em;
	text-align:top;
	background:none;
	color:black;
	text-align:left;
	}

.theme-black .tile .text h3 {
	color:white;
	}

.theme-midnight .tile .text h3 {
	color:lightskyblue;
	}

.theme-coffee .tile .text h3 {
	color:saddlebrown;
	}

.hide-fonts .tile .text h3 {
	color:white;
	}

@media (min-width:960px) {
	.tile .text h3 {
		font-size:50px;
		margin:1px 0 11px 0;
	}
}

/* TILES:INSIDE:TITLE */

.tile.panel .title, .tile.apdiv .title, .tile.future .title {
	position:absolute;
	display:block;
	text-align:center;
	width:100%;
	top:24%;
	font-size:4vw;
	transition:font-size .1s;
	}

.tile.future .title:before {
	display:block;
	position:absolute;
	top:-4vw;
	width:100%;
	text-align:center;
	content:'Future';
	font-size:0.6em;
	/*color:#888;*/
	color:#323749;	/* 76% black with touch of blue */
	transition:font-size:.1s, top:.1s, color:.1s;
	}

.tile.apdiv .title, .tile.future .title {
	top:45%;
	font-size:3vw;
	line-height:4.5vw;
	}

#tiles.small .tile.panel .title {
	font-size:2vw;
	}

#tiles.small .tile.apdiv .title, #tiles.small .tile.future .title {
	font-size:1.5vw;
	}

.tile.panel:hover .title {
	font-size:3vw;	/* 15% larger */
	}

.tile.apdiv:hover .title, .tile.future:hover .title {
	font-size:3.45vw;	/* 15% larger */
	line-height:4vw;
	}

.tile.future:hover .title:before {
	top:-4vw;
	font-size:0.8em;
	color:black;
	}

.tile.future:hover .title:after {
	display:block;
	position:absolute;
	top:8vw;
	width:100%;
	text-align:center;
	content:'One day...';
	font-size:0.6em;
	color:black;
	}

@media (min-width:1024px) {
.tile.panel .title, .tile.apdiv .title, .tile.future .title {
	font-size:40px;
	}

.tile.future .title:before {
	top:-40px;
	}

.tile.apdiv .title, .tile.future .title {
	font-size:30px;
	line-height:45px;
	}

#tiles.small .tile.panel .title {
	font-size:20px;
	}

#tiles.small .tile.apdiv .title, #tiles.small .tile.future .title {
	font-size:15px;
	}

.tile.panel:hover .title {
	font-size:30px
	}

.tile.apdiv:hover .title, .tile.future:hover .title {
	font-size:34px;	/* 15% larger */
	line-height:40px;
	}

.tile.future:hover .title:before {
	top:-40px;
	}

.tile.future:hover .title:after {
	top:80px;
	}
}

#tiles.list .tile .title, #tiles.list .tile:hover .title,
#tiles.list .tile.panel .title, #tiles.list .tile.panel:hover .title,
#tiles.list .tile.apdiv .title, #tiles.list .tile.apdiv:hover .title,
#tiles.list .tile.future .title, #tiles.list .tile.future:hover .title {
	position:absolute;
	top:0;
	width:100%;
	height:60px;
	padding-left:100px;
	font-size:22px;
	line-height:60px;
	text-align:left;
	transition:padding .1s, font-size .1s, font-weight .1s, line-height .1s;
	pointer-events:none;
	}

#tiles.list .tile:hover .title,
#tiles.list .tile.panel:hover .title,
#tiles.list .tile.apdiv:hover .title,
#tiles.list .tile.future:hover .title {
	padding-left:96px;
	font-size:24px;
	line-height:59px;
	font-weight:bold;
	}

/* TILES:INSIDE:TEXT */

.tile, .tile a {
	/*color:#444;*/
	color:#323749;	/* 76% black with touch of blue */
	}

.tile:hover, .tile:hover a {
	color:black;
	}

/* TILES:GROUP (e.g. books) */

/* TILES:GROUP:TEXT ABOVE */

.tile.group h4 {
	display:block;
	position:absolute;
	left:2vw;
	top:-32px;
	bottom:auto;
	text-align:left;
	background:transparent;
	margin:0;
	padding:0;
	font-size:22px;
	line-height:22px;
	/*color:#888;*/
	color:#555;
	/*font-family:'Source Sans Pro',arial;*/
	font-weight:normal;
	z-index:2;
	}

.theme-black .tile.group h4 {
	/*color:#aaa;*/
	color:#323749;	/* 76% black with touch of blue */
	}

.theme-midnight .tile.group h4 {
	color:lightskyblue;
	}

.theme-coffee .tile.group h4 {
	color:saddlebrown;
	}

.hide-fonts .tile.group h4 {
	display:none;
	}

@media (min-width:960px) {
	.tile.group h4 {
		left:0;
	}
}

.tile.group .see-all {
	position:absolute;
	top:12px;
	right:0;
	text-align:right;
	display:block;
	margin:0;
	padding:12px 2.5vw 8px 24px;
	font-size:14px;
	line-height:12px;
	/*color:#888;*/
	color:#323749;	/* 76% black with touch of blue */
	text-decoration:none;
	border:none;
	/*font-family:'Source Sans Pro',arial;*/
	font-weight:normal;
	cursor:pointer;
	z-index:1;
	}

.hide-fonts .tile.group .see-all {
	display:none;
	}

@media (min-width:1025px) {
	.tile.group .see-all {
		padding-right:0;
	}
}

.tile.group .see-all:before {
	display:block;
	content:'See all \25B8';
	}

.tile.group .see-all:hover {
	color:black;
	}

.tile.group .see-all:hover:before {
	padding-bottom:4px;
	border-bottom:1px solid #888;
	}

/* TILES:GROUP:SCROLL (no longer used as did not work well with mobile, replaced with swiper */

.tile.group .scroll {
	overflow-x:scroll;
	overflow-y:hidden;
	-ms-overflow-style:none;
	}

/* Hide scroll bar */
.tile.group .scroll::-webkit-scrollbar {  /* Chrome and Safari */
	width:0 !important;  /* remove scrollbar space */
	height:0 !important;
    background:transparent;  /* optional:just make scrollbar invisible */
    }

/* TILES:GROUP:SLIDER */

.tile.group .tile-group-slider.swiper-container {
	/*
	-webkit-transition:300ms -webkit-transform;
	transition:300ms -webkit-transform;
	transition:300ms transform;
	transition:300ms transform, 300ms -webkit-transform;
	*/
	list-style-type:none;	/* if this is a ul */
	font-size:0;
	white-space:nowrap;
	margin:0;/*yyy*/
	padding:0;
	height:24vw;
    background:white;
	box-sizing:border-box;
	}

body.theme-black .tile.group .tile-group-slider.swiper-container {
	background:black;
	}

body.theme-midnight .tile.group .tile-group-slider.swiper-container {
	background:midnightblue;
	}

body.theme-coffee .tile.group .tile-group-slider.swiper-container {
	background:bisque;
	}

@media (min-width:1025px) {
	.tile.group .tile-group-slider.swiper-container {
		height:240px;
	}
}
/* TILES:GROUP:ITEM */

.tile.group .swiper-slide {
	position:relative;
	/*display:inline-block; */
	width:18vw;
	height:24vw;
	margin:0;
	padding:0;
	text-align:center;
	font-size:0;
	line-height:0;
	vertical-align:top;
	cursor:pointer;
	-webkit-transition:all 300ms;
	transition:all 300ms;
	-webkit-transform-origin:center left;
	transform-origin:center left;
    /* Center slide text vertically */
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	align-items:center;
    }
 
.tile.group .swiper-slide.a4x5 {
	width:21.2vw;
	}
   
.tile-group-slider .swiper-slide:first-child {
	margin-left:0.5vw;
	}

	/*   
    .swiper-button-black {
    	opacity:0.5;
    	}
    
    .swiper-button-black:hover {
    	opacity:1;
    	}

    .swiper-button-disabled {
    	display:none;
    	}
	*/

@media (min-width:1025px) {
	.tile.group .swiper-slide {
		width:180px;
		height:240px;
	}

	.tile.group .swiper-slide.a4x5 {
		width:212px;
	}

	.tile-group-slider .swiper-slide:first-child {
		margin-left:0;
	}
	.tile-group-slider .swiper-slide:nth-last-child(2) {
		width:160px;
    }
}

.tile.group.with-title .swiper-slide {
	width:12.5vw;
	}

@media (min-width:1025px) {
	.tile.group.with-title .swiper-slide {
		width:128px;
	}
}

.tile.group .swiper-slide:first-child {
	padding-left:1.8vw;
	}

@media (min-width:1025px) {
	.tile.group .swiper-slide:first-child {
		padding-left:0;
	}
}

/* TILES:GROUP:HOVER EFFECT 
removed as intrusive

.tile.group ul:hover li {
	opacity:0.333;
	}

.tile.group ul:hover li:hover {
	-webkit-transform:scale(1.2);
	        transform:scale(1.2);
	opacity:1;
	z-index:10;
	}

.tile.group ul:hover {
	-webkit-transform:translate3d(-9px, 0, 0);
	        transform:translate3d(-9px, 0, 0);
	}

.tile.group li:hover ~ li {
	-webkit-transform:translate3d(18px, 0, 0);
	        transform:translate3d(18px, 0, 0);
	}

.tile.group.with-title ul:hover {
	-webkit-transform:translate3d(-6px, 0, 0);
	        transform:translate3d(-6px, 0, 0);
	}

.tile.group.with-title li:hover ~ li {
	-webkit-transform:translate3d(12px, 0, 0);
	        transform:translate3d(12px, 0, 0);
	}

.tile.group li:first-child:hover {
  		padding-left:14px;
	}

.tile.group li:last-child:hover {
  		margin-left:-8px;
	}
*/

/* TILES:GROUP:IMAGE */

.tile.group .swiper-slide span {
	display:none;
	}

.tile.group .swiper-slide a {
	display:block;
	width:100%;
	height:100%;
	}

.tile.group .swiper-slide .img {
	position:absolute;
	display:block;
	width:16vw;
	height:24vw;
	padding:0;
	box-sizing:border-box;
	border:1px solid black;
	}

.tile.group .swiper-slide .img.a4x5 {
	/* padding is width at .tile.group .swiper-slide */
	width:19.2vw;
	height:24vw;
	padding:0;
	}

@media (min-width:1025px) {
	.tile.group .swiper-slide .img {
		width:160px;
		height:240px;
	}
	.tile.group .swiper-slide .img.a4x5 {
		width:192px;
		height:240px;
	}
}

.tile.group.with-title .swiper-slide .img {
	width:12vw;
	height:18vw;
	}

.tile.group.with-title .swiper-slide .img.a4x5 {
	width:14.4vw;
	height:18vw;
	}

@media (min-width:1025px) {
	.tile.group.with-title .swiper-slide .img {
		width:120px;
		height:180px;
	}
	.tile.group.with-title .swiper-slide .img.a4x5 {
		width:144px;
		height:180px;
	}
}

.tile.group .swiper-slide .title {
	display:none;
	}

.tile.group.with-title .swiper-slide .title {
	/* font-family:'Source Sans Pro',arial; */
	position:absolute;
	top:90px;
	display:block;
	width:12vw;
	height:12vw;
	box-sizing:border-box;
	padding-top:6px;
	font-size:9px;
	line-height:12px;
	/*color:#666;*/
	color:#323749;	/* 76% black with touch of blue */
	white-space:normal;
	}

.hide-fonts .tile.group.with-title .swiper-slide .title {
	color:white;
	}

@media (min-width:1025px) {
	.tile.group.with-title .swiper-slide .title {
		width:120px;
		height:120px;
	}
}

.tile.group .swiper-slide:hover .title {
	color:black;
	padding-top:1vw;
	}

@media (min-width:1025px) {
	.tile.group .swiper-slide:hover .title {
		padding-top:10px;
	}
}

/* TILE:VIDEO */

.tile video, .tile source {
	width:100%;
	border:none;
	}

.tile video .img {
	z-index:0;	/* not necessary, just in case */
	}

.tile video {
	position:relative;
	z-index:1;
	}

.tile-video-hide {
	display:none;
	}

/* TILE:DETAILS */

.tile .details {
	display:none;
	background:white;
	}

.tile .details ul {
	font-family:'Source Sans Pro',arial;	/* Otherwise uses serif font from somewhere else */
	}

.tile .details, .tile .details ul {
	font-size:18px;
	line-height:1.5em;
	}

@media (min-width:769px) {
	.tile .details, .tile .details ul {
		font-size:2.34vw;
	}
}

@media (min-width:1025px) {
	.tile .details, .tile .details ul {
		font-size:24px;
	}
}

body.theme-black .tile .details {	/* do not know why but needs body declared here */
	background:black;
	color:white;
	}

body.theme-midnight .tile  .details {
	background:midnightblue;
	color:white;
	}

body.theme-coffee .tile .details {
	background:bisque;
	color:saddlebrown;
	}

/*
THEME-MIDNIGHT:
	background:midnightblue;
	color:lightskyblue;
	border-color:cornflowerblue;

THEME-COFFEE:
	background:bisque;
	color:saddlebrown;
	border-color:tan; 
*/

/* needs JS to add classes to tile:.active, then .reveal */
.tile.active .details, #test-details {
	position:fixed;
	display:block;
	top:100%;
	left:0;
	width:100%;
    height:100%;
    box-sizing:border-box;
    padding-bottom:60px;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;	/* momentum scrolling on iOS, requires overflow-y:scroll;, not auto */
	z-index:10;
 	background:white;
	opacity:0.8;
	-webkit-transition:top 0.25s, height 0.25s, opacity 0.25s; /* For Safari 3.1 to 6.0 */
	transition:top 0.25s, height 0.25s, opacity 0.25s;
	}

.tile.active.reveal .details, #test-details {
	top:0;
	width:100%;
	height:100%;
	opacity:1;
	}

/* TILE:DETAILS: CLOSE BUTTON */
/* This adds a cancel button on the top right. Can't do :hover since this is a pseudo element; would need to add a div in the HTML to do hover. */
.tile .details .margins:before {
	position:fixed;
	top:60px;
	top:0;
	right:0;
	width:60px;
	height:60px;
	border-radius:6px 0 0 6px;
	content:"\f00d";
	font: 36px/60px 'FontAwesome';
	text-align:center;
	color:#444;
	}

/* TILE:DETAILS:IMAGE */

.tile .details .img {
	position:relative;
	width:100%;
	height:0;
	padding:0 0 66.6667% 0;
	margin-bottom:24px;
	}

.tile .details .img.square, .tile .details .img.a1x1 {
	padding:0 0 100% 0;
	}

.tile .details .img.vertical, .tile .details .img.a2x3 {
	padding:0 0 150% 0;
	}

.tile .details .img.full-page {
	padding:0 0 100vh 0;
	}

.tile .details .img.details-cover,
.tile .details .img.cover {
	width:66%;
	height:0;
	padding:0 0 99% 0;
	border:1px solid black;
	margin:90px auto 0 auto;
	}

.theme-midnight .tile .details .img.details-cover,
.theme-midnight .tile .details .img.cover {
	border-color:midnightblue;
	}

.theme-coffee .tile .details .img.details-cover,
.theme-coffee .tile .details .img.cover {
	border-color:saddlebrown;
	}

/* TILE:DETAILS:IMAGE:TITLE */

.tile .details .img h3.on-image {
	font-size:10vw;
	line-height:1.15em;
	box-sizing:border-box;
	padding:0 6% 1vw 6%;
	text-shadow:0px 1px 1px black;
	}

@media (min-width:1025px) {
	.tile .details .img h3.on-image {
		font-size:100px;
	}
}

.tile .details .img.square h3.on-image {
	padding-bottom:10vw;
	}

@media (min-width:1025px) {
	.tile .details .img.square h3.on-image {
		padding-bottom:100px;
	}
}

.tile .details .img.vertical h3.on-image {
	padding-bottom:20vw;
	}

@media (min-width:1025px) {
	.tile .details .img.vertical h3.on-image {
		padding-bottom:200px;
	}
}

.tile .details .img.full-page h3.on-image {
	padding-bottom:22vh;
	}

@media (min-width:1025px) {
	.tile .details .img.full-page h3.on-image {
		padding-bottom:220px;
	}
}

.tile .details h2 {
	color:black;
	}

.theme-black .tile .details h2 {
	color:white;
	}

.theme-midnight .tile .details h2 {
	color:white;
	}

.theme-coffee .tile .details h2 {
	color:saddlebrown;
	}

.tile .details p:first-of-type {
	font-size:1.15em;
	line-height:1.4em;
	}

.tile .details .image-credit, .tile .details .image-credit a {
	font-size:0.5em;
	color:#ddd;
	text-decoration:none;
	}