/* WEB 2.0 - Telemark Sparebank */
@import url("https://use.typekit.net/aex4tct.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:      #2D2D2D;
        --color_true_black: #000000;
 
    /* color palette */    
        --color_primary:    #2D4D58;
        --color_secondary:  #ADCAB8;
        --color_tertiary:   #5489A3;
        --color_quaternary: #7B3939;
        --color_quinary:    #CFB023;
 
        --color_key:        #2D2D2D;
        --color_bg:         #e8efed;
        --color_bg_top:     #e8efed;
 
        --color_warning:    #FAEA96;
        --color_critical:   #FF8674;
 
        /* gradients */
            /* gradients for primary  */
                --color_primary_75: #617982;
                --color_primary_50: #95A5AB;
                --color_primary_25: #CAD2D5;
                --color_primary_10: #E9EDEE;
 
            /* gradients for secondary */
                --color_secondary_75: #C1D7CA;
                --color_secondary_50: #D6E4DB;
                --color_secondary_25: #EAF2ED;
                --color_secondary_10: #F7FAF8;
 
            /* gradients for tertiary */
                --color_tertiary_75: #7FA6BA;
                --color_tertiary_50: #A9C4D1;
                --color_tertiary_25: #D4E1E8;
                --color_tertiary_10: #EDF3F6;
 
            /* gradients for quaternary */
                --color_quaternary_75: #9C6A6A;
                --color_quaternary_50: #BC9B9B;
                --color_quaternary_25: #DECDCD;
                --color_quaternary_10: #F1EBEB;
 
            /* gradients for quinary */
                --color_quinary_75: #DBC45A;
                --color_quinary_50: #E7D790;
                --color_quinary_25: #F3EBC7; 
                --color_quinary_10: #FAF7E8;

    /* 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: 8px;
        --border_radius_cards: 16px;
        --border_radius_container: 32px;
    
    /* :-) */
        --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);
        font-variation-settings: 'wght' 400;
    }

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

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

    strong, b {    /* init for variable font */
        font-variation-settings: 'wght' 700;
    }

    h1 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_primary);
        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_primary);
        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_primary);
        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_primary);
        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_secondary);
            color: var(--color_white);
        }
            .btn.btn--default.btn--primary:hover,.rt-button--link-color:hover {
                    background: var(--color_secondary_75);
            }

    /* 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);
        }
            .btn.btn--primary.btn--brand-1:hover ,.rt-button--brand-1:hover{
                    background: var(--color_primary_75);
            }

            /* Brand 1 Rich text */
            .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);
            }

            .btn.btn--primary.btn--brand-1:hover ,.rt-button--brand-1:hover{
                background: var(--color_primary_75);
                color: var(--color_key);
            }




    /* 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_quaternary);
            color: var(--color_key);
        }
            .btn.btn--primary.btn--brand-2:hover ,.rt-button--brand-2:hover{
                background: var(--color_quaternary_75);
                color: var(--color_key);
            }
            /* 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;
    }

.rt-button--brand-1 a {
    color: var(--color_white)
}


/* 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;
        }