@charset "utf-8";

/* ################################################### */
/*                                                     */
/*                                                     */
/*                                                     */
/*              A C E   O F   B A S E                  */
/*                                                     */
/*                                                     */
/*                                                     */
/* ################################################### */

/* Fonts */

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-BoldItalic.woff2') format('woff2'),
  url('../fonts/Saans-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Bold.woff2') format('woff2'),
  url('../fonts/Saans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-SemiBoldItalic.woff2') format('woff2'),
  url('../fonts/Saans-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-SemiBold.woff2') format('woff2'),
  url('../fonts/Saans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-MediumItalic.woff2') format('woff2'),
  url('../fonts/Saans-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Medium.woff2') format('woff2'),
  url('../fonts/Saans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-RegularItalic.woff2') format('woff2'),
  url('../fonts/Saans-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}

@font-face
{
  font-family: 'Saans';
  src: url('../fonts/Saans-Regular.woff2') format('woff2'),
  url('../fonts/Saans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}


/* ----- RESET BROWSER DEFAULTS ----- */
*
{
	margin: 0;
	padding: 0;
}

a
{
	text-decoration: none;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-weight: normal;
}

a img
{
	outline: none;
}

ul
{
	list-style: none;
}
	
/* ----- BASIC PAGE SET-UPS ----- */	
html
{
	min-width: 324px;
	padding: 5px 0px;

	background: #0b1520 url("Building-photo-11w.jpg") center top no-repeat;
	background-size: 100%;

	color: #ffffff;

}

body
{
	color: #ffffff;
	
	padding: 18% 0 5%;
	
	font-family: "Saans", Helvetica, sans-serif;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 18px;
	line-height: 36px;
}

main,
header,
footer,
go
{
	width: 310px;
	max-width: 310px;
	margin: 0 auto;
}

h1
{
	font-size: 40px;
	font-style: italic;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: -1px;
	
	margin-bottom: 30px;
	text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

header p
{
	text-align: center;
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 1em;
}

main
{
	margin-top: 30px;
}

/* Sign */

#panicSign
{
	display: inline-block;
	vertical-align: top;
	width: 300px;
	height: 290px;
	margin: 30px auto 0 auto;
	background: url("sign-base@2x.png") center top no-repeat;
	background-size: 300px 290px;
	color: transparent;
	text-indent: -99999px;
}

#signTop
{
	width: 243px;
	height: 219px;
	position: relative;
	left: 10px;
	-webkit-mask-image: url("sign-top.svg");
	-moz-mask-image: url("sign-top.svg");
	-ms-mask-image: url("sign-top.svg");
	-o-mask-image: url("sign-top.svg");
	mask-image: url("sign-top.svg");
	-webkit-mask-size: 243px 219px;
	-moz-mask-size: 243px 219px;
	-ms-mask-size: 243px 219px;
	-o-mask-size: 243px 219px;
	mask-size: 243px 219px;
	-webkit-transition: background-color .3s ease;
}

#signBottom
{
	width: 243px;
	height: 220px;
	-webkit-mask-image: url("sign-bottom.svg");
	-moz-mask-image: url("sign-bottom.svg");
	-ms-mask-image: url("sign-bottom.svg");
	-o-mask-image: url("sign-bottom.svg");
	mask-image: url("sign-bottom.svg");
	-webkit-mask-size: 243px 220px;
	-moz-mask-size: 243px 220px;
	-ms-mask-size: 243px 220px;
	-o-mask-size: 243px 220px;
	mask-size: 243px 220px;
	position: relative;
	left: 48px;
	top: -149px;
	-webkit-transition: background-color .3s ease;
}

/* Color Swatches */

ul
{
	display: block;
	vertical-align: top;
	margin-top: 20px;
	width: 310px;
}

ul li
{
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 18px;
	margin: 10px 11px;
	overflow: hidden;
	color: transparent;
	text-indent: -99999px;
	border: 3px solid transparent;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

ul li.selected
{
	border-color: white;
	box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.25)
}

.red       { background-color: #fc4349; }
.orange    { background-color: #f27e18; }
.yellow    { background-color: #fecb57; }
.green     { background-color: #aff30b; }
.green2    { background-color: #19ed50; }
.teal      { background-color: #6fd5bb; }
.lightblue { background-color: #73d5e9; }
.blue      { background-color: #1f95c1; }
.darkblue  { background-color: #127093; }
.purple    { background-color: #8166c7; }
.pink      { background-color: #c268ba; }

.shiny-red       { background: #fc4349 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-orange    { background: #f27e18 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-yellow    { background: #fecb57 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-green     { background: #aff30b linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-green2    { background: #19ed50 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-teal      { background: #6fd5bb linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-lightblue { background: #73d5e9 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-blue      { background: #1f95c1 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-darkblue  { background: #127093 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-purple    { background: #8166c7 linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }
.shiny-pink      { background: #c268ba linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); }


/* Go Button */

#go
{
	position: fixed;
	width: 100%;	
	bottom: 0px;
	text-align: center;
	padding: 30px 0;
	background: #121d2b;	
}

#goButton
{
	width: 290px;
	font-size: 30px;
	-webkit-appearance: none;
	-khtml-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 10px;
	padding: 10px 24px;
	background-color: #113457;
	background-image: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,0)); 
	color: white;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
	-webkit-transition: background-color .5s ease;
	white-space: nowrap;
}
#goButton:active
{
	background-color: #122436;
}
#goButton.set
{
	background-color: #127093;
}

#goButton:disabled
{
	opacity: .3;
}

/* ----- FOOTER -------------------- */

footer
{
	display: block;
	text-align: center;
	font-size: 18px;
	padding-bottom: 100px;	
	margin-top: 40px;	
	color: rgba(255,255,255,.3);
}


/* Location */

#locationPortland
{
	display: block;
}
		
#locationNotPortland			
{
	display: none;
}

#locationFetching
{
	display: none;
}

#locationNotPortland main,
#locationFetching main
{
	text-align: center;
	padding: 60px 0 20px 0;
}

#locationNotPortland main p
{
	margin: 20px 0;
}

#locationNotPortland img
{
	opacity: .7;
	
}

#locationFetching main p
{
	margin: 30px 0px 0px 0px;
	color: #8166c7;
}

/* ########################################### */
/*                                             */
/*                                             */
/*                                             */
/* ----- Wider than 540px -------------------- */
/*                                             */
/*                                             */
/*                                             */
/* ########################################### */

@media screen and (min-width: 540px)
{
	body
	{
		padding: 18% 0 5%;
	}

	main,
	header,
	footer,
	go
	{
		width: 540px;
		max-width: 540px;
		margin: 0 auto;
	}
	
	h1
	{
		font-size: 66px;
		letter-spacing: -2px;
		margin-bottom: 30px;
		text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
	}
	
	header p
	{
		text-align: center;
		font-size: 24px;
		line-height: 27px;
	}
	
	footer
	{
		margin-top: 80px;
	}
	
	/* Sign */

	#panicSign
	{
		width: 540px;
		height: 522px;
		background-size: 540px 522px;
	}
	
	#signTop
	{
		width: 437px;
		height: 394px;
		left: 18px;
		-webkit-mask-size: 437px 394px;
		-moz-mask-size: 437px 394px;
		-ms-mask-size: 437px 394px;
		-o-mask-size: 437px 394px;
		mask-size: 437px 394px;
	}
	#signBottom
	{
		width: 437px;
		height: 396px;
		-webkit-mask-size: 437px 396px;
		-moz-mask-size: 437px 396px;
		-ms-mask-size: 437px 396px;
		-o-mask-size: 437px 396px;
		mask-size: 437px 396px;
		left: 86px;
		top: -267px;
	}
	
	/* Color Swatches */

	ul
	{
		margin-top: 20px;
		width: 540px;
	}
	
	ul li
	{
		width: 30px;
		height: 30px;
		border-radius: 18px;
		margin: 10px 7px;
	}
	
	/* Go Button */

	#go button
	{
		width: 350px;
		padding: 10px 30px;
	}
	
	#footer
	{
		font-size: 20px;
	}

}

/* ########################################### */
/*                                             */
/*                                             */
/*                                             */
/* ----- Wider than 920px -------------------- */
/*                                             */
/*                                             */
/*                                             */
/* ########################################### */

@media screen and (min-width: 920px)
{
	body
	{
		padding: 18% 0 5%;
	}
	
	main,
	header,
	footer,
	go
	{
		width: 920px;
		max-width: 920px;
	}
	
	main
	{
		margin-top: 60px;
	}
	
	header p
	{
		font-size: 35px;
		line-height: 38px;
		letter-spacing: -1px;
	}
	
	h1
	{
		font-size: 100px;
		letter-spacing: -5px;
		margin-bottom: 60px;
	}
	
	ul
	{
		display: inline-block;
		margin-top: 20px;
		width: 110px;
	}
	
	ul li
	{
		display: block;
		width: 44px;
		height: 44px;
		border-radius: 25px;
		margin: 4px auto;
		border: 3px solid transparent;
	}
	
	#panicSign
	{
		width: 700px;
		height: 597px;
		margin: 0 auto 0 auto;
		background-size: 617px 597px;
	}
	
	#signTop
	{
		width: 500px;
		height: 450px;
		left: 62px;
		-webkit-mask-size: 500px 450px;
		-moz-mask-size: 500px 450px;
		-ms-mask-size: 500px 450px;
		-o-mask-size: 500px 450px;
		mask-size: 500px 450px;
	}
	
	#signBottom
	{
		width: 500px;
		height: 451px;
		-webkit-mask-size: 500px 451px;
		-moz-mask-size: 500px 451px;
		-ms-mask-size: 500px 451px;
		-o-mask-size: 500px 451px;
		mask-size: 500px 451px;
		left: 139px;
		top: -304px;
	}
	
	/* Go Button */

	#go
	{
		margin-top: 60px;
	}

	#go button
	{
		font-size: 35px;
		padding: 10px 36px;
	}

	footer
	{
		margin-top: 60px;		
	}
}