@charset "UTF-8";



/* Global */

body {
	margin: 0 auto;
	font-family: Didot, 'Times New Roman', serif;
	background-color: #fff3e2;
}
* box-sizing {
	border-box;
}
img {
	max-width: 100%
}
.clear {
	clear: both;
}
.center {
	margin: 0 auto !important;
	text-align: center !important;
}
.vert-space-half-rem {
	height: .5rem;
}
.vert-space-1rem {
	height: 1rem;
}
.vert-space-2rem {
	height: 2rem;
}
.vert-space-3rem {
	height: 3rem;
}
.vert-space-4rem {
	height: 4rem;
}

/* Typography */

h1 {
	font-size: 2.75rem;
	color: #c90101;
	margin: 0;
	padding: 0;
}
section h2 {
	text-align: center;
	color: #c90101;
	font-size: 2.75rem;
	margin: 1.5rem 0 1.75rem 0;
}
h3 {
	font-size: 1.75rem;
	color: #5d0101;
	margin: 0;
	padding: 0;
}
.page-title h2 {
	font-size: 3rem;
	color: #c90101;
	text-align: center;
}
p {
	font-size: 1.1rem;
	color: #5d0101;
	line-height: 1.6;
	text-align: left;
}
p.center {
	margin: 0 auto;
	text-align: center;
}
p.center.large {
	font-size: 160%;
	font-weight: bold;
	margin: 0 0 1rem 0;
}
p.m-large {
	font-size: 140%;
	font-weight: normal;
	margin: 0 0 1rem 0;
}
p.caption {
	margin: -.25rem 0 1.5rem 0;
	font-size: 1rem;
	text-align: center;
}
p.joel-nakamura {
	margin: 0 auto;
	width: 80%;
}	
p.spider-guy {
	text-align: center;
	font-size: 1.1rem;
}
/* Header */
header {
	margin: 0 auto;
	padding: .5rem 0 .5rem 1rem;
	height: auto;
	width: 100%;
	position: fixed;
	top: 0;
	background-color: #fff3e2;
  overflow: hidden;
}
header h1 {
	float: left;
}
.hero img {
	min-width: 100%;
	margin-top: 4.5rem;
}
.hero.wide {
	display: block;
}
.hero.phone {
	display: none;
}



/* Nav */

a {
	transition: 1s ease;
}
nav {
	float: right;
	padding-right: 2rem;
}
ul {
	list-style: none;
	padding: 0;
}
ul li {
	display: inline;
}
ul li a {
	padding: 0 .25rem 0 .25rem
}
ul li a:link, ul li a:visited,
a:link, a:visited {
	text-decoration: none;
	color: #c56602;
}
ul li a:hover, ul li a:active,
a:hover, a:active  {
	text-decoration: none;
	color: #fccaad;
}
.meet-members a:link,
.meet-members a:visited {
	padding: 1rem;
	border: #fda822 1px solid;
	border-radius: 1rem;
}
.meet-members a:hover,
.meet-members a:active {
	padding: 1rem;
	border: #fc0 1px solid;
	border-radius: 1rem;
}


/* Container */
.container {
	margin: 0 auto;
	margin-bottom: 2rem;
	width: 80%;
	max-width: 820px;	
}
.container-1 {
	width: 100%;
	padding: 0 0 3rem 0;
}
.container-2 {
	width: 100%;
	background-color: #ffeac8;
	padding: 3rem 0 3rem 0;
}
.container-3 {
	width: 100%;
	padding: 3rem 0 3rem 0;
}
.welcome {
	margin: 0 auto;
	padding: 1rem 0 2rem 0;
	width: 80%;
	max-width: 980px;
}
.welcome .welcome-par-1 {
	text-align: center;
	font-size: 2.5rem;
	font-style: italic;
	color: #993a03;
	font-weight: bold;
}
.welcome .welcome-par-2 {
	text-align: center;
	font-size: 2rem;
	font-style: italic;
	margin: 2rem 0 6rem 0;
	color: #993a03;
	font-weight: bold;
}
section {
	margin: 0 auto;
	margin-bottom: 2rem;
	width: 80%;
	max-width: 920px;
	text-align: center;
}
section img.float-right {
	float: right;
	padding: .5rem 0 2rem 2rem;
}
section .max-414-mobile {
	display: none;
}
.members {
	margin: 0 auto;
	margin-bottom: 2rem;
	width: 80%;
	max-width: 920px;	
}
.member-img {
	float: left;
	width: 250px;
	padding: 10px 30px 30px 0;
}
.members p {
	overflow: hidden;
}
.qr {
	width: 440px;
	padding: 1.5rem 0 0 0;
}
.qr-code {
	float: right;
	margin: 2rem 0 0 0;
}

/* Footer */
footer {
	margin: 0 auto;
	margin-top: 4rem;
	margin-bottom: -1.2rem;
	padding: 1rem;
  text-align: center;
	background: #794b15;
}
footer p {
	margin: 0 auto;
	color: #fff3e2;
	font-size: .8rem;
	text-align: center;
}


/* Contact Form */
iframe {
	width: 100%;
	border: 0;
}
.contact-form .container {
	width: 80%;
	margin: 0 auto;
}
label {    
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 700;
	font-size: 1.1rem;
	color: #5d0101;
	line-height: 1.6;
}
.row {
	width: 100%;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
	  margin: 0 0 1rem 0;
    padding: 4px;
	  font-family: inherit;
    font-size: 1.1rem;
    line-height: 1.42857143;
    color: #5d0101;
    background-color: #fff8ed;
    background-image: none;
    border: 1px solid #5d0101;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
#captcha.form-control {
	width: 250px;
	max-width: 100%;
}
textarea.form-control {
    height: auto;
}
button {
	padding: .75rem;
	font-size: 1.1rem;
	font-family: inherit;
	color: #5d0101;
	background: #fff8ed;
  border: 1px solid #5d0101;
  border-radius: 4px;	
}
button:hover {
	color: #fff8ed;
	background: #5d0101;
  border: 1px solid #5d0101;
	transition: 1s ease;
}
.phone, img.qr-code-phone {
	display: none;
}
img.qr-code-screen {
	display: block;
	float: right;
	
}

@media(max-width: 1366px) {
	.welcome {
		padding: 0 0 1rem 0;
	}
	section h2 {
		font-size: 2.5rem;
	}	
}

@media(max-width: 1150px) {
	section h2 {
		font-size: 1.85rem;
	}	
	.welcome {
		max-width: 720px;
	}
	.welcome .welcome-par-1 {
		font-size: 1.75rem;
	}
	.welcome .welcome-par-2 {
		font-size: 1.5rem;
	}
	.member-img {
		width: 200px;
		padding: 10px 30px 30px 0;
	}
}

@media(max-width: 768px) {	
	img.qr-code-phone {
		display: block;
		margin: 0 auto;
		margin-top: 3rem;
		text-align: center !important;
	}
	img.qr-code-screen {
		display: none;
	}
	header h1, nav {
		float: none;
		margin: 0 auto;
		text-align: center;
	}
	header h1 {
		font-size: 4rem;
	}
	.welcome {
		padding: 0;
	}
	nav {
		margin-top: -.75rem;
	}
	.hero.wide {
		display: none;
	}
	.hero.phone {
		display: block !important;
		margin-top: 5rem;
	}	
	section img.float-right {
		width: 50%;
	}
	.member-img {
		float: none;
		width: 300px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 0 30px 0;
	}
	.members h3 {
		margin: 0 auto;
		text-align: center;
	}
}


@media(max-width: 600px) {
	
	.welcome {
		padding: 0 0 1rem 0;
		width: 80%;
	}
	.welcome .welcome-par-1 {
		font-size: 1.5rem;
	}
	.welcome .welcome-par-2 {
		font-size: 1.25rem;
		margin: 2rem 0 4rem 0;
	}
}

@media(max-width: 414px) {
	header h1 {
		font-size: 3.25rem;
	}	
	.welcome .welcome-par-1 {
		font-size: 1.25rem;
	}
	.welcome .welcome-par-2 {
		font-size: 1.1rem;
		margin: 1rem 0 2rem 0;
	}
	
	section img.float-right {
		display: none;
	}
	section .max-414-mobile {
		display: block;
	}
}

@media(max-width: 360px) {
	header h1 {
		font-size: 3.15rem;
	}
	.welcome p {
		font-size: 1.1rem;
		margin: 1.2rem .5rem 0 .5rem;
	}	
}