/* Layout elements */

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Open Sans', Helvetica, "Helvetica Neue", Arial, sans-serif;
    color: #454545;
    font-size: 18px;
    font-weight: 400;
    height: 100%;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    background: #fff;
    margin: 0;
    padding: 0;
}

header {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 81px;
}
header a {
    position: absolute;
    padding: 0;
    left: 0;
    top: 0;
    width: 15%;
}
header img, header object {
    width: 100%;
}
header h1 {
    position: absolute;
    left: 17.5%;
    top: 0;
    height: 81px;
    font-size: 2.5em;
    padding: 0.25em 0.25em 0.25em 1em;
}

/* Navigation */

nav {
    display: block;
    width: 100%;
    background: #fa9d24;
    background: -moz-linear-gradient(-45deg, #fa9d24 0%, #fa9d24 70%, #fdbb30 70%, #fdbb30 100%);
    background: -webkit-linear-gradient(-45deg, #fa9d24 0%, #fa9d24 70%, #fdbb30 70%, #fdbb30 100%);
    background: linear-gradient(135deg, #fa9d24 0%, #fa9d24 70%, #fdbb30 70%, #fdbb30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9d24', endColorstr='#fdbb30',GradientType=1 );
    float: left;
    font-weight: 700;
}

nav ul {
    list-style-type: none;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 0 0 210px;
}

nav li {
    display: block;
    float: left;
}

nav li a {
    padding: 1em 2em;
    color: #fff;
    text-decoration: none;
    display: block;
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    transition: background 0.5s;
}

nav li a:hover {
    color: #fff;
    background: #550000;
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    transition: background 0.5s;
}

#page-content {
    clear: both;
    padding: 2em;
    max-width: 1200px;
    margin: 0 auto;
}

footer, div.sf-toolbar-clearer, html {
    background: #550000;
}
footer {
    padding: 2em 2em 5em 2em;
    color: #fff;
    clear: both;
    text-align: center;
    font-style: normal;
    clear: both;
    font-size: 0.8em;
}

/* Text elements */

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

h1 {
    font-weight: 700;
    font-size: 2em;
    padding: 0 0 0.5em;
    margin: 0;
    border-bottom: solid 12px #fedd60;
}

h2 {
    font-weight: 700;
    font-size: 1.75em;
    padding: 0 0 0.5em;
    margin: 0;
    border-bottom: solid 6px #fedd60;
}

h3 {
    font-weight: 700;
    font-size: 1.5em;
    padding: 0 0 0.5em;
    margin: 0;
    border-bottom: solid 3px #fedd60;
}

h4 {
    font-weight: 700;
    font-size: 1.25em;
    padding: 0 0 0.5em;
    margin: 0;
    border-bottom: solid 3px #fedd60;
}

h5 {
    font-weight: 700;
    font-size: 1.175em;
    padding: 0 0 0.5em;
    margin: 0;
    border-bottom: solid 3px #fedd60;
}

h6 {
    font-weight: 700;
    font-size: 1.0875em;
    padding: 0 0 0.5em;
    margin: 0;
    border-bottom: solid 3px #fedd60;
}

section h1, section h2, section h3, section h4, section h5, section h6 {
    display: inline-block;
    margin: 0.5em -0.5em 0.5em -2em;
    padding: 0.2em 0.5em 0.2em 2em;
}

p, summary {
    padding: 0 0 0.5em;
    margin: 0;
    line-height: 1.5em;
}

summary {
    font-weight: bold;
}

p.help-text {
    line-height: inherit;
    margin-top: 0.35em;
    color: #888;
    padding: 0 0.35em;
}

a {
    color: #550000;
    text-decoration: underline;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}

a:hover {
    color: #fa9d24;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}

footer a {
    color: #fa9d24;
    text-decoration: none;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}

footer a:hover {
    color: #fdbb30;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}

/* Forms */

form {
    width: 100%;
}

form div {
    padding: 0.5em 0.5em 0.5em 0;
    max-width: 36em;
}
form div.stack {
    padding: 0;
    max-width: inherit;
}
form div.stack > div {
    width: 100%;
    max-width: 18em;
    display: inline-block;
}

label {
    display: block;
}
input[type='radio'] + label, input[type='checkbox'] + label {
    display: inline;
    margin-right: 2em;
}

input, textarea {
    padding: 0.5em;
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 1px solid #999;
    background: #fbfbfb;
    font-family: 'Open Sans', Helvetica, "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
}
textarea {
    height: 5em;
    resize: vertical;
}
p.placeholder {
    padding: 0.5em;
    font-weight: bold;
    font-family: 'Open Sans', Helvetica, "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
}

input[type='checkbox'] {
    border: none;
}

input[type='text'], form input[type='email'], form input[type='password'], textarea {
    width: 100%;
}
form div.stack input {
    max-width: 17.5em;
}

input::placeholder, textarea::placeholder {
    opacity: 1;
    color: #bbb;
}

#wrapper button {
    padding: 0.5em 4em;
    background: #fa9d24;
    background: -moz-linear-gradient(-45deg, #fa9d24 0%, #fa9d24 70%, #fdbb30 70%, #fdbb30 100%);
    background: -webkit-linear-gradient(-45deg, #fa9d24 0%, #fa9d24 70%, #fdbb30 70%, #fdbb30 100%);
    background: linear-gradient(135deg, #fa9d24 0%, #fa9d24 70%, #fdbb30 70%, #fdbb30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9d24', endColorstr='#fdbb30',GradientType=1 );
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    transition: background 0.5s;
    border: none;
    margin: 1em 0;
    font-size: 1em;
    color: #fff;
    font-weight: 700;
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    cursor: pointer;
    width: 17em;
}

#wrapper button:hover {
    background: #550000;
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    transition: background 0.5s;
}
#wrapper button:disabled, button:disabled:hover {
    background: #aaa;
    cursor: not-allowed;
}

input.icon {
    padding-left: 2em;
}
.input-icon {
    float: left;
    margin-left: 0.5em;
    margin-top: -1.7em;
    position: relative;
    z-index: 2;
}

form .submit, form .submit div {
    float: none;
    clear: both;
}

.error {
    color: #cc0000;
}
.notice {
    color: #1b6d85;
}

#page-content ul {
    list-style-type: none;
}
#page-content ul li {
    margin: 0.5em 0;
    background-image: url(/build/images/logo.c039b2b5.svg);
    background-repeat: no-repeat;
    background-size: 2.5em auto;
    padding-left: 3.5em;
    min-height: 2em;
}
#page-content form ul {
    padding: 0;
}
#page-content form ul li {
    background-image: none;
    padding: 0;
    min-height: auto;
    color: #cc0000;
    font-weight: bold;
}
#page-content form ul ~ input {
    border-color: #cc0000;
    box-shadow: 0 0 2px 1px #cc0000;
}
ol ol li {
    list-style-type: lower-roman;
}

small {
    font-size: 0.85em;
}

table {
    width: 100%;
    border-collapse: collapse;
}
thead th {
    text-align: left;
    border-bottom: 1px solid #000;
}
thead + tbody tr:first-child td {
    padding-top: 0.75em;
}
tbody th {
    text-align: right;
    padding-right: 1em;
}
td, th {
    vertical-align: top;
    padding: 0.25em;
}
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th {
    background-color: #eee;
}

ul.org {
    column-count: 2;
    column-gap: 1em;
}
ul.org li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
#page-content ul.org li:first-child {
    margin-top: 0;
}
#prizes-right-side img {
    max-width: 100% !important;
}
form div.ticket, form div.tickets {
    padding: 0;
    max-width: none;
}
.ticket .remove {
    position: absolute;
    margin-left: -2em;
}

/* Media Queries */

@media all and (max-width: 1200px) {
    html {
        font-size: 1.5vw;
    }
    header, header h1 {
        height: 6.75vw;
    }
    nav ul {
        padding: 0 0 0 17.5%;
    }
    h1 { border-bottom-width: 1vw;  }
    h2 { border-bottom-width: 0.5vw; }
    h3, h4, h5, h6 { border-bottom-width: 0.25vw; }
    .ticket .remove { margin-left: -1.5em; }
}
@media all and (max-width: 800px) {
    html {
        font-size: 12px;
    }
    header a {
        width: 120px;
    }
    header h1 {
        left: 140px;
    }
    header, header h1 {
        height: 54px;
    }
    nav ul {
        padding: 0 0 0 140px;
    }
    h1 { border-bottom-width: 8px;  }
    h2 { border-bottom-width: 4px; }
    h3, h4, h5, h6 { border-bottom-width: 2px; }
}
@media all and (max-width: 818px) { header object, header img { transform: translate(-1px, 1px) rotate(4.5deg); }  }
@media all and (max-width: 817px) { header object, header img { transform: translate(-1px, 2px) rotate(9deg); }    }
@media all and (max-width: 816px) { header object, header img { transform: translate(-2px, 3px) rotate(18deg); }   }
@media all and (max-width: 815px) { header object, header img { transform: translate(-2px, 4px) rotate(22.5deg); } }
@media all and (max-width: 814px) { header object, header img { transform: translate(-3px, 5px) rotate(27deg); }   }
@media all and (max-width: 813px) { header object, header img { transform: translate(-3px, 6px) rotate(31.5deg); } }
@media all and (max-width: 812px) { header object, header img { transform: translate(-4px, 7px) rotate(36deg); }   }
@media all and (max-width: 811px) { header object, header img { transform: translate(-4px, 8px) rotate(40.5deg); } header h1 { left: 140px; } nav ul { padding-left: 140px; } }
@media all and (max-width: 810px) { header object, header img { transform: translate(-5px, 9px) rotate(45deg); }   header h1 { left: 136px; } nav ul { padding-left: 136px; } }
@media all and (max-width: 809px) { header object, header img { transform: translate(-5px, 10px) rotate(49.5deg); } header h1 { left: 132px; } nav ul { padding-left: 132px; } }
@media all and (max-width: 808px) { header object, header img { transform: translate(-6px, 11px) rotate(54deg); }   header h1 { left: 128px; } nav ul { padding-left: 128px; } }
@media all and (max-width: 807px) { header object, header img { transform: translate(-6px, 12px) rotate(58.5deg); } header h1 { left: 124px; } nav ul { padding-left: 124px; } }
@media all and (max-width: 806px) { header object, header img { transform: translate(-7px, 13px) rotate(63deg); }   header h1 { left: 120px; } nav ul { padding-left: 120px; } }
@media all and (max-width: 805px) { header object, header img { transform: translate(-7px, 14px) rotate(67.5deg); } header h1 { left: 116px; } nav ul { padding-left: 116px; } }
@media all and (max-width: 804px) { header object, header img { transform: translate(-8px, 15px) rotate(72deg); }   header h1 { left: 112px; } nav ul { padding-left: 112px; }  }
@media all and (max-width: 803px) { header object, header img { transform: translate(-8px, 15px) rotate(76.5deg); } header h1 { left: 108px; } nav ul { padding-left: 108px; }  }
@media all and (max-width: 802px) { header object, header img { transform: translate(-9px, 15px) rotate(81deg); }   header h1 { left: 104px; } nav ul { padding-left: 104px; }  }
@media all and (max-width: 801px) { header object, header img { transform: translate(-9px, 15px) rotate(85.5deg); } header h1 { left: 100px; } nav ul { padding-left: 100px; }  }
@media all and (max-width: 800px) { header object, header img { transform: translate(-10px, 15px) rotate(90deg); } header h1 { left: 96px; }  nav ul { padding-left: 96px; }  }
@media all and (min-width: 769px) {#prizes-left-side, #prizes-right-side {display: block; float: left; width: 58%;} #prizes-left-side {margin-right: 2%;} #prizes-right-side {width: 40%;}}
@media all and (max-width: 360px) {
    header h1 {
        font-size: 2em;
        line-height: 54px;
    }
    nav li a {
        padding: 1em;
    }
    #page-content {
        padding: 1em;
    }
    footer {
        text-align: left;
    }
    footer {
        padding: 1.25em 1.25em 0;
    }
    .ticket .remove {
        position: inherit;
        margin-left: 0;
    }
}
@media all and (max-width: 320px) {
    header h1 {
        font-size: 1.5em;
        border: none;
    }
}
@media all and (max-width: 270px) {
    header h1 {
        font-size: 1em;
        line-height: inherit;
    }
}