/* WEB 2.0 - TOS */
@import url("https://use.typekit.net/caq1usf.css");
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


/* index
    0. general
    1. variables
    2. breakpoints
    3. typography
    5. misc
*/

/* variables */
    :root {

        overflow-y: scroll;

        --font_heading: "Arial Nova", sans-serif;
        --font_body: "Arial Nova", sans-serif;

        --color_white:      #FFFFFF;
        --color_black:      #181717;
        --color_true_black: #000000;

    /* color palette */    
        --color_primary:    #CB4C48;
        --color_secondary:  #9E3036;
        --color_tertiary:   #95BABC;
        --color_quaternary: #263947;
        --color_quinary:    #DCD57E;

        --color_key:        #2D2D2D;
        --color_bg:         #fffbfb;
        --color_bg_top:     #ffffff;

        --color_warning:    #FAEA96;
        --color_critical:   #FF8674;

        /* gradients */
            /* gradients for primary  */
                --color_primary_75: #D87976;
                --color_primary_50: #E5A5A3;
                --color_primary_25: #F2D2D1;
                --color_primary_10: #FAEDEC;

            /* gradients for secondary */
                --color_secondary_75: #B66468;
                --color_secondary_50: #CE979A;
                --color_secondary_25: #E7CBCC;
                --color_secondary_10: #F5EAEA;

            /* gradients for tertiary */
                --color_tertiary_75: #AFCBCD;
                --color_tertiary_50: #CADCDD;
                --color_tertiary_25: #E4EEEE;
                --color_tertiary_10: #F4F8F8;

            /* gradients for quaternary */
                --color_quaternary_75: #5C6A75;
                --color_quaternary_50: #929BA2;
                --color_quaternary_25: #C8CDD1;
                --color_quaternary_10: #E9EBEC;

            /* gradients for quinary */
                --color_quinary_75: #E5DF9E;
                --color_quinary_50: #EDEABE;
                --color_quinary_25: #F6F5DE; 
                --color_quinary_10: #FCFBF2;


    /* shadows */
        --shadow_box: 0 0 13px 0 rgba(0,0,0,.05),0 0 2px 0 rgba(0,0,0,.05);
        --shadow_box_hover: 0px 1px 13px 0 rgb(0,0,0,.3),0 0 2px 0 rgba(0,0,0,.05);
        --shadow_button: 0 0 13px 0 rgba(0,0,0,.05),0 0 2px 0 rgba(0,0,0,.05);

    /* border radius */
        --small_radius: 4px;
        --border_radius_buttons: 4px;
        --border_radius_cards: 4px;
        --border_radius_container: 4px;
    
    /* :-) */
        --eyes: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 40 40"><g data-name="Group 428" clip-path="url(%23a)"><g fill="none" stroke-linecap="round"><g data-name="Path 257"></g><path data-name="Path 258" d="M14.205 16.288v.018m11.59-.018v.018" stroke="%232d2d2d" stroke-width="5"/></g></g></svg>');
        --face: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18" fill="white" stroke="white" stroke-width="2"/></svg>');
        --mouth:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 40 40"><g data-name="Group 428" clip-path="url(%23a)"><g fill="none" stroke-linecap="round"><path data-name="Path 259" d="M27.061 25.833c-.883 2.093-3.16 4.185-7.061 4.185s-6.178-2.092-7.061-4.185" stroke="%232d2d2d" stroke-linejoin="round" stroke-width="2"/></g></g></svg>');
}

/* breakpoints

    | mobile |     tablet    | desktop |
    | > 640  | 640 <-> 1024  | < 1024  |

    elephant    = 1670px    desktop
    rhino       = 1520px    desktop
    horse       = 1400px    desktop
    lion        = 1100px    desktop
    wolf        = 1024px    tablet
    dog         = 768px     tablet
    cat         = 640px     mobile  ฅ^•ﻌ•^ฅ
    rabbit      = 460px     mobile
    rat         = 360px     mobile 

*/

/* smaller than cat */
    @media (max-width: 640px) {
        html {
            font-size: 14px;
        }
    }
    /* Larger than cat */
    @media (min-width: 640px) {
        html {
            font-size: 18px;
        }
    }

/* typography */
    body {
        font-family: var(--font_body);
        background-color: var(--color_bg);
    }

    a {
        color: var(--color_primary);
    }
    a:visited {
        color: var(--color_primary);
    }

    p {
        font-size: 1rem!important;
        line-height: 1.25rem!important;
        color: var(--color_key);
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h1 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 2.5rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h2 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 2rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h3 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 1.5rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h4 {
        font-family: var(--font_body);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 1.25rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    .btn, .rt-button--brand-1, .rt-button--brand-2, .rt-button--brand-3, .rt-button--brand-4,.rt-button--link-color, .rt-button--link-color-inverted{
        font-size: 1.2rem;
        font-family: var(--font_body);
        font-weight: 400;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
    }

    a.a-arrow-link.a-arrow-link{   /* Fix for arrowlink */ 
        margin-left: 0 !important;
    }

/* Buttons */ 
    /* Default */ 
        .btn.btn--default.btn--primary,.rt-button--link-color {
            padding: 12px 24px 12px 24px !important;
            min-width: 0;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_tertiary);
        }
            .btn.btn--default.btn--primary:hover,.rt-button--link-color:hover {
                    background: var(--color_tertiary_75);
            }

            .btn.btn--primary.btn--default {
                color: var(--color_white);
            }

    /* Default Secondary */ 
        .btn.btn.btn--secondary.btn--default,.rt-button--link-color-inverted{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            border: solid 3px;
            border-color: var(--color_tertiary);
        }
            .btn.btn.btn--secondary.btn--default:hover ,.rt-button--link-color-inverted:hover{
                background: var(--color_tertiary_25);
                color: var(--color_black);
            }


    /* Brand 1 */ 
        .btn.btn--primary.btn--brand-1,.rt-button--brand-1 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_key);
        }
            .btn.btn--primary.btn--brand-1:hover ,.rt-button--brand-1:hover{
                    background: var(--color_primary_75);
                    color: var(--color_white);
            }

            .rt-button--brand-1:active {
                font-size: 1.2rem;
            }

    /* Brand 1 Secondary */ 
        .btn.btn.btn--secondary.btn--brand-1, .rt-button--brand-3 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_primary);
        }
            .btn.btn.btn--secondary.btn--brand-1:hover ,.rt-button--brand-3:hover{
                background: var(--color_primary_25);
                color: var(--color_black);
            }


    /* Brand 1 Inverted*/ 
        .btn.btn--primary.btn--brand-1.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_primary);
        }
            .btn.btn--primary.btn--brand-1.btn--invert:hover {
                background: var(--color_primary_25);
                color: var(--color_primary);
            }

    /* Brand 1 Inverted Secondary */ 
        .btn.btn.btn--secondary.btn--brand-1.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_white);
            border: solid 3px;
            border-color: var(--color_white);
        }
            .btn.btn.btn--secondary.btn--brand-1.btn--invert:hover {
                background: var(--color_primary_75);
                color: var(--color_white);
            }



    /* Brand 2 */ 
        .btn.btn--primary.btn--brand-2 , .rt-button--brand-2 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_key);
        }
            .btn.btn--primary.btn--brand-2:hover ,.rt-button--brand-2:hover{
                background: var(--color_tertiary_75);
                color: var(--color_white);
            }
                        /* Brand 2 Rich text */
                        .rt-button--brand-2:active {
                            font-size: 1.2rem;
                        }

    /* Brand 2 Secondary */ 
        .btn.btn.btn--secondary.btn--brand-2, .rt-button--brand-4 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_quaternary);
        }
            .btn.btn.btn--secondary.btn--brand-2:hover ,.rt-button--brand-4:hover{
                background: var(--color_quaternary_25);
                color: var(--color_black);
            }


    /* Brand 2 Inverted*/ 
        .btn.btn--primary.btn--brand-2.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_key);
            color: var(--color_quaternary);
        }
            .btn.btn--primary.btn--brand-2.btn--invert:hover {
                background: var(--color_black);
                color: var(--color_quaternary);
            }

    /* Brand 2 Inverted Secondary */ 
        .btn.btn.btn--secondary.btn--brand-2.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_quaternary);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_key);
        }
            .btn.btn.btn--secondary.btn--brand-2.btn--invert:hover {
                background: var(--color_quaternary_75);
                color: var(--color_key);
            }
        
/* Stop that funky button transforming */
    .a-arrow-link:active .a-arrow-link__text {
        transform: none;
    }




/* misc */
    /* highlighting text */
    /*
        ::-moz-selection {  background-color: var(--color_primary_75);  }
        ::selection {   background-color: var(--color_primary_75);  }
    */

    /* Sitecore fix for teaser-list with 3 or 4 items */
        .frame.teaser-list.teaser-list--3-items .scLooseFrameZone.scEnabledChrome a.btn.btn--default.btn--primary::after, .frame.teaser-list.teaser-list--4-items .scLooseFrameZone.scEnabledChrome a.btn.btn--default.btn--primary::after {
            display: none;
        }