body { background: #fff url(images/gray-back.jpg) bottom center no-repeat; background-size: cover; color: #fff;  font-family: 'Exo', Arial, Helvetica, sans-serif; font-size: 130%; text-shadow: 1px 1px 1px #000; }
#container { padding-top: 3em; margin-bottom: 3em; height: 100vh; }

hr { color: #000; background-color: #000; height: 1px; }

#leftcol { float: left; width: 43%; padding-left: 2%; text-align: left; }
#rightcol { float: right; padding-left: 2%; padding-right: 2%; width: 50%; }

#leftcol img { width: 96%; }
#rightcol a.fancybox img { width: 40%; border: 1px solid #333; }
#rightcol a.fancybox img:hover { border: 1px solid #ccc; }
#rightcol a.fancybox.large img { width: 81%; }

#maincol { width: 80%; margin: auto; }
#maincol img#logo { width: 100%; max-width: 725px; }

h1 { font-family: 'Orbitron', sans-serif; font-size: 3.1vw; text-shadow: 1px 1px 1px #000; text-align: center; }
h2 { border-bottom: 1px dotted #fff; }
h3 { font-size: 1.1em; word-break: break-word; }

#maincol form { width: 90%; max-width: 700px; margin: auto; padding: 1em; background: rgba(0,0,0,.5); }
form div { display: block; padding: .3em; }
form input[type=text] { width: 100%; max-width: 400px; }
form input.smallbox { width: 20%; max-width: 40px; }
button { min-height: 26px; font-size: 120%; padding: .3em; margin-top: 1em; }

#cclogos { display: block; margin: .5em 0; width: 90%; max-width: 600px; }

.specialMessage { font-weight: bold; padding: 6px; border: 1px dashed #666; color: #c95e5e; }
.payment-errors { font-weight: bold; color: #c95e5e; }

select option { font-size: 130%; }

.tiny { font-size: 80%; }

li { margin-left: 14%; }

.text { border-radius: 10px; background: rgba(0,0,0,0.5); border: 3px solid #333; padding: 1em; margin-bottom: .5em; }

#gallery { float: left; width: 8%; min-width: 100px; margin: .7em .6em 0 0; }
#gallery img { width: 100%; border: 1px solid #333; }
#gallery a:hover img { border: 1px solid #ccc; }

a {color: #eee; }
a img { border: 0; }


a.button { font-size: 1.2em; border-radius: 5px; padding: .6em 1em; border: 1px solid #ccc; background-color: rgba(0,0,0,.5); text-transform: uppercase; text-decoration: none; }
a.button.large { font-size: 2em; max-width: 500px; }
a.button:hover { background-color: rgba(255,255,255,.1); }


@media (max-width: 800px) {
   #maincol { width: 95%; }
}
@media (max-width: 1000px) {
    form { font-size: 80%; }
}
@media (max-width: 800px) {
    #leftcol { float: none; width: 95%; padding-left: 0; margin: auto; }
    #rightcol { float: none; width: 95%; padding-left: 0; padding-right: 0; margin: auto; }
}
@media (max-width: 600px) {
    h1 { font-size: 1.2em; }
    a.button { font-size: .85em; }
}
@media (max-width: 500px) {
    a.button.large { font-size: 1em; }
    a.button { font-size: .60em; }
}