body {
	font:1em/1.5;
	width:100%;
	font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	background:#e6e8eb;
}
img {
	max-width:100%;
}

.outer {
	margin:0 auto;
	background:#fff;
	max-width:60em;
	box-shadow:0 0 2em rgba(0,0,0,0.05);
}

header {
	background:#B62929;
	padding:1em;
	position:relative;
	z-index:10;
	margin:0 auto;
}
header img {
	max-width:50%;
	display:inline-block;
}

main {
	position:relative;
	overflow-x:hidden;
}
div.page {
	background:#fff;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:auto;
	height:0;
	transform:translateX(100%);
	transition:transform 400ms;
	position:static;
	overflow-y:auto;
	opacity:0;
}
div.page div.content {
	padding:0 1em;
	max-width:35em;
	margin:0 auto;
}
div.page.current { 
	transform:translateX(0);
	height:auto;
	opacity:1;
}
div.page.past {
	transform:translateX(-100%);
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:auto;
}
div.page.future {
	transform:translateX(100%);
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:auto;
}
#p1 { z-index:1; }
#p2 { z-index:2; }
#p3 { z-index:3; }
#p4 { z-index:4; }
h1 {
	font-size:1.5em;
	color:#ab1c26;
}
h2 {
	color:#ab1c26;
}
p {
	line-height:1.4;
}


.choice {
	list-style:none;
	margin:1em -0.25em;
	padding:0;
	display:flex;
	flex-wrap:wrap;
}
.choice .address { display:none; }
.choice li, .solo-bubble {
	flex:1 1 100%;
	box-shadow:0 0.2em 0.6em rgba(0,0,0,0.2);
	margin:0.25em;
	border-radius:0.33em;
	position:relative;
	padding:1em;
	box-sizing:border-box;
	border:2px solid #fff;
	background:#fff;
	transition:border 250ms, background 250ms;
}
.choice li { cursor:pointer; }
.solo-bubble {
	margin-bottom:0.5em;
}
.solo-bubble h2 {
	margin:0;
}
.choice li.selected {
	border:2px solid #0089e9;
	background:#d7edff;
}
.big-choice li {
	padding:0;
	flex:1 1 47%;
	height:3.5em;
}
.big-choice li span {
	text-align:center;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0;
	width:100%;
	padding:0 1em;
	box-sizing:border-box;
}
.choice li .subtle-headline {
	display:block;
	margin:0.5em 0 0;
	color:rgba(0,0,0,0.5);
	text-transform:uppercase;
	font-size:0.8em;
	font-weight:600;
}
button {
	background:#ab1c26;
	border:0;
	color:#fff;
	text-align:center;
	width:100%;
	padding:1em;
	border-radius:0.33em;
	box-shadow:0 0.2em 0.5em rgba(0,0,0,0.2);
}
button:disabled,
button[disabled]{
	opacity:0.4;
}
button.back {
	background:transparent;
	box-shadow:none;
	border:0.1em solid #ccc;
	color:#555;
}

#map {
	width:100%;
	height:60vw;
	max-height:12em;
	margin:1em 0;
	border:1px solid #ccc;
}
#date {
	margin:1em auto;
}
#date.hello-week .day {
	padding:0.5em;
}

.location {
	display:flex;
}
.location-phone { display:none; }
.location .pin {
	flex:0 0 auto;
	margin-right:1em;
}
.location .pin {
	max-width:2em;
}
.location .info {
	flex:1;
}
.hello-week * { box-sizing:border-box; }
.hello-week .day { padding:0.5em; }

.address {
	margin-top:0.5em;
	display:block;
}

.tabs {
	display:flex;
	border-radius:0.5em;
	background:#eee;
	overflow:hidden;
}
.tabs>div {
	flex:0 0 50%;
	box-sizing:border-box;
	border-radius:0;
	box-shadow:none;
	background:transparent;
	color:#555;
	text-align:center;
	padding:0.75em 1em;
	transition:background 250ms, color 250ms;
	cursor:pointer;
}
.tabs>div.selected {
	background:#ab1c26;
	color:#fff;
	box-shadow:inset 0 0.2em 0.3em rgba(0,0,0,0.5);
}
.tabs .price {
	font-size:1.6em;
}
.tabs .title {
	display:block;
}

.container { margin-left: auto; margin-right: auto; }
.row { position: relative; width: 100%; }
.row [class^="col"] { float: left; margin: 0.5rem 2%; min-height: 0.125rem; }
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { width: 96%; }
.col-1-sm { width: 4.33%; }
.col-2-sm { width: 12.66%; }
.col-3-sm { width: 21%; }
.col-4-sm { width: 29.33%; }
.col-5-sm { width: 37.66%; }
.col-6-sm { width: 46%; }
.col-7-sm { width: 54.33%; }
.col-8-sm { width: 62.66%; }
.col-9-sm { width: 71%; }
.col-10-sm { width: 79.33%; }
.col-11-sm { width: 87.66%; }
.col-12-sm { width: 96%; }
.row::after { content: ""; display: table; clear: both; }
.hidden-sm {
  display: none;
}
@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) { /* 960px */
  .container {
    max-width: 60rem;
  }
}

/* FORM STUFF */
label {
	display:block;
	margin-bottom:0.25em;
	color:#666;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
select {
	background:#fff;
	box-sizing:border-box;
	width:100%;
	border:1px solid #ccc;
	border-top-color:#bbb;
	box-shadow:inset 0 0.15em 0.04em rgba(0,0,0,0.06);
	padding:0.5em 0.5em;
	line-height:1.35;
}
select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background:#fff url(/img/arrow-down.png) center right no-repeat;
	background-size:1em;
	background-position:95% 50%;
}
form {
	margin:1em 0;
}
form button {
	margin-top:1em;
}

input.error, select.error {
	border:1px solid #c00;
	background:#fee;
}
p.error {
	border:1px solid #c00;
	background:#fee;
	color:#c00;
	padding:0.5em 0.7em;
}

.form-status {
	display:flex;
	justify-content:center;
	align-items:center;
	margin:1em 0;
}
.form-status div {
	margin:0 0.5em;
}
.spin {
	display:block;
	width: 1.5em;
	height: 1.5em;
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

h3.middle {
	text-align:center;
	font-size:1.2em;
	font-weight:400;
	color:#333;
}
h3.middle span {
	color:#000;
	font-weight:600;
	font-style:italic;
}

footer {
	background:#f3f4f3;
	border-top:1px solid rgba(0,0,0,0.1);
	padding:2em;
	text-align:center;
}
footer p {
	margin:0; 
}
footer .small {
	margin-top:1em;
	font-size:0.8em;
	color:#999;
}
footer a {
	color:inherit;
}
footer ul {
	list-style:none;
	margin:0;
	padding:0;
}
footer ul li {
	display:inline;
	margin:0 1em;
}

.intro {
	padding:2em 1em;
	padding-bottom:40vw;
	text-align:center;
	background:#c4dde9 url(/img/glendale.jpg) center bottom no-repeat;
	background-size:contain;
}
@media screen and (min-width:60em){
	.intro {
		padding-bottom:23em;
	}
}
.intro h1 { color:#002C4F; }

.doctor-quote {
	background:#f8f8f8 url(/img/waiting-room.png) center center no-repeat;
	background-size:cover;
	max-width:100%;
	position:relative;
	padding:1.5em 1em;
}
.doctor-quote img {
	position:absolute;
	max-width:8em;
	bottom:0;
	right:1em;
}
.doctor-quote h2 {
	max-width:26rem;
}
.doctor-quote h2::after {
	font-size:1rem;
	content:'';
	display:block;
	width:6em;
	height:15em;
	float:right;
}
@media screen and (min-width:32em){
	.doctor-quote img {
		right:50%;
		margin-right:-18em;
		max-width:12em;
	}
	.doctor-quote h2::after {
		width:5em;
	}
}
.sig .name {
	font-weight:600;
}
.sig .title {
	display:block;
	opacity:0.8;
	font-size:0.9em;
}

.locations {
	padding: 1em 0;
}
.locations h2 {
	text-align:center;
	clear:both;
	margin-top:0;
}
.locations-list {
	border:1px solid #aaa;
	border-radius:0.5em;
}
.locations-list .location {
	border-bottom:1px solid #aaa;
	padding:1em;
	line-height:1.2;
}
.locations-list .location:last-child {
	border-bottom:0;
}
.location h3 {
	color:#B62929;
	margin:0 0 0.3rem;
	font-size:1.5em;
	line-height:1.2rem;
}
.location .address {
	margin:0;
	color:#555;
	font-size:0.9em;
}
.location .reviews {
	margin-top:0.5em;
}
.location .reviews a {
	text-decoration:none;
	color:inherit;
}
.location .reviews a:hover {
	text-decoration:underline;
}
.location .reviews p {
	margin:0;
	line-height:1.2;
}
.reviews .stars {
	color:#666;
}
.stars img {
	max-height:1em;
	margin-top:1px;
	vertical-align:top;
}


.starter {
	padding:1em;
	background:#F0F2F2;
}
.starter label {
	margin-bottom:0.5em;
}
label .label {
	display:block;
	margin-bottom:0.25em;
}
@media screen and (min-width:35em){
	.starter .row {
		display:flex;
		justify-content:space-between;
	}
	.starter .row label {
		flex:0 1 50%;
	}
	.starter .row label:first-child {
		margin-right:1em;
	}
}

.picker {
	padding:0 0 2em;
}
.appointment-date {
	white-space:nowrap;
}

.pending {
	padding:0 0 1em;
}
.final {
	padding:1em 0 2em;
}

.appointment-datetime {
	margin:0 0 0.5em;
	font-size:1.2em;
}
.appointment-datetime>span {
	display:inline-block;
}
.appointment-datetime .date {
	margin-right:0.5em;
	color:#333;
}
.appointment-datetime .time {
	font-weight:600;
}
.appointment-datetime .time span { font-weight:300; color:#aaa; }

.payment-phone {
	display:none;
}
.fyi {
	margin:1.5em 0;
}

@media screen and (min-width:42em){
	.locations-container {
		display:flex;
		align-items:stretch;
		justify-content:center;
		margin-bottom:1em;
		flex-direction:row-reverse;
	}
	.page .locations div.content {
		max-width:100%;
	}
	#map {
		margin:0;
		max-height:none;
		height:auto;
		flex:0 1 50%;
		margin-left:1em;
	}
	.picker, .pending {
		padding:1em 0 3em;
	}
}
@media screen and (min-width:550px){
	.intro {
	    background-size: 100%;
	    background-position: 50% 5em;
		padding-bottom: 15em;
	}
}
@media screen and (min-width:750px){
	.intro {
	    background-position: 50% 4vw;
	}
}
@media screen and (min-width:900px){
	.intro {
	    background-position: 50% -1em;
	}
}