:root
{
    font-size:              95%;
        
    --fontText:             Montserrat, sans-serif;
    --fontHeadings:         Montserrat, sans-serif;
    
    --fontweight_normal:    400;
    --fontweight_stress:    700;
    --fontweight_bold:      600;
    --fontweight_heavy:     900;
    
    --color_black:          #000000; 
    --color_blue:           #2f328d;
    --color_blue_light:     #cbcbe2;
    --color_red:            #c73320;
    --color_sandstone:      #7b6f63;
    --color_sandstone2:     #dedbd8;
    --color_rose:           #f2b557;
    --color_rose_light:     #fbecd5;
    
    --color_block0:         #fbecd5;
    --color_block1:         #dedbd8;
    
    --color_link:           #c73320;                 /* Anchors in headers and footers */
    --color_link2:          #0000ff;                 /* Anchors in body text */
    --color_field:          #dedbd8;
    --color_error:          #ff0000;
    
    --max_width:            1000px;
    --body_padding:         1rem;
    --logo_height:          3rem;
    --border_radius:        5px;
    --content_width:        min( var( --max_width ), calc( 100vw - var( --body_padding ) * 2 ) );
    
    --size_large:           110%;
    --size_small:           90%;
    --size_verysmall:       85%;
    
    
    --video_ratio:          0.5625;                 /*  = 16:9 */
    --video_width:          min( 640px, calc( 100vw - var( --body_padding ) * 2 ) );
    --video_height:         calc( var( --video_width ) * var( --video_ratio ) );
    
    --blockimage_width:     24rem;
    --shadow_width:         0.35rem;
}




/* RESET */
a, b, body, div, header, content, footer,
h1, h2, h3, h4, h5, h6, html, i, img, li, p, ul
 {
    border:                 0;
    box-sizing:             border-box;
    color:                  var( --color_black );
    font-family:            var( --fontText );
    font-weight:            var( --fontweight_normal );
    line-height:            140%;
    margin:                 0;
    padding:                0;
    text-decoration:        none;
    vertical-align:         baseline;
}



body
{        
    overflow-x:             hidden;
}

.headerContent, content, footer
{
    display:                block;
    margin:                 0 auto;
    max-width:              var( --max_width );
    width:                  100%;
}

header
{
    background-color:       white;
    height:                 5.5rem;
    padding-top:            var( --body_padding );
    position:               sticky;
    top:                    0;
    z-index:                5000;
}

content, .headerContent
{
    padding-left:           var( --body_padding );
    padding-right:          var( --body_padding );
}


.headerContent
{
    position:               relative;
}

footer
{
    background-color:       var( --color_blue );
    border-radius:          var( --border_radius );
    clear:                  both;
    margin-bottom:          var( --body_padding );
    margin-top:             2rem;
    padding:                1rem var( --body_padding ) 0.5rem var( --body_padding );
    position:               relative;
    width:                  var( --content_width );
}




strong
{
    font-weight:            var( --fontweight_bold );
    color:                  var( --color_blue );
}




p, h1, h2, h3, ul, ol
{
    max-width:              50rem;
}

.hidden
{
    display:                none;
}


.sprite, ul.tick li:before
{
    background-image:       url( 'sprites.png' );
    background-repeat:      no-repeat;
}

.symbol
{
    display:                inline-block;
    position:               relative;
    top:                    0.16rem;
    width:                  1.25rem;
}

.iconLink
{
    height:                 0.8rem;
    width:                  0.8rem;
}

.scriptOnly
{
    display:                none;
}

.stress
{
    font-weight:            var( --fontweight_stress );
}

.rtl
{
    unicode-bidi:           bidi-override !important;
    direction:              rtl;
}

.clear
{
    clear:                  both;
}

p.flash.center
{
    text-align:             center;
}

h1
{
    font-weight:            var( --fontweight_heavy );
    font-size:              1.5rem;
    line-height:            145%;
    margin-bottom:          2rem;
    margin-top:             1rem;
}


span.highlight
{
    background-color:       yellow;
}


h2
{
    color:                  var( --color_blue );
    font-size:              1.35rem;
    font-weight:            var( --fontweight_heavy );
    line-height:            1.7rem;
    margin-bottom:          0.5rem;
    margin-top:             2rem;
}

div.block h2 
{
    margin-top:             0;
}

h3
{
    color:              var( --color_red );
    font-size:          var( --size_large );
    font-weight:        var( --fontweight_bold );
    margin-bottom:      0.25rem;
    margin-top:         2rem;
}



p
{
    margin-bottom:      0.5rem;
}

p.flash
{
    font-size:          var( --size_large );
    margin:             1rem 0 0 0;
}


p.contactLink
{
    margin:             0 0 0.1rem 0;
}

p.footerlinks
{
    margin-top:         1rem;
}


p.copyright
{
    color:              var( --color_sandstone2 );
    font-size:          var( --size_verysmall );
    margin-top:         1rem;
}



p.intro
{
    margin:             1rem 0 0.25rem 0;
    color:              var(--color_sandstone);
    font-size:          var( --size_small );
    font-style:         italic;
}

p.intro + h1
{
    margin-top:         0;
}

p.spacer
{
    font-size:          var( --size_small );
    line-height:        100%;
    margin:             0;
}

p.space
{
    clear:              both;
    margin-top:         1.5rem;
}

a.cta + p.space
{
    margin-top:         4.5rem;
}

p.alternative
{
    color:              var(--color_sandstone);
    font-size:          var( --size_small );
    font-style:         italic;
    margin:             2rem 0 0 3rem;
}

p.small
{
    font-size:          var( --size_small );
}

a, a h2, a p
{
    color:              var( --color_blue );
}

.hover_underline
{
    display:            inline-block;
    position:           relative;
}

.hover_underline.active
{
    font-weight:        var( --fontweight_bold ) !important;   
}


.hover_underline::after
{
    background-color:       var( --color_blue );
}

footer .hover_underline::after 
{
    background-color:       var( --color_rose );
}

.hover_underline::after
{
    bottom:                 -2px;
    content:                '';
    position:               absolute;
    height:                 1px;
    left:                   0;
    transform:              scaleX(0);
    transition:             transform 0.1s ease-out;
    width:                  100%;
}

.hover_underline:hover::after
{
    transform:              scaleX(1);
}





ul
{
    margin-left:        1.25rem;
}

p.flash.spaceAbove
{
    margin-top:         2rem !important;
}

li
{
    margin-bottom:      0.4rem;
}

ul.tight li
{
    margin-bottom:      0;
}

#logo
{
    float:                  left;
    margin-right:           3rem;
}

#logo img
{
    width:                  calc( var( --logo_height ) * 3 );
    height:                 var( --logo_height );
}

#menuicon
{
    background-position:    0 0;
    height:                 13px;
    left:                   1px;
    position:               relative;
    top:                    -1px;
    width:                  15px;
}

.menuopen #menuicon
{
    background-position:    0 -32px;
}

#menubutton
{
    background-color:       #ffffff;
    border:                 none;
    cursor:                 pointer;
    float:                  right;
    position:               relative;
    z-index:                1001;
    
    display:                block;
    height:                 30px;
    width:                  30px;
    border-radius:          50%;    
    text-align:             center;
    transition:             all 0.25s;
}

#menubutton.menuopen
{
    background-color:       var( --color_blue_light );
}

#menubutton:not( .menuopen ):hover
{
    box-shadow:             0 0 5px 5px var( --color_blue_light );
}



#menu
{
    background-color:       var( --color_rose_light );
    box-shadow:             0 0 var( --shadow_width ) var( --shadow_width ) var( --color_blue_light );
    clear:                  both;
    display:                none;
    max-width:              15rem;
    padding:                var( --body_padding );
    position:               fixed;
    top:                    2rem;
    left :                  calc( var( --content_width ) - 16rem );
    width:                  14rem;
    z-index:                1000;
}

#menu.menuopen
{
    display:                block;
}

#menu a
{
    display:                block;
    margin-bottom:          0.75rem;
    width:                  fit-content;
}



img.footer_logo
{
    height:             2.5rem;
    margin-bottom:      1rem;
    width:              7.5rem;
}


img.footer_QRcode
{
    display:            none;
}


.wide
{
    display:            none;
}



footer p, footer a
{
    color:              white !important; 
    font-size:          var( --size_small );
}

footer a:hover
{
    color:              var( --color_rose ) !important;
}

ul.tick
{
    list-style-type:        none;
    list-style-position:    outside;
    padding-left:           0;
    text-indent:            -0.75rem;
}

ul.tick li:before
{
    background-position:    0 -64px;
    content:                " ";
    display:                inline-block;
    left:                   -10px;
    position:               relative;
    top:                    2px;
    width:                  16px;
    height:                 16px;
}


@keyframes slider
{
    from { opacity: 0; }
    to   { opacity: 1; }
}

ul.slider li
{
    display:                    block;
    width:                      fit-content;
    font-size:                  var( --size_large );
    font-weight:                var( --fontweight_normal );
    opacity:                    0;

    animation-name:             slider;
    animation-duration:         0.55s;
    animation-timing-function:  ease-in-out;
    animation-iteration-count:  1;
    animation-fill-mode:        forwards;
}

ul.slider li:nth-child( 1 ) { animation-delay: 0s; }
ul.slider li:nth-child( 2 ) { animation-delay: 1s; }
ul.slider li:nth-child( 3 ) { animation-delay: 2s; }
ul.slider li:nth-child( 4 ) { animation-delay: 3s; }
ul.slider li:nth-child( 5 ) { animation-delay: 4s; }


div.splat
{
    margin-left:                1rem;
    margin-top:                 0.75rem;
    position:                   relative;
}

div.splat2
{
    position:                   relative;
}

@keyframes splatImage
{
    from { width: 0;        height: 0;      left: 8rem;     top: 4rem; }
    to   { width: 42rem;    height: 16rem;  left: -8rem;    top: -2rem; }
}

div.splat img,
div.splat2 img
{
    position:       absolute;
    z-index:        -10;
    
    left:           8rem;
    top:            4rem;
    width:          0;
    height:         0;
    opacity:        0.75;
    
    animation-name:             splatImage;
    animation-duration:         0.25s;
    animation-timing-function:  ease-in;
    animation-iteration-count:  1;
    animation-fill-mode:        forwards;
    animation-delay:            4s;
}

div.splat2 img
{
    animation-delay:            1s;
}


.emerge
{
    opacity:                    0;
    transition:                 opacity 2s;
}

.emerge.show 
{
  opacity:                      1;
}

.block
{
    background-image:           radial-gradient( #ffffff 35%, #ffffcc ); 
    box-shadow:                 0 0 var( --shadow_width ) var( --shadow_width ) var( --color_blue_light );
    border-radius:              var( --border_radius );
    clear:                      both;
    margin:                     2.5rem 0;
    overflow:                   auto;
    padding:                    var( --body_padding );
    position:                   relative;
    width:                      calc(var(--content_width) - var( --shadow_width ) );
}


div.blockGraphic
{
    position:                   relative;
}

div.blockGraphic img
{
    border-radius:              var( --border_radius );
    height:                     15rem;
    margin:                     1rem 0 1rem 0;
    position:                   relative;
    width:                      15rem;
}   



div.blockGraphic p
{
    background-color:           var(--color_sandstone );
    border:                     1px solid white;
    border-radius:              var( --border_radius );
    bottom:                     20%;
    color:                      white;
    font-size:                  var( --size_small );
    font-weight:                var( --fontweight_bold );
    opacity:                    0;
    padding:                    0.5rem 0.75rem;
    position:                   absolute;
    left:                       clamp( 0px, 7rem, calc( 100% - 15rem ) );
    text-align:                 left;
    transition:                 all 1.5s 0.75s;
    width:                      15rem;
}

.show div.blockGraphic p
{
    opacity:            1;
}



div.blockText
{
    position:       relative;
    width:          100%;
}

div.blockText p,
div.blockText li
{
    font-size:      93%;
}

div.blockText ul
{
    margin-bottom:     1rem;
}

div.block:nth-child(even) 
{
    background-image:           radial-gradient( #ffffff 75%, #ffe0ff );
    box-shadow:                 0 0 var( --shadow_width ) var( --shadow_width ) var( --color_blue_light ); 
}

div.block:nth-child(even) div.blockGraphic img
{
    left:          calc( 100% - 15rem );
}

div.block:nth-child(even) div.blockGraphic p
{
    left:          max( 0px, calc( 100% - 20rem ) );
}

div.block:nth-child(even) div.blockText
{
    left:          0;
}



form 
{
    display:            block;
    max-width:          25rem;
}

div.input
{
    clear: both;
}

label 
{
    color:              var(--color_red);
    display:            inline-block;
    float:              left;
    font-size:          var( --size_small );
    width:              6.6rem;
}

.label2 label
{
    display:            block;
    line-height:        100%;
    width:              100%;
}

input, textarea, select 
{
    background-color:   var( --color_field );
    border:             none;
    border-radius:      var( --border_radius );
    color:              var( --color_blue );
    font-family:        var( --fontText );
    font-size:          var( --size_small );
    font-weight:        var( --fontweight_normal );
    line-height:        125%;
    height:             1.6rem;
    margin:             0.25rem 0 0 0;
    padding:            0 0.5rem;
    width:              calc( 100% - 7.6rem )
}

textarea
{
    height:             4rem;
    padding:            0.25rem 0.5rem;
}

select
{
    padding:            0 0.25rem;
    width:              calc( 100% - 6.6rem )
}




a.cta,
div.cta,
input[ type="submit" ]
{
    background-color:       var( --color_link );
    border:                 1px solid var( --color_blue );
    border-radius:          var( --border_radius );
    box-shadow:             0 0 0 0 var( --color_blue );
    color:                  white;
    cursor:                 pointer;
    display:                block;
    float:                  left;
    font-size:              var( --size_verysmall );
    font-style:             italic;
    font-weight:            var(--fontweight_bold );
    height:                 fit-content;
    line-height:            120%;
    margin-right:           0.75rem;
    max-width:              14rem;
    padding:                0.35rem 1rem 0.5rem;
    width:                  fit-content;
}

a.cta
{
    margin-top:             0.5rem;
}

div.blockText a.cta
{
    margin-bottom:          1rem;
}

div.cta
{
    margin-top:             3rem;
}


div.input.submit
{
    height:                 2rem;   
    display:                flex;
    align-items:            center;
    width:                  var( --content_width );
}

div.submitMessage
{
    color:              var( --color_blue );
    font-size:          75%;
    font-style:         italic;
    line-height:        125%;
}


a.cta,
div.cta,
input[ type="submit" ]:not( .disabled )
{
    transition:             all 150ms ease-in-out;
    
    &:hover,
    &:focus 
    {
        outline:            0;
        box-shadow:         0 0 1rem 0 yellow, 0 0 0.25rem 0.25rem yellow;
        color:              yellow;
    }
}



.disabled
{
    cursor:             default !important;
    color:              var( --color_sandstone ) !important;
    background-color:   var( --color_block1 ) !important;
}




div.radioSet
{
    display:            flex;
    margin-bottom:      0.25rem;
    margin-top:         0.4rem;
    position:           relative;
}

label.radio
{
    display:            inline-block;
    float:              left;
    margin-right:       1rem;
    width:              fit-content;
}

input[ type="radio" ]
{
    display:            inline-block;
    float:              left;
    height:             fit-content;
    margin-right:       0.4rem;
    position:           relative;
    top:                0.05rem;
    width:              0.75rem;
}



p.formerror
{
    background-color:   var( --color_error );
    border-radius:      var( --border_radius );
    color:              white;
    font-size:          var( --size_small );
    font-weight:        var( --fontweight_bold );
    padding:            0.7rem;
}



div.calendar
{
    margin:             1rem 0;
    width:              calc( 100vw - ( var( --body_padding ) * 3 ) );
}





div.calendar p.selection
{
    color:              var(--color_red );
    font-size:          var( --size_small );
    margin-bottom:      0.2rem;
}

p.schedule
{
    clear:              both;
    color:              var(--color_blue );
    font-size:          var( --size_small );
}

div.buttons
{
    height:             2rem;
    display:            flex;
    justify-content:    space-between;
    max-width:          945px;
    width:              calc( 100vw - ( var( --body_padding ) * 3 ) );
}

div.buttonArrow, div.day
{
    height:             1.7rem;
    border:             1px solid var( --color_rose );
    border-radius:      3px;
    background-color:   var( --color_block0 );
    color:              var(--color_blue );
    cursor:             pointer;
    flex-grow:          0;
    flex-shrink:        0;
    float:              left;
    font-size:          var( --size_verysmall );
    margin:             0 1px;
    padding-top:        0.15rem;
    text-align:         center;
    vertical-align:     middle;
}


div.calendar .active
{
    border-color:       var( --color_blue );
    font-weight:        var(--fontweight_bold);
}

div.buttonArrow
{
    font-weight:        var(--fontweight_bold);
    width:              1.2rem;
}

div.day
{
    width:              3.75rem;
}





#timeslots
{
    clear:              both;
    margin-top:         0.25rem;
    overflow:           auto;
}

.hour
{
    border:             1px solid var( --color_rose );
    border-radius:      3px;
    background-color:   var( --color_block0 );
    color:              var(--color_blue );
    cursor:             pointer;
    float:              left;
    font-size:          var( --size_verysmall );
    height:             1.3rem;
    margin-bottom:      0.2rem;
    margin-right:       0.2rem;
    padding-top:        0.05rem;
    text-align:         center;
    width:              3.7rem;
}

.chart
{
    display:                grid;
    grid-template-columns:  15rem auto;
    row-gap:                1.5rem;
    margin:                 1.5rem 0 2rem 0
}

.chart .number
{
    display:                none;
    font-size:              var( --size_verysmall );
    font-weight:            var( --fontweight_bold );
}

.chart .action
{
    border:                 1px solid var( --color_blue );
    border-radius:          var( --border_radius );
    background-color:       var( --color_sandstone2 );
    color:                  var( --color_blue );
    font-size:              var( --size_small );
    font-weight:            var( --fontweight_bold );
    padding:                0.5rem;
    min-height:             3.25rem;
}

.chart .text
{
    padding-left:           1rem;
    font-size:              var( --size_small );
}

.chart + .cta
{
    margin-left:            1.5rem;                     /* Width of number column in chart */
}





.video
{
    background-color:   black; 
    border-radius:      var( --border_radius );
    box-shadow:         0 0 var( --shadow_width ) var( --shadow_width ) var( --color_blue_light );
    cursor:             pointer;
    height:             var( --video_height );
    margin-bottom:      1rem;
    margin-top:         1rem;
    position:           relative;    
    width:              var( --video_width );
}

.videoText
{    
    padding:            var( --body_padding );
}

.videoPlaying .videoText
{
    display:            none;
}

.videoCloseButton
{
    background-position:-43px -22px;
    cursor:             pointer;
    display:            none;
    height:             20px;
    left:               calc( var( --video_width ) - 0.625rem );
    position:           absolute;
    top:                -0.625rem;
    width:              20px;
    z-index:            100;
}

.videoCloseButton:hover
{
    background-position:-43px 0;
}



.video p, .video h3
{
    color:              white;
}

.video h3
{
    font-size:          1.25rem;
    font-weight:        var( --fontweight_heavy );
    margin:             0.5rem 0 0.75rem 0;
    line-height:        115%;
}


.video p
{
    font-size:          0.9rem;
    line-height:        135%;
    margin:             0;
}

.videoDescription
{
    display:            none;
    font-size:          var( --size_small );
    font-style:         italic;
}


.video div.cta
{
    border:             1px solid white;
    margin-top:         1rem;
}



/* margin-left to avoid overlap with phone camera */
@media (orientation: landscape) and (max-width: 900) 
{
    body 
    {
        margin-left:    1.25rem;
    }
}



@media (min-width: 500px) 
{ 
    img.footer_QRcode
    {
        display:            block;
        width:              10rem;
        height:             10rem;
        position:           absolute;
        top:                1rem;
        right:              calc( var( --body_padding ) - 0.6rem );
    }
}


/* Menu as options across the screen */
@media (min-width: 650px) 
{

    #menubutton { display: none; }
    
    #menu
    {
        clear:              none;
        display:            flex;
        background-color:   transparent;
        border:             none;
        box-shadow:         none;
        height:             var( --logo_height );
        justify-content:    left;
        margin:             0;
        max-width:          700px;             /* don't let the menu spread too far */
        padding:            0;
        position:           static;
        width:              calc( 100% - ( var( --logo_height ) * 3 + 3 ) );
    }
    
    #menu a
    {
        align-items:        center;
        display:            flex;
        flex-grow:          0;
        font-size:          var( --size_verysmall );
        height:             100%;
        justify-content:    center;
        position:           relative;
        text-align:         center;
        vertical-align:     middle;
        
        margin-bottom:      0;
        margin-left:        2rem;
        width:              fit-content;
    }
    
    #menu .hover_underline:after
    {
        bottom:              12px;
    }


        
    div.splat
    {        
        margin-bottom:      5rem;
        margin-left:        2rem;
    }
    


    div.block
    {
        min-height:                 21rem
    }
    
    div.blockGraphic
    {
        position:                   absolute;
        top:                        var( --body_padding );
        right:                      var( --body_padding );
        width:                      22rem;
    }
    
    div.blockGraphic img
    {
        height:                     18rem;
        margin:                     0;
        position:                   relative;
        top:                        5px;
        width:                      18rem;
    }

    
    div.blockText, div.block h2
    {
        width: calc( 100% - var( --blockimage_width ) );
    }
    
    div.block:not( .noGraphic ):nth-child(even)  h2
    {
        margin-left:        var( --blockimage_width );
    }
    
    div.block:not( .noGraphic ):nth-child(even)  div.blockText
    {
        left:               var( --blockimage_width );
    }
    
    div.block:nth-child(even)  div.blockGraphic
    {
        left:           0;
    }

    div.block:nth-child(even)  div.blockGraphic img
    {
        left:           5rem;
    }

    div.block:nth-child(even)  div.blockGraphic p
    {
        left:          var( --body_padding );
    }
    
    .narrow
    {
        display:            none;
    }
    
    .wide
    {
        display:            inherit;
        margin-top:         2rem;
        width:              640px;
    }


    
    .videoDescription
    {
        display:            inherit;
        width:              75%;
    }

}


@media (min-width: 900px) 
{
    :root
    {
        font-size:          105%;
    }
    
    h1
    {
        margin-top:             2rem;
        font-size:              2rem;
    }
    
    p.intro
    {
        margin-top:             2rem;
    }


}




@media (min-width: 1200px) 
{     
    content, .headerContent
    {
        padding-left:           0;
        padding-right:          0;
    }
    
    @keyframes splatImage
    {
        from { width: 0;        height: 0;      left: 8rem;     top: 4rem; }
        to   { width: 46rem;    height: 11rem;  left: -10rem;    top: -1.6rem; }
    }
    
    
    footer
    {
        width:                  100%;
    }
    
    
    
}