/* ==========================================================================
   Fonts
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* ==========================================================================
   Typography
   ========================================================================== */

html, body { margin: 0; font-size: 15px; line-height: 155%; }

body { margin: 0; text-align: center; max-width: 100%; overflow-x: hidden; }

body, p, ul, ol, td, th, form, input, textarea, select, button { font-family: 'Rubik', sans-serif; font-weight: 500; }

p, ul, ol, form { margin: 0.8em 0 0 0; }
p strong, ul strong, ol strong, td strong, th strong, p.bold, ul.bold, ol.bold, td.bold, th.bold, .error, .page_article table th { font-weight: 700; }
p em, ul em, ol em, td em, th em { font-style: italic; }

h1, h2, h3, .h1style, .h2style, .h3style { font-family: 'Rubik', sans-serif; font-weight: 600; margin-bottom: 0; margin-top: 0.8em; }
h4, h5, h6, .h4style, .h5style, .h6style { font-family: 'Rubik', sans-serif; font-weight: 600; margin-bottom: 0; margin-top: 0.8em; }
h1 strong, h2 strong, h3 strong, .h1style strong, .h2style strong, .h3style strong, h1.bold, h2.bold, h3.bold, .h1style.bold, .h2style.bold, .h3style.bold { font-weight: 800; }
h4 strong, h5 strong, h6 strong, .h4style strong, .h5style strong, .h6style strong, h4.bold, h5.bold, h6.bold, .h4style.bold, .h5style.bold, .h6style.bold { font-weight: 800; }

.medium { font-weight: 600; }

h1, .h1style { font-size: 2.40em; line-height: 125%; }
h2, .h2style { font-size: 2.20em; line-height: 130%; }
h3, .h3style { font-size: 2.00em; line-height: 135%; }
h4, .h4style { font-size: 1.80em; line-height: 126%; }
h5, .h5style { font-size: 1.60em; line-height: 128%; }
h6, .h6style { font-size: 1.40em; line-height: 130%; }
@media (min-width: 768px) {
    h1, .h1style { font-size: 3.00em; }
	h2, .h2style { font-size: 2.70em; }
	h3, .h3style { font-size: 2.40em; }
	h4, .h4style { font-size: 2.10em; }
	h5, .h5style { font-size: 1.80em; }
	h6, .h6style { font-size: 1.50em; }
}

h1.ntm, .h1style.ntm { margin-top: 0.15em; }
h2.ntm, .h2style.ntm { margin-top: 0.13em; }
h3.ntm, .h3style.ntm { margin-top: 0.11em; }
h4.ntm, .h4style.ntm { margin-top: 0.09em; }
h5.ntm, .h5style.ntm { margin-top: 0.07em; }
h6.ntm, .h6style.ntm { margin-top: 0.05em; }

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1230px; }
}

/* ==========================================================================
   Basics
   ========================================================================== */

hr { border-color: #999; border-width: 2px; margin: 1.4em 0 1.0em 0; }

a { color: #66be6e; outline: 0; }
a:hover { color: #008641; text-decoration: none; }

a.boxbutton, button.boxbutton, .boxbutton { text-decoration: none; display: inline-block; color: #FFF; border: 0; border-radius: 35px; background-color: #3c2578; font-size: 0.95em; line-height: 120%; text-transform: uppercase; padding: 1em 3em; }
a.boxbutton.bigger, button.boxbutton.bigger, .boxbutton.bigger { padding: 0.6em 2em; }
a.boxbutton:hover, button.boxbutton:hover { text-decoration: none; color: #FFF; background-color: #3d2678; }
a.boxbutton.clear, button.boxbutton.clear { color: #FFF; background-color: transparent; }
a.boxbutton.clear:hover, button.boxbutton.clear:hover { color: #fd891a; background-color: transparent; }

a.dot.green { display: inline-block; color: #95c11e; border: 1px solid #95c11e; border-radius: 100%; padding: 0.2em; font-size: 22px; line-height: 127%; }
a.dot.green:hover { color: #3b445c; border-color: #3b445c; }
a.dot.green.reverse:hover { color: #FFF; border-color: #FFF; }

a.ticket { text-decoration: none; display: inline-block; color: #FFF; border: 0; font-size: 0.85em; letter-spacing: 0.05em; line-height: 100%; font-weight: normal; text-transform: uppercase; padding: 1em 2em; }
a.ticket.big { padding: 1.1em 1.9em; font-size: 1.3em; }
a.ticket:hover { color: #008641; }
a.ticket.yellow { color: #008641; background: transparent url('../img/main/ticket_yellow.png') no-repeat center center; background-size: contain; }
a.ticket.yellow.big { background-image: url('../img/main/ticket_yellow_left.png'); }
a.ticket.yellow:hover { color: #FFF; background-image: url('../img/main/ticket_green.png'); }
a.ticket.yellow.big:hover { color: #FFF; background-image: url('../img/main/ticket_orange_left.png'); }
a.ticket.clear { vertical-align: top; margin-top: 0.5em; }
a.ticket strong.rotate { display: inline-block; transform: rotate(4deg); font-weight: 800 !important; }
a.ticket.big strong.rotate { transform: rotate(-4deg); }

.bigger { font-size: 1.3em !important; line-height: 145% !important; }
.larger { font-size: 1.3em !important; line-height: 145% !important; }
.smallish { font-size: 0.95em !important; line-height: 155% !important; }
.small { font-size: 0.9em !important; line-height: 140% !important; }
.tiny { font-size: 0.85em !important; line-height: 135% !important; }
.uppercase { text-transform: uppercase; }
.spaced { letter-spacing: 0.07em; }

@media (min-width: 768px) {
    .alright-md { text-align: right; }
}

/* ==========================================================================
   Colours
   ========================================================================== */

body { color: #000; }

.grey { color: #999 !important; }
.orange { color: #F97; }
.purple { color: #5e2482; }
.reverse { color: #FFF; }
.red { color: #ff4d25; }

.bg_lgrey { background-color: #F4F4F4 !important; }
.bg_pink { background-color: #ef649f !important; }

/* ==========================================================================
   Header
   ========================================================================== */

html {
    scroll-padding-top: 86px;
}

header { position: fixed; z-index: 2; width: 100%; }
header #header_contents { padding-top: 20px; padding-bottom: 20px; position: relative; z-index: 1; }
header #header_bg { position: absolute; top: 0; left: 0; width: 100%; height: 97px; background-color: #333; opacity: 0; }
header #topnav { margin-right: 0.9em; font-family: 'Rubik', sans-serif; font-weight: 800; }
@media (min-width: 576px) {
    header #topnav { margin-right: 0; }
}

header .hashtag { display: none; }
header .dotnav { display: none; margin-top: -0.5em; margin-left: -0.3em; margin-right: -0.3em; list-style: none; list-style-type: none; padding-left: 0; }
header .dotnav li { display: inline-block; margin-left: 0.3em; margin-right: 0.3em; }
header .dotnav li, header .dotnav li a, header .dotnav li a img { width: 35px; }
@media (min-width: 576px) {
    header .dotnav { display: inline-block; }
}
@media (min-width: 768px) {
    header .hashtag { display: inline-block; width: 151px; margin-right: 15px; }
    header .dotnav li, header .dotnav li a, header .dotnav li a img { width: 35px; }
}

#banner { background: #ffaa01 url('../img/main/banner2026_1.png') no-repeat center bottom; background-size: auto 100%; height: 75vw; }
@media (min-width: 576px) {
    #banner { height: 72vw; background-size: auto 108%;}
}
@media (min-width: 768px) {
    #banner { height: 68vw; background-size: auto 115%; }
}
@media (min-width: 992px) {
    #banner { height: 630px; background-size: auto 120%; }
}
@media (min-width: 1200px) {
    #banner { height: 700px; background-size: auto 123%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer { background-color: #333; text-align: center; }
footer p { font-size: 0.8em; line-height: 145%; }
footer p a { color: #FFF; }
footer p a:hover { color: #F97; }

footer .hashtag { display: inline-block; width: 250px; margin-top: 1.5em; } 
footer .dotnav { margin-top: 0.6em; margin-left: -0.3em; margin-right: -0.3em; list-style: none; list-style-type: none; padding-left: 0; }
footer .dotnav li { display: inline-block; margin-left: 0.3em; margin-right: 0.3em; }
.dotnav li, footer .dotnav li a, footer .dotnav li a img { width: 50px; }
@media (min-width: 768px) {
    footer { text-align: left; }
    footer .hashtag { display: none; }
    footer .dotnav { margin: -0.2em 0; }
    footer .dotnav li, footer .dotnav li a, footer .dotnav li a img { width: 40px; }
}

/* ==========================================================================
   Content
   ========================================================================== */

#intro { background: #008641 url('../img/main/bg_2026_1.jpg') no-repeat left bottom; background-size: auto 40vw; position: relative; }
#intro_extra { background: transparent url('../img/main/bg_2026_2.jpg') no-repeat right bottom; background-size: auto 65vw; }
#date { width: 200px; }
#book { margin-top: 2em; margin-bottom: 2.5em; z-index: 1; }
#binks { margin-bottom: 38vw; }
#binks img { max-width: 180px; }
#birthday { max-height: 90px; margin: -1em 0 -0.4em 18em; }
#stats { position: relative; background: #ff4d25 url('../img/main/stats_bg_2026.png') no-repeat center bottom; background-repeat: no-repeat; background-size: auto 90px; }
#stats_extra { background: transparent url('../img/main/love.png') no-repeat 90% 80%; background-repeat: no-repeat; background-size: auto 60px; padding-top: 3em; padding-bottom: 6em; }
.stats_figure { font-size: 4em; line-height: 110%; }
.stars { height: 9px; background: transparent url('../img/main/stars_2026.png') no-repeat center center; background-size: contain; }
#book_montage { margin-top: 2em; margin-bottom: 1.5em; }
@media (min-width: 576px) {
    #intro_extra { background-size: auto 60vw; }
    .stars { height: 10px; }
    .stats_figure { font-size: 5em; }
}
@media (min-width: 768px) {
    #binks { margin-top: 3em; }
    #book { position: absolute; bottom: 12vw; left: 24%; }
    #book_montage { margin-left: -40px; }
    #stats_extra { background-position: 86% 17%; background-size: auto 65px; }
    .stats_figure { font-size: 6em; }
}
@media (min-width: 992px) {
    #intro { background-size: auto 38vw; }
    #intro_extra { background-size: auto 45vw; }
    #binks { margin-top: 7em; margin-bottom: 4em; }
    #binks img { max-width: 170px; }
    #book { bottom: 25%; left: 20%; }
    #book_montage { margin-right: 20px; }
    #stats_extra { padding-top: 5em; padding-bottom: 6em; background-position: 80% 23%; background-size: auto 85px; }
    .stats_figure { font-size: 7em; }
}
@media (min-width: 1200px) {
    #intro { background-size: auto 450px; }
    #intro_extra { background-size: auto 500px; }
    #book_montage { margin-right: 30px; }
    .stats_figure { font-size: 8em; }
}

#sponsors img { max-height: 40px; display: inline-block; margin: 0.8em 0; max-width: auto; width: auto; height: auto; }
#partners img { max-height: 90px; display: inline-block; margin: 0.5em 0; max-width: auto; width: auto; height: auto; }
#previous img { max-height: 65px; display: inline-block; margin: 0.6em 0; max-width: auto; width: auto; height: auto; }
#charity img { max-height: 40px; display: inline-block; margin: 0.6em 0; max-width: auto; width: auto; height: auto; }
@media (min-width: 576px) {
    #sponsors img { max-height: 50px; }
    #previous img { max-height: 70px; }
    #charity img { max-height: 45px; }
}
@media (min-width: 768px) {
    #sponsors img { max-height: 60px; margin: 0.8em 1em; }
    #partners img { max-height: 100px; margin: 0 0; }
    #previous img { max-height: 80px; margin: 0.6em 0.3em; }
    #charity img { max-height: 50px; }
}
@media (min-width: 992px) {
    #sponsors img { margin: 0.8em 0.8em; }
    #partners img { max-height: 100px; }
    #previous img { max-height: 90px; margin: 0.6em 0.5em; }
    #charity img { max-height: 50px; }
}
@media (min-width: 1200px) {
    #sponsors img { max-height: 70px; margin: 0.8em 0.5em; }
    #partners img { max-height: 120px; margin: 0.5em 0.6em; }
    #previous img { max-height: 80px; margin: 0.8em 0.8em; }
    #charity img { max-height: 55px; }
}
@media (min-width: 1400px) {
    #sponsors img { max-height: 75px; margin: 0.8em 0.8em; }
    #previous img { max-height: 80px; margin: 0.8em 1.5em; }
}

#image_squares #twenty { position: absolute; width: 140px; z-index: 1; top: -80px; right: -150px; }
#image_squares .image1, #image_squares .image2 { display: inline-block; position: relative; }
#image_squares .image1 img, #image_squares .image2 img { width: 100%; max-width: 100%; }
#image_squares .image1 { width: 100%; }
#image_squares .image2 { width: 50%; }
@media (min-width: 576px) {
    #image_squares #twenty { width: 110px; top: -10px; right: -50px; }
    #image_squares .image1, #image_squares .image2 { width: 33.3333%; }
}
@media (min-width: 992px) {
    #image_squares #twenty { width: 140px; right: -70px; }
}
@media (min-width: 1200px) {
    #image_squares #twenty { width: 150px; top: 10px; right: -75px; }
}
@media (min-width: 1400px) {
    #image_squares #twenty { width: 160px; right: -80px; }
}

/* ==========================================================================
   Misc
   ========================================================================== */

.page_article ul li { padding-left: 1em; }
.page_article ul li:before { background-color: #333; }

#loading { background-color: #ffaa01; }
#loading i { color: #008641 !important; }

#error { min-height: 70vh; }

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}