:root {
--header_colour: 0,50,130;
--site_colour: 90,90,120; 

--starburst : 240,240,0;
--starburst2 : 240,240,156;      
}      

.site_width {width:var(--site_width);}
.page_container {min-height:100vh; position: absolute; top: 0; width: 100%;}
.main {position:relative; width: var(--site_width); margin:var(--header_height) auto 0 auto; min-height:calc( 100vh - (var(--header_height) + var(--footnote_height) )); padding:0; box-sizing:border-box;  background-color:#fff;}

.main > div {padding-top:30px; background-color:#fff;}
.race_date {position:fixed; width:var(--site_width); left: calc(50% - (var(--site_width) / 2)); background-color:rgb(var(--site_colour)); color:#fff; text-align:center; font-weight:bold; top:var(--header_height); z-index:200;}
.test_mode {position:fixed; width:var(--site_width); background-color:yellow;  color:#000; text-align:center;  top:var(--header_height); z-index:201; font-size:15pt;  }


.header {position:fixed; height: var(--header_height); z-index:200; top:0; left:calc(50% - var(--site_width) / 2); width:var(--site_width);  box-sizing:border-box; text-align:center; background-color:rgba(var(--site_colour),1);}
.header_inner {display:inline-block; position:relative; width:var(--site_width); height:100%; overflow:hidden; background-color:#fff;}
.header_logo {position: absolute;} 
.logo {display:inline-block; box-sizing: border-box; text-align:center;}
.logo_name {font-size:3.5em;}
.logo_text {font-size:2.0em;}

.header_price {position:absolute; right: 0; top: 0; clip-path: polygon(0% 0, 100% 0, 100% 100%); -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%); color:#b9d533; padding: 0px; z-index: 101; background-color: rgb(var(--site_colour)); text-align: center;}
.header_price > div {position:absolute; top: 0%; transform: translateX(-50%) rotate(45deg);  transform-origin: 0 0;}




.section {width:100%; text-align:center;}
.section > div {display:inline-block; width:var(--site_width); text-align:left; padding:0 3px; box-sizing:border-box;} 



.heading {background-color:rgba(var(--site_colour),1);}
.heading > div {background-color:rgba(255,255,255,0.8); padding:3px; box-sizing:border-box; font-size:15pt;}

h1 {font-weight:bold; text-align:center; color:#c1272d;}
h2 {font-weight:bold; font-size:15pt; padding:3px 0; text-align:center; background-color:#ffb418; color:#fff; text-shadow: 1px 1px 0px black}


.footer {position: fixed;left: calc(50% - (var(--site_width) / 2));  bottom:0 ;width: var(--site_width); background-color: rgb(var(--site_colour));z-index: 200;color: #fff; text-align: center;}


.footnote {width: var(--site_width); height:var(--footnote_height);padding:3px 3px 30px 3px; font-size:10pt; margin:auto; background-color:#efefef; box-sizing:border-box; border-top:2px solid rgb(var(--header_colour));}
.footnote > div {display:grid; width:100%; height:100%; vertical-align:middle; align-items:center; }
.footnote > div > b {display:contents}



.duck_number {position:absolute; left:0px; top:47%; font-size:15pt; height:30px; line-height:30px; width:100%; text-align:center; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
.add_duck {position:absolute; left:0px; top:12px; font-size:30pt; height:30px; line-height:30px; width:100%; text-align:center; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
input.details{display:inline-block;  background-color:rgba(var(--site_colour),0.1); border:1px solid rgba(var(--site_colour),1); border-radius:2px; color:rgba(var(--site_colour),1);}
input.person_details {font-size:20px; height:28px;}
input.duck_details {}
button, .button {display:inline-block; font-size:15px; height:28px; line-height:28px; background-color: rgba(var(--site_colour),0.7); border:1px solid rgba(var(--site_colour),1); border-radius:4px; color:#fff; text-align:center;}


.disable_overlay {position:fixed; width:100vw; height:100vh; background-color:#000; opacity:0.65; z-index:999;}



.price_bar {position:fixed; bottom:0; left:0; height:30px; width:100vw; font-size:15pt; color:#fff;}
.price_bar div { background-color:rgba(var(--site_colour),0.7);} 

.prizes_table {width:100%; max-width:450px; border:#ffb418 3px solid; margin-top:20px; border-radius:4px; display:inline-block; box-sizing:border-box;}
.prizes_table table {width:100%;   background-image: linear-gradient(rgba(186,125,0,0), rgba(186,125,0,0.6));}
.prizes_table  th {text-align:center; color:#fff; background-color:#ffb418; font-size:20px; font-weight:bold; text-shadow: 1px 1px 0px black;}
.prizes_table td {padding:2px 5px; font-weight:bold; color:rgb(143,0,0); text-shadow: 1px 1px 0px white;}
 .no_shadow {text-shadow:none!important;}

.duckground {position:fixed; top:0;  width:50vw; height:100vh; background-size: 50vw 100vh; background:url('/images/site/bg.jpg'); z-index:0; background-color:rgba(var(--site_colour),1);}
.duckground.left {left:0; background-position: top left; }
.duckground.right {right:0; background-position: top right; }

.duck {background-image:url('/images/site/duck.png'); background-repeat: no-repeat; background-size:101%; background-position: center; position:relative; margin:5px;}
.test_duck {border-radius:50%;background-image:url('/images/site/test_duck.png'); background-repeat: no-repeat; background-size:101%; background-position: center; position:relative; margin:5px;}



.bin {opacity:0.6; height:17px; margin-top: 3px; display: inline-block;}

.duck_number {}


.banner {position:absolute; top:0; left:50%; transform:translateX(-50%); height:var(--header_height); z-index:1;}
.logo {position:absolute; bottom:0; z-index:2;}
.logo img {width:100%; display:block;}


@media screen and (min-width : 1200px)
{
:root {
      --site_width: 1200px;
      --header_height: 120px;
      --footnote_height: 90px;       
}  
h1 {font-size:24pt;}
.header_price {height: calc( var(--header_height) - 10px);  width:calc( var(--header_height) - 10px);}
.header_price > div {line-height: 1.25em;  left: 88%;  width: 62%; font-size:12pt;}
.header_price > div > span:first-of-type {font-size:16pt;}
.banner { width:1200px; max-width: 1200px; }
.logo {}
.first {left:50px; bottom:0;}
.lmc {right:85px; bottom:3px;}
.gndr {left:0; right:0; margin-left:auto; margin-right:auto; top:10px; width:400px;}
.quack {left:48%; top:14px; width:75px; z-index:0;}
.race_date {font-weight:bold; font-size:14pt;}
.prizes_table {font-size:20pt;}
.footer{font-size:11pt;}
}



@media screen and (min-width : 800px) and (max-width : 1199px)
{
:root {
      --site_width: 800px;
      --header_height: 120px;
      --footnote_height: 110px;       
} 
h1 {font-size:23pt;} 
.header_price {height: calc( var(--header_height) - 10px);  width:calc( var(--header_height) - 10px);}
.header_price > div {line-height: 1.25em;  left: 88%;  width: 62%; font-size:12pt;}
.header_price > div > span:first-of-type {font-size:16pt;}
.banner { width:800px; max-width: 800px;}
.logo {}
.first {left:15px; bottom:0;}
.lmc {right:85px; bottom:3px; width:100px;}
.gndr {left:0; right:0; margin-left:auto; margin-right:auto; top:28px; width:300px;}
.quack {left:48%; top:15px; width:70px; z-index:0;}
.race_date {font-weight:bold; font-size:14pt;}
.prizes_table {font-size:18pt;}
.footer{font-size: 11pt;}
}


/*Medium screens*/
@media screen and (min-width : 600px) and (max-width : 799px)
{
:root {
      --site_width: 600px;
      --header_height: 120px;
      --footnote_height: 125px;       
}  
h1 {font-size:22pt;}
.header_price {height: calc( var(--header_height) - 10px);  width:calc( var(--header_height) - 10px);}
.header_price > div {line-height: 1.25em;  left: 88%;  width: 62%; font-size:12pt;}
.header_price > div > span:first-of-type {font-size:14pt;}
.banner {width: 600px; max-width:600px; top:10px!important;}
.first {left:10px; top:1px; width:98px;}
.lmc {right:95px; top:2px ;width:78px;}
.gndr {left:0; right:0; margin-left:auto; margin-right:auto; top:26px; width:320px;}
.quack {left:47%; top:25px; width:60px; z-index:0;}
.race_date { font-size:13pt;}
.prizes_table {font-size:15pt;}
.footer{font-size: 10pt;}
}



@media screen and (min-width : 400px) and (max-width : 599px)
{
:root {
      --site_width: 100vw;
      --header_height: 95px;
      --footnote_height: 160px;       
}
h1 {font-size:21pt;}  
.header_price {height: calc( var(--header_height) - 10px);  width:calc( var(--header_height) - 10px);}
.header_price > div {line-height: 1.25em;  left: 88%;  width: 62%; font-size:9pt;}
.header_price > div > span:first-of-type {font-size:12pt;}
.banner {width: 600px; max-width:600px; top:10px!important;}
.first {left:5px; top:5px; width:75px;}
.lmc {left:85px; top:4px; width:55px;}
.gndr {right:10px; bottom:5px; width:230px;}
.quack {right:60px; bottom:20px; width:60px; z-index:0;}
.race_date { font-size:11pt;}
.prizes_table {font-size:14pt;}
.footer{font-size: 8pt;}
}



/*Small screens*/
@media screen and (max-width : 399px)
{
:root {
      --site_width: 100vw;
      --header_height: 110px;
      --footnote_height: 220px;      
}      
h1 {font-size:18pt;}
.header_price {height: calc( var(--header_height) - 10px);  width:calc( var(--header_height) - 10px);}
.header_price > div {line-height: 1.25em;  left: 88%;  width: 62%; font-size:9pt;}
.header_price > div > span:first-of-type {font-size:12pt;}
.banner {width: 400px; max-width:400px; top:3px!important;}
.first {left:3px; bottom:2px; width:72px;}
.lmc {left:15px; top:2px; width:50px;}
.gndr {right:5px; bottom:7px; min-width:260px; width:75vw;}
.quack {right:115px; bottom:30px; min-width:55px; width:18vw; z-index:0;}
.race_date { font-size:10pt;}
.prizes_table {font-size:13pt;}
.footer{font-size: 8pt;}
}

::placeholder {
  color: rgba(var(--site_colour),0.5); opacity:0.5;
}


/*Small screens*/
@media screen and (max-width : 340px)
{
    
.first { display:none;}
.lmc {display:none;}    

}







.starburst {
	/* GLOBAL */
	position: relative;
	background-repeat: no-repeat;
	z-index: 0;
}
.starburst * {
	/* CHILDREN */
	position: relative;
	z-index: 1;
}
.starburst--both {
	/* ALIGNMENT BOTH */

	overflow: hidden;
    background-color:orange;
	background-image:
	linear-gradient(0deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(11deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(22deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(33deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(44deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(55deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(66deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(77deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(88deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(99deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(110deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(121deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(132deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(143deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(154deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(165deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(176deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(187deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(198deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(209deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(220deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(231deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(242deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(253deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(264deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(275deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(286deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(297deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(308deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(319deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(330deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(341deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(352deg, transparent 50%, rgba(var(--starburst),1) 50%);
}
.starburst--both::before {
	background-image:
	linear-gradient(180deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(191deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(202deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(213deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(224deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(235deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(246deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(257deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(268deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(279deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(290deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(301deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(312deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(323deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(334deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(345deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(356deg, transparent 50%, rgba(var(--starburst),1) 50%);
}
.starburst--both::after {
	top: 50% !important;
	background-position: 0 100%;
	background-size: 100% 200%;
	background-image:
	linear-gradient(0deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(11deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(22deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(33deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(44deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(55deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(66deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(77deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(88deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(99deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(110deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(121deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(132deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(143deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(154deg, transparent 50%, rgba(var(--starburst),1) 50%),
	linear-gradient(165deg, transparent 50%, rgba(var(--starburst2),1) 50%),
	linear-gradient(176deg, transparent 50%, rgba(var(--starburst),1) 50%);
}
.starburst--both::before,
.starburst--both::after {
	top: 0;
	left: 0;
	content: "";
	z-index: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

*/