/* VARS ------------------------------------------------*/
    
    :root {
        /* colours */        
        --colour-real-black: #000;
        --colour-black: #151619;
        --colour-lt-black: #2E2F36; /*#1E1F24;*/
        --colour-white: #fff;
        --colour-lt-red: #ffdede;
        --colour-dk-red: #B40000;
	    --colour-red: #FF4750;
        --colour-yellow: #FFFF00;
        --colour-lt-yellow: #FFFF80;
        --colour-tangerine: #FD9800;
        --colour-orange: #F06D00;
        --colour-amber: #FBCA3F;
        --colour-mint: #26B8A5;
        --colour-lt-green: #83C832;
        --colour-mid-green: #00A03C;
        --colour-dk-green: #006426;
        --colour-olive: #54692E;
        --colour-green-blue: #006651;
        --colour-cyan: #4DBEFF;
        --colour-lt-cyan: #A7D6F0;
        --colour-lt-blue: #2DB2FF;
        --colour-navy: #002D50;
        --colour-lt-navy: #003964;
        --colour-royal-blue: #0000C0;
        --colour-violet: #C285D2;
        --colour-dk-violet: #7B5DA7;
        --colour-indigo: #3C1A6E;
        --colour-purple: #360088;
        --colour-lt-purple: #CFC2E3;
        --colour-brown: #764836;
        --colour-cute-pink: #FFC0FF;
        --colour-hot-pink: #FF4F91;
        --colour-magenta: #FF00FF;
        --colour-lt-grey: #E6E6EB;
        --colour-mid-grey: #B6B6C3;
        --colour-dk-grey: #5A5A6E;
        --colour-slate: #4F4550;
        
        
        /* THIS SITE */        
        --body-font: 'Albert Sans', sans-serif;
        --headline-font: 'Montserrat', sans-serif;
        --width-large: 1250px;                          /* width of widest content */
        --width-medium: 920px;                          /* med width block about 75% of theWidth */
        --width-narrow: 700px;                          /* narrow blocks (mainly for text) about 50% of theWidth */
        --expander-max-height: 1100px;                  /* max height of contents of an accordion */

        --font-size: 2.0rem;                            /* default font size for P */
        --font-small: calc(var(--font-size) * 0.90);    /* small text is 90% of normal text */
        --grid-gap: 30px;                               /* gap size for main grid */
        --between-grids: var(--grid-gap);               /* gridGap for two grid together, else marginVert */
        
        --gap-big: 75px;                                /* usual gap between elements */
        --gap-small: 35px;                              /* small gap, eg between headline and body text */
        --horiz-margins: 40px;                          /* for padding content blocks on responsive */
        
        --colour-primary: var(--colour-lt-black);       /* set to the main colour for header background etc */
        --colour-page: var(--colour-white);             /* set to the background colour for pages */
        --colour-highlight: var(--colour-orange);       /* set to the highlight colour */
        --colour-link: var(--colour-dk-red);            /* set to the main text link colour */
        --colour-link-hover: var(--colour-orange);      /* set to the main text link hover colour */
        --colour-link-hover-lt: var(--colour-lt-cyan);  /* set to the main text link hover colour for dark backgrounds */
        --default-bodyfont-colour: var(--colour-slate); /* default font colours for body text etc. */
        --default-heading-colour: var(--colour-purple); /* default font colours for headings */        
    }
    

/* FONTS ----------------------------------------------- */


    /* albert-sans-regular - latin */
    @font-face {
      font-family: 'Albert Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local(''),
           url('/fonts/albert-sans-v1-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/albert-sans-v1-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    /* albert-sans-600 - latin */
    @font-face {
      font-family: 'Albert Sans';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: local(''),
           url('/fonts/albert-sans-v1-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/albert-sans-v1-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    /* montserrat - latin regular */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: local(''),
           url('/fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/montserrat-v25-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    /* montserrat-600 - latin semi-bold */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: local(''),
           url('/fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/montserrat-v25-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    /* montserrat-700 - latin bold */
    @font-face {
      font-display: swap;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      src: local(''),
           url('/fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('/fonts/montserrat-v25-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 
    }


/* BASIC ---------------------------------------------- */


    body { height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; }
    body.freeze { overflow: hidden; }
    html { font-size: 62.5%; }
    * { margin: 0px; padding: 0px; }


/* LAYOUT --------------------------------------------- */


    main { flex: 1; padding: 0; margin-bottom: var(--gap-big); }
    main p:last-child { margin-bottom: 0; }
    .wrapper { width: 100%; }
    .block { margin: 0 auto; }
    .width-large { width: var(--width-large); padding-left: var(--horiz-margins); padding-right: var(--horiz-margins); }
    .width-medium { width: var(--width-medium); padding-left: var(--horiz-margins); padding-right: var(--horiz-margins); }
    .width-narrow { width: var(--width-narrow); padding-left: var(--horiz-margins); padding-right: var(--horiz-margins); }


    .cols-2 { display: flex; flex-flow: row nowrap; gap: 20px; }
    .cols-2 > :nth-child(1) { flex: 0 0 300px; }
    .cols-2 h2,
    .cols-2 .button { margin-bottom: 0; } 


/* SPACING -------------------------------------------- */


    .big-gap-top { margin-top: var(--gap-big); }
    .small-gap-top { margin-top: var(--gap-small); }

    .big-gap-bot { margin-bottom: var(--gap-big); }
    .small-gap-bot { margin-bottom: var(--gap-small); }
    

/* HEADER --------------------------------------------- */    


    header { padding: var(--gap-big) 0; background-image: url('../images/hero-bg.jpg'); background-position: top center; background-repeat: no-repeat; background-size: cover; }
    header .block { display: flex; flex-flow: row wrap; justify-content: space-between;}
    .logo-top { display: block; width: 280px; height: auto; }

    .tagline { font-family: var(--headline-font); font-size: 4.9rem; font-weight: 600; color: var(--colour-lt-purple); margin: calc(var(--gap-big) * 2) 0 0; flex: 0 0 100%; line-height: 130%; text-align: center; }
    .tagline span { color: var(--colour-white); display: block; }
    .menu-main { list-style-type: none; align-self: center; margin: 0; }
    .menu-main li { font-size: 2.0rem; display: inline; color: var(--colour-white); margin: 0 30px 0 0; font-weight: 600; }
    .menu-main li:last-child { margin: 0; }
    .menu-main li a { color: var(--colour-white); }
    .menu-main li a:hover { color: var(--colour-link-hover-lt); }


/* FOOTER --------------------------------------------- */   


    footer { padding: var(--gap-big) 0; }
    footer .block { display: flex; flex-flow: row wrap; }
    footer .block .col { flex: 1 1 50%; }
    footer .logo { display: block; width: 200px; height: auto; }
    footer ul { list-style-type: none; padding: 0; margin: 0; }
    footer ul li { display: inline; padding: 0 20px 0 0; text-transform: uppercase; }
    footer ul li:last-child { padding-right: 0; }
    footer ul li a { color: var(--white); }
    footer ul li a:hover { color: var(--colour-link-hover-lt); }
    footer ul li, footer p { font-size: 1.4rem; margin: 0; }
    footer .social { float: right; }
    footer .social li { font-size: 3.0rem; }
    footer .row { margin: 20px 0 0; flex: 1 1 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; }


/* HOME ANIMATION ------------------------------------- */


    #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 99; display: none; align-items: center; flex-wrap: wrap; justify-content: center; transition: opacity 0.66s ease; }
    #anim-logo { flex: 1 1 100%; max-width: 260px; height: auto; }
    .logo-line { stroke-opacity: 1; stroke-dasharray: 500; stroke-dashoffset: 0; }

    .home.animate { overflow: hidden; } 
    .home.animate #overlay { display: flex; }
    .home.animate .logo-line { animation: anim-line 2s ease; }
    .home.animate #overlay.hide { opacity: 0; }
    
    @keyframes anim-line {
        0% { stroke-dashoffset: 0; }
        50% { stroke-dashoffset: 500; }
        60% { stroke-dashoffset: 500; }
        100% { stroke-dashoffset: 0; }
    }
    

/* TEXT & LINKS --------------------------------------- */

    
    /* Default Body Font and Text Colour */
    html { font-weight: 400; font-family: var(--body-font); }
    body { font-size: var(--font-size); color: var(--colour-slate); }

    
    h1, h2, h3 { font-family: var(--headline-font); font-weight: 700; color: var(--colour-purple); line-height: 140%; }
	h1,
    h2 { font-size: 3.6rem; line-height: 140%; margin: 0 0 calc(var(--gap-big)/3); }
    h3 { font-size: 2.6rem; line-height: 140%; margin: 0 0 calc(var(--gap-small)/2); }
    h6, p.h6 { font-size: 2.3rem; font-weight: 400; }
    p, h6 { margin-bottom: var(--gap-small); line-height: 130%; }
    p.small { font-size: var(--font-small); }


    strong, b { font-weight: 600; }

    .block.centred p { margin-left: auto; margin-right: auto; }

    a { text-decoration: none; color: var(--colour-link); }
    a:hover { color: var(--colour-link-hover); }
    a img { border: none; }

    .button:hover { color: var(--colour-white); background: var(--colour-slate); }


/* LISTS ---------------------------------------------- */

    
	ul { list-style-type: disc;	padding-bottom: 0; margin-bottom: var(--gap-small); }
	li { padding-left: 0px; margin-left: 20px; }

    ol { margin-bottom: var(--gap-small); }
    ul.bullet { list-style: none; }
	.bullet li { list-style: none; padding-left: 20px; margin-left: 0px; position: relative; }
    .bullet li:before { content: ""; position: absolute; left: 0; top: 10px;
        background-color: var(--colour-highlight); width: 6px; height: 6px; display: block; }

    

/* COMPONENTS ----------------------------------------- */

    hr { margin: var(--gap-big) 0; border: 0; }
    hr.alt { margin: var(--gap-small) 0 var(--gap-big); }
    hr:after { content: ""; height: 2px; width: 50px; background: var(--colour-purple); display: block; }
    .block.centred hr:after,
    hr.centred:after { margin: 0 auto; }
    img { display: block; }
    .button { display: inline-block; margin-left: auto; margin-right: auto; padding: 10px 20px; cursor: pointer; font-size: 90%; }
    .button i.fa-solid { margin-left: 10px; }
    .button + .button { margin-left: 20px; }

    /* figures */
    figure { margin-bottom: 40px; max-width: 50%; position: relative; border-top: 1px solid #cecece;
    padding-top: 25px; }
    figure.alignnone { max-width: none; }
    figcaption { clear: both; padding: 10px; font-size: 90%; line-height: 130%; border-bottom: 1px solid #cecece; }
    figure img { width: 100%; height: auto; }

    img.alignnone { width: 100%; height: auto; margin: 0 0 30px; }
    img.alignleft { float: left; margin-right: 20px; max-width: 45%; height: auto; }
    img.alignright { float: right; margin-left: 20px; max-width: 45%; height: auto; }
    .actual { width: auto; }

    img.home { width: 50%; margin-left: auto; margin-right: auto; min-width: 225px; }

    .callout-info { position: relative; border-left: 3px solid var(--colour-purple); margin-top: 50px; }
    .callout-info:before { position: absolute; top: -11px; left: -20px; font-family: fontawesome; font-size: 3.0rem; color: 
    var(--colour-purple); content: "\f05a"; background: #fff; border-radius: 50%; border: 5px solid #fff; width: 29px; height: 27px; }

    blockquote { width: 100%; padding-left: 40px; margin-bottom: 30px; box-sizing: border-box;
        background: url(/images/quote.png) no-repeat 2px 0px; background-size: 30px; }
    blockquote p { margin-bottom: 0; padding-top: 5px; font-style: italic; }
    blockquote p cite { font-size: 90%; margin-top: 5px; display: inline-block; padding-left: 25px; }
    blockquote p:first-of-type { border-left: 1px solid var(--colour-purple); padding-left: 25px; box-sizing: border-box; margin-left: 20px; }


    .toplink { position: fixed; bottom: 95px; right: 0; padding: 0; text-align: center; z-index: 1500; 
               padding: 5px 0 10px; font-size: 23px; width: 40px; height: 20px; color: #fff;
               transition: transform 0.5s ease-in; transform: translateX(100px); background: rgba(0,0,0,0.3); }
    .toplink.show { transform: translateX(0); }
    .jump { cursor: pointer; }

    .rounded { border-radius: 25px; }
    .centred { text-align: center; }
    .padded { padding: 20px; margin-bottom: 30px; }
    .padded *:last-child { margin-bottom: 0; }


/* CONTACT FORM  -------------------------------------- */

    #form_contact { margin: 30px 0; width: 100%; box-sizing: border-box; }
    #form_contact label { margin-bottom: 0; width: 100%; display: block; font-weight: 600; }
    #form_contact label i { font-size: 120%; width: 30px; opacity: 0.33; }
    #form_contact p { margin-bottom: 0; }
    #form_contact div { width: 100%; border-radius: 7px; border-bottom: 2px solid #fff;
        padding: 10px; box-sizing: border-box; }

    #form_contact input[type="text"], #form_contact textarea {
        box-sizing: border-box; background: inherit;
        font-family: courier, "courier new", "lucida mono", fixed; font-size: 110%;
        width: 100%; margin: 10px 0 0; padding: 5px; border: 1px solid transparent;
    }
    #form_contact .button { border: none; }

    #form_contact p#form_submit { display: block; margin-bottom: 0; cursor: pointer;
        padding: 5px 40px; text-transform: uppercase; text-align: center; margin-top: 20px; }
    p#form_submit:hover { background: #4F4550; color: #fff; }
    #form_submit.rounded { border-radius: 25px; }
    p.check { visibility: hidden; margin: 20px 0 0; }
    p.check .fas { font-size: 120%; }
    p.check.show { visibility: visible; }
    #form_success { display: none; }

    img.contact {
        position: absolute; bottom: 10px; right: 0; z-index: 5; width: auto; height: 105px; image-rendering: pixelated; opacity: 0.2; }

    p.contact { margin-bottom: 10px; }
    /*p.contact a { margin-left: 5px; }*/
    p.contact i { padding: 9px 7px; margin-right: 15px; text-align: center; width: 18px; height: 16px; }
    p.error i { padding-right: 15px; }
    p.error { color: var(--colour-red); }
    #form_contact input.error,
    #form_contact textarea.error { border: 1px solid var(--colour-red); }
    #form_contact div.error { background: var(--colour-lt-red); }

    p.check { visibility: hidden; color: var(--colour-red); }
    p.check.show { visibility: visible; padding-bottom: 30px; }

    .content-card { margin-bottom: 25px; padding: 25px 0; position: relative; }
    .content-card *:last-of-type { margin-bottom: 0; }
    .content-card { border-top: 1px solid var(--colour-lt-purple); border-bottom: 1px solid var(--colour-lt-purple); }
    .content-card+.content-card { border-top: none; }

    .content-card p.contact { display: flex; }
    

/* BASIC COLOURS -------------------------------------- */

	.c-black { color: var(--colour-black); }
    .c-lt-black { color: var(--colour-lt-black); }
	.c-white { color: var(--colour-white); }
    .c-dk-red { color: var(--colour-dk-red); }
	.c-red { color: var(--colour-red); }
    .c-yellow { color: var(--colour-yellow); }
    .c-lt-yellow { color: var(--colour-lt-yellow); }
    .c-tangerine { color: var(--colour-tangerine); }
    .c-orange { color: var(--colour-orange); }
    .c-amber { color: var(--colour-amber); }
    .c-mint { color: var(--colour-mint); }
    .c-lt-green { color: var(--colour-lt-green); }
    .c-mid-green { color: var(--colour-mid-green); }
    .c-dk-green { color: var(--colour-dk-green); }
    .c-olive { color: var(--colour-olive); }
    .c-green-blue { color: var(--colour-green-blue); }
    .c-cyan { color: var(--colour-cyan); }
    .c-lt-cyan { color: var(--colour-lt-cyan); }
    .c-lt-blue { color: var(--colour-lt-blue); }
    .c-navy { color: var(--colour-navy); }
    .c-royal-blue { color: var(--colour-royal-blue); }
    .c-violet { color: var(--colour-violet); }
    .c-dk-violet { color: var(--colour-dk-violet); }
    .c-indigo { color: var(--colour-indigo); }
    .c-brown { color: var(--colour-brown); }
    .c-cute-pink { color: var(--colour-cute-pink); }
    .c-hot-pink { color: var(--colour-hot-pink); }
    .c-magenta { color: var(--colour-magenta); }
    .c-lt-grey { color: var(--colour-lt-grey); }
    .c-mid-grey { color: var(--colour-mid-grey); }
    .c-dk-grey { color: var(--colour-dk-grey); }
    .c-slate { color: var(--colour-slate); }
    .c-purple { color: var(--colour-purple); }
    .c-lt-purple { color: var(--colour-lt-purple); }

    .c-primary { color: var(--colour-primary); }
    .c-highlight { color: var(--colour-highlight); }
    .c-page { color: var(--colour-page); }


	.bg-black, .bull-black li:before { background-color: var(--colour-black); }
    .bg-lt-black, .bull-lt-black li:before { background-color: var(--colour-lt-black); }
	.bg-white, .bull-white li:before { background-color: var(--colour-white); }
    .bg-dk-red, .bull-dk-red li:before { background-color: var(--colour-dk-red); }
	.bg-red, .bull-red li:before { background-color: var(--colour-red); }
    .bg-yellow, .bull-yellow li:before { background-color: var(--colour-yellow); }
    .bg-lt-yellow, .bull-lt-yellow li:before { background-color: var(--colour-lt-yellow); }
    .bg-tangerine, .bull-tangerine li:before { background-color: var(--colour-tangerine); }
    .bg-orange, .bull-orange li:before { background-color: var(--colour-orange); }
    .bg-amber, .bull-amber li:before { background-color: var(--colour-amber); }
    .bg-mint, .bull-mint li:before { background-color: var(--colour-mint); }
    .bg-lt-green, .bull-lt-green li:before { background-color: var(--colour-lt-green); }
    .bg-mid-green, .bull-mid-green li:before { background-color: var(--colour-mid-green); }
    .bg-dk-green, .bull-dk-green li:before { background-color: var(--colour-dk-green); }
    .bg-olive, .bull-olive li:before { background-color: var(--colour-olive); }
    .bg-green-blue, .bull-green-blue li:before { background-color: var(--colour-green-blue); }
    .bg-cyan, .bull-cyan li:before { background-color: var(--colour-cyan); }
    .bg-lt-cyan, .bull-lt-cyan li:before { background-color: var(--colour-lt-cyan); }
    .bg-lt-blue, .bull-lt-blue li:before { background-color: var(--colour-lt-blue); }
    .bg-navy, .bull-navy li:before { background-color: var(--colour-navy); }
    .bg-royal-blue, .bull-royal-blue li:before { background-color: var(--colour-royal-blue); }
    .bg-violet, .bull-violet li:before { background-color: var(--colour-violet); }
    .bg-dk-violet, .bull-dk-violet li:before { background-color: var(--colour-dk-violet); }
    .bg-indigo, .bull-indigo li:before { background-color: var(--colour-indigo); }
    .bg-brown, .bull-brown li:before { background-color: var(--colour-brown); }
    .bg-cute-pink, .bull-cute-pink li:before { background-color: var(--colour-cute-pink); }
    .bg-hot-pink, .bull-hot-pink li:before { background-color: var(--colour-hot-pink); }
    .bg-magenta, .bull-magenta li:before { background-color: var(--colour-magenta); }
    .bg-lt-grey, .bull-lt-grey li:before { background-color: var(--colour-lt-grey); }
    .bg-mid-grey, .bull-mid-grey li:before { background-color: var(--colour-mid-grey); }
    .bg-dk-grey, .bull--dk-grey li:before { background-color: var(--colour-dk-grey); }
    .bg-slate, .bull-slate li:before { background-color: var(--colour-slate); }
    .bg-purple, .bull-purple li:before { background-color: var(--colour-purple); }
    .bg-lt-purple, .bull-lt-purple li:before { background-color: var(--colour-lt-purple); }

    .bg-primary, .bull-primary li:before { background-color: var(--colour-primary); }
    .bg-highlight, .bull-highlight li:before { background-color: var(--colour-highlight); }
    .bg-page { background-color: var(--colour-page); }

	.border-black { border-color: var(--colour-black); }
    .border-lt-black { border-color: var(--colour-lt-black); }
	.border-white { border-color: var(--colour-white); }
    .border-dk-red { border-color: var(--colour-dk-red); }
	.border-red { border-color: var(--colour-red); }
    .border-yellow { border-color: var(--colour-yellow); }
    .border-lt-yellow { border-color: var(--colour-lt-yellow); }
    .border-tangerine { border-color: var(--colour-tangerine); }
    .border-orange { border-color: var(--colour-orange); }
    .border-amber { border-color: var(--colour-amber); }
    .border-mint { border-color: var(--colour-mint); }
    .border-lt-green { border-color: var(--colour-lt-green); }
    .border-mid-green { border-color: var(--colour-mid-green); }
    .border-dk-green { border-color: var(--colour-dk-green); }
    .border-olive { border-color: var(--colour-olive); }
    .border-green-blue { border-color: var(--colour-green-blue); }
    .border-cyan { border-color: var(--colour-cyan); }
    .border-lt-cyan { border-color: var(--colour-lt-cyan); }
    .border-lt-blue { border-color: var(--colour-lt-blue); }
    .border-navy { border-color: var(--colour-navy); }
    .border-royal-blue { border-color: var(--colour-royal-blue); }
    .border-violet { border-color: var(--colour-violet); }
    .border-dk-violet { border-color: var(--colour-dk-violet); }
    .border-indigo { border-color: var(--colour-indigo); }
    .border-brown { border-color: var(--colour-brown); }
    .border-cute-pink { border-color: var(--colour-cute-pink); }
    .border-hot-pink { border-color: var(--colour-hot-pink); }
    .border-magenta { border-color: var(--colour-magenta); }
    .border-lt-grey { border-color: var(--colour-lt-grey); }
    .border-mid-grey { border-color: var(--colour-mid-grey); }
    .border-dk-grey { border-color: var(--colour-dk-grey); }
    .border-slate { border-color: var(--colour-slate); }
    .border-purple { border-color: var(--colour-purple); }
    .border-lt-purple { border-color: var(--colour-lt-purple); }
    .border-primary { border-color: var(--colour-primary); }
    .border-highlight { border-color: var(--colour-highlight); }
    .border-page { border-color: var(--colour-page); }
    
    
/* RESPONSIVE  ---------------------------------------- */


@media only screen and (max-width : 1319px) {
    :root {
        --width-large: 100%;
        --gap-big: 65px;
        --gap-small: 30px;
    }
    .block { box-sizing: border-box; }
    .tagline { font-size: 4.5rem; }
    h1, h2 { font-size: 3.2rem; }
    h3 {  font-size: 2.4rem; }
    h6, p.h6 { font-size: 2.1rem; }
    
}


@media only screen and (max-width : 1023px) {
    :root {
        --width-medium: 100%;
    }
    .tagline { font-size: 4.2rem; }
    h1, h2 { font-size: 3.0rem; }
    h3 {  font-size: 2.2rem; }
    h6, p.h6 { font-size: 2.0rem; }
}


@media only screen and (max-width : 767px) {
    :root {
        --width-narrow: 100%;
        --gap-big: 50px;
        --gap-small: 25px;     
        --font-size: 1.8rem;        
    }

    .tagline { font-size: 3.6rem; }
    h1, h2 { font-size: 2.8rem; }
    
    header .block { justify-items: center; }
    .menu-main { width: 100%; text-align: center; margin-bottom: var(--gap-small); order: -1; }
    .logo-top { width: 70%; min-width: 280px; margin: 0 auto; }
    footer .row { flex-flow: row wrap; }
    footer p { flex: 1 1 100%; margin: 20px 0 0; }
    footer .block .col:nth-child(2) { flex: 1 1 100%; }
    footer .social { float: none; margin: 30px 0 0; }
    footer img { max-width: 250px; }
    footer ul li { padding-right: 15px; }
}


@media only screen and (max-width : 639px) {
    :root {
        --gap-big: 40px;
        --gap-small: 20px;        
        --horiz-margins: 20px;        
    }

    h1, h2 { font-size: 2.4rem; }
    h3 {  font-size: 2.0rem; }
    
    .tagline { font-size: 3.0rem; }
    .menu-main li { font-size: 1.8rem; }
}


@media only screen and (max-width : 480px) {
    .tagline { font-size: 2.4rem; }
    .content-card p.contact a { display: block; }
    img.contact { height: 95px; bottom: 28px; }

}


@media only screen and (max-width : 374px) {
    .tagline { font-size: 2.0rem; }
}