@font-face {
	font-family: "CitrusGothic";
	src: url("/fonts/CitrusGothic-Regular.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

body, button, input, select, optgroup, textarea {
	font-size: calc(12px + .65vw); color: #444; font-family: 'Open Sans', sans-serif; line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { font-family: 'CitrusGothic', sans-serif; clear: both; }
h1 { font-size: calc(18px + 2.0vw); }
h2 { font-size: calc(16px + 1.5vw); }
h3 { font-size: calc(14px + 1.0vw); }

p { margin-bottom: 1.5em; }
dfn, cite, em, i { font-style: italic; }
blockquote { margin: 0 1.5em; }
address { margin: 0 0 1.5em; }
pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; }
code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
abbr, acronym { border-bottom: 0px none; text-decoration: none !important; cursor: help; }
mark, ins { background: #fff9c0; text-decoration: none; }
big { font-size: 125%; }
hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; }

ul, ol { margin: 0 0 1.5em 3em; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul,
li > ol { margin-bottom: 0; margin-left: 1.5em; }

dt { font-weight: 700; }
dd { margin: 0 1.5em 1.5em; }

/* Make sure embeds and iframes fit their containers. */
embed, iframe, object {max-width: 100%;}

img { height: auto; max-width: 100%; }
figure { margin: 1em 0; }
table { margin: 0 0 1.5em; width: 100%; }

/* Links --------------------------------------------- */
a { color: inherit; }
a:visited { color: inherit; }
a:focus { color: inherit; }
a:hover { color: inherit; outline: 0; }
a:active { color: inherit; outline: 0; }
a:focus { outline: thin dotted; }


/* Form --------------------------------------------- */
input[type="radio"] {background-color: blue; color: red;}


button,
input[type="button"],
input[type="reset"],
input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); line-height: 1; padding: 0.6em 1em 0.4em; cursor: pointer; }

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover { border-color: #ccc #bbb #aaa; }

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus { border-color: #aaa #bbb #bbb; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus { color: #111; }

select { border: 1px solid #ccc; }
textarea { width: 100%; }
/* sup {font-size: 75%; vertical-align: super;} */
strong {font-weight: bold;}

body {color: #fff; background-color: #1c81c1; background-image: url(/img/sunburst12.png); background-repeat: no-repeat; background-size: 100% auto; background-position: bottom center;}
header, main, footer {position: relative;}
header {z-index: 1;}
main {z-index: 100;}
footer {z-index: 200;}

header #wonderhell-main-sign {text-align: center; padding-top: 2%;}
header #wonderhell-main-sign h1 {max-width: 1000px; margin-left: auto; margin-right: auto;}
header #wonderhell-main-sign img {display: block;}
header #wonderhell-side-sign {padding-top: 2%; max-width: calc(1000px + 15%); margin-left: auto; margin-right: auto; padding-bottom: 6%;}
header #wonderhell-side-sign img {width: 30%;}

main {padding: 5%; padding-top: 0; margin-top: -9%;}
#mainwrap {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 5%;
	background-color: #1c81c1;
	box-shadow: 0px 0px 26px 2px rgba(0,0,0,0.65);
	-webkit-box-shadow: 0px 0px 26px 2px rgba(0,0,0,0.65);
	-moz-box-shadow: 0px 0px 26px 2px rgba(0,0,0,0.65);
}

section {margin-top: 2em;}
fieldset {margin-top: 1em;}
#intro h2 {margin-bottom: 0.75em;}
h2.formhead {padding: 2%; background-color: #f26522; margin-left: -50%; padding-left: 50%;}
h2 span {display: block;}
h2 span.location {color: #fff200;}
h2 span.byline {font-family: 'Open Sans', sans-serif; font-size: calc(14px + 1.0vw);}
legend { font-weight: bold; }
.answer-wrap { display: inline-block; margin-left: 1.0vw; text-align: center;}
.answer-wrap input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: calc(20px + 1vw);
  height: calc(20px + 1vw);

  border: 6px solid #fff200;
  background-color: #1c81c1;
  transition: 0.2s all linear;

  position: relative;
  top: 4px;
  cursor: pointer;
}
.answer-wrap input:checked {
  border: 4px solid #fff200;
  background-color: #ff0000;
  outline: unset !important;
}

.answer-wrap label { display: block; font-size: 80%;}
fieldset.town-questions {}
fieldset.town-questions > legend {color: #ccc; font-size:80%;}
fieldset.town-questions fieldset.qanda {}
fieldset.town-questions fieldset.qanda legend {float: left; width: 58%;}
fieldset.town-questions fieldset.qanda .answer-set {text-align: right; width: 42%; display: inline-block;}


#submit-row {padding: 5%; text-align: center;}

h1.ride-sign {width: 60%; margin-left: auto; margin-right: auto; margin-top: -22%;}

footer {padding-top: 5%; padding-bottom: 5%; text-align: center;}
#social-links a {
	font-size: 1.4em;
	text-decoration: none;
    display: block;
    padding: 3px;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 1.4em;
    height: 1.4em;
    text-align: center;
    background-color: #434343;
}
#site-links {font-size: calc(12px + 0.75vw);}
#site-links a {text-decoration: none;}
#site-links a:hover, #site-links a:focus {text-decoration: underline;}
#social-links a:hover, #social-links a:focus {background-color: #000;}
#social-links ul {list-style-type: none; padding-top: 0.5em; margin: 0;}
#social-links li {display: inline-block; padding: 0; padding-left: 0.5em; padding-bottom: 0.5em; margin: 0;}

#next-ride {margin-bottom: 2em; text-align: center;}
.finger {width: 40%; display: inline-block;}
#youarein {
	padding: 5%; 
	box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.75) inset;
	-webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.75) inset;
	-moz-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.75) inset;
}
#youarein-int {padding: 5%; background-color: rgba(255,255,255,0.9); color: #333; border: 1px solid #333;}
#map-of-wonderhell {border: 1px solid #999; margin-bottom: 1.5em;}
#map-of-wonderhell figure {margin: 0;}
#map-of-wonderhell figure img {display: block;}
#map-of-wonderhell figcaption {padding: 5%; background-color: #ffff00; color: #000; border-bottom: 1px solid #999;}
#map-overlays {position: relative;}
#bgmap {position: relative; z-index: 100;}
.map-overlay {position: absolute; top: 0; left: 0;}
#overlay1 { z-index: 101;}
#overlay2 { z-index: 102;}
#overlay3 { z-index: 103;}

/* utilities */
.uc {text-transform: uppercase;}

@media (max-width: 690px){
fieldset.town-questions fieldset.qanda legend {float: none; width: 100%;}
fieldset.town-questions fieldset.qanda .answer-set {text-align: center; width: 100%; display: block; margin-top: 0.5em;}
fieldset.town-questions fieldset.qanda .answer-wrap {margin-left: 0.5vw; margin-right: 0.5vw;}
}