/* ------------------------------ */
/* STANDARD VARIABLES  STYLES */
/* calculator logic: */
/* at with of 320 font size of 12 */
/* at with of 1600 font size of 20 */
/* ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

@media all {
    :root {
        /* fonts */
        --font-0: "Lato", serif;               /* H1=H6 (Only use font-weight-bolder for all, since that is what design calls for) */
        --font-1: "Lato", serif;                   /* standard text */

        --font-awesome: "Font Awesome 5 Free";      /* only use when using unicode */

        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-bold: 700;
        --font-weight-bolder: 900;

        --font-size-5S: clamp(0.30rem, calc(0.27rem + 0.14vw), 0.41rem);
        --font-size-4S: clamp(0.36rem, calc(0.32rem + 0.19vw), 0.51rem);
        --font-size-3S: clamp(0.43rem, calc(0.38rem + 0.26vw), 0.64rem);
        --font-size-2S: clamp(0.52rem, calc(0.45rem + 0.35vw), 0.80rem);
        --font-size-1S: clamp(0.63rem, calc(0.53rem + 0.47vw), 1.00rem);
        --font-size-0: clamp(0.75rem, calc(0.63rem + 0.63vw), 1.25rem);
        --font-size-1L: clamp(0.90rem, calc(0.73rem + 0.83vw), 1.56rem);
        --font-size-2L: clamp(1.08rem, calc(0.86rem + 1.09vw), 1.95rem);
        --font-size-3L: clamp(1.30rem, calc(1.01rem + 1.43vw), 2.44rem);
        --font-size-4L: clamp(1.56rem, calc(1.18rem + 1.87vw), 3.05rem);
        --font-size-5L: clamp(1.87rem, calc(1.38rem + 2.44vw), 3.82rem);

        /* padding and margins */
        --spacing-5S: clamp(0.06rem, calc(0.02rem + 0.23vw), 0.25rem);
        --spacing-4S: clamp(0.13rem, calc(0.08rem + 0.23vw), 0.31rem);
        --spacing-3S: clamp(0.19rem, calc(0.16rem + 0.16vw), 0.31rem);
        --spacing-2S: clamp(0.38rem, calc(0.31rem + 0.31vw), 0.63rem);
        --spacing-1S: clamp(0.56rem, calc(0.47rem + 0.47vw), 0.94rem);
        --spacing-0: clamp(0.75rem, calc(0.63rem + 0.63vw), 1.25rem);
        --spacing-1L: clamp(1.13rem, calc(0.94rem + 0.94vw), 1.88rem);
        --spacing-2L: clamp(1.50rem, calc(1.25rem + 1.25vw), 2.50rem);
        --spacing-3L: clamp(2.25rem, calc(1.88rem + 1.88vw), 3.75rem);
        --spacing-4L: clamp(3.00rem, calc(2.50rem + 2.50vw), 5.00rem);
        --spacing-5L: clamp(4.50rem, calc(3.75rem + 3.75vw), 7.50rem);

        /* colors - branding */
        --color-light-blue:#198fd9;
        --color-blue:#003a70;
        --color-dark-blue:#0b2030;

        --color-light-green:#1ea19f;
        --color-green:#007c7a;
        --color-dark-green:#015857;

        /* color - supporting */
        --color-white: #FFFFFF;
        --color-black: #191919;

        --color-red:#D93A3A;

        --color-lighter-gray: #fafafa;
        --color-light-gray: #f7f6f8;
        --color-gray: #edeff0;
        --color-dark-gray: #c5c5c5;
        --color-darker-gray: #555555;

        /* color - alert messages */
        --color-alert-red: #ad1c1c;
        --color-alert-yellow: #d09c02;
        --color-alert-green: #6ca820;
        --color-alert-gray: #c5c5c5;
    }
}

/* ------------------------------ */
/* STANDARD HTML STYLES */
/* ------------------------------ */
@media all {
    /* general CSS */
    *:not(p) { margin:0px; }
    *, *::before, *::after { box-sizing: border-box; }

    html { font-size:24px; background-color:var(--color-lighter-gray); }
    html, body { width:100%; min-height:100%; padding:0px; z-index:-2; }
    
    html { color:var(--color-black); line-height:1.3; }
    body { position:relative; max-width:1800px; margin:0px auto; font-family: var(--font-0); background-color: var(--color-white); -webkit-font-smoothing: antialiased; }

    hr { background-color:var(--color-light-gray); height:1px; border:0px; }

    a { color:var(--color-green); text-decoration:none; transition: all .5s ease 0s; }
    
    a:hover,
    a:focus { color:var(--color-dark-green); text-decoration:underline; }

    h1 { margin-bottom:var(--spacing-1S); color:var(--color-black); font-family:var(--font-0); font-size:var(--font-size-3L); line-height:1.2; font-weight:var(--font-weight-bolder); letter-spacing:1px; } 
    h2 { margin-bottom:var(--spacing-0); color:var(--color-black); font-family:var(--font-0); font-size:var(--font-size-2L); line-height:1.2; font-weight:var(--font-weight-bolder); letter-spacing:1px; }
    h2:not(:first-of-type) { margin-top:var(--spacing-1L);}

    h3 { margin-top:var(--spacing-1L); margin-bottom:var(--spacing-0); color:var(--color-black); font-family:var(--font-0); font-size:var(--font-size-1L); line-height:1; font-weight:var(--font-weight-bolder); }
    h4 { margin-top:var(--spacing-1L); margin-bottom:var(--spacing-0); color:var(--color-black); font-family:var(--font-0); font-size:var(--font-size-1L); line-height:1; font-weight:var(--font-weight-bolder); }
    h5 { margin-bottom:var(--spacing-2S); color:var(--color-black); font-family:var(--font-0); font-size:var(--font-size-1L); line-height:1; font-weight:var(--font-weight-bolder); }
    h6 { margin-bottom:var(--spacing-2S); color:var(--color-black); font-family:var(--font-0); font-size:var(--font-size-0); line-height:1; font-weight:var(--font-weight-bolder); }

    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    p:not(:last-of-type) { margin-bottom:var(--spacing-0); }

    img	{ padding:0px; border:0px; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }

    ul { position:relative; list-style-type:disc; }
    li { position:relative; }

    ul.no_bullets,
    ol.no_bullets { padding:0px; list-style:none; }

    ol { margin-bottom: var(--spacing-2L);}
    ol > li { margin-bottom: var(--spacing-1L);}

    /* ---- tables --- */
    table { width:100%; border-collapse:collapse; }
    table th { text-align:left; }

    /* start inputs */
    input, button, textarea, select { position:relative; font:inherit; }

    input, 
    textarea,
    select { font-size:var(--font-size-1S); background-color:var(--color-white);  -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; }

    input:not([type='checkbox'], [type='radio']),
    input[type="submit"],
    select,
    textarea { -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:5px; }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible { outline:none; }

    /* width calculation takes into account padding + border width*/
    input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button']),
    select,
    textarea { padding:var(--spacing-2S); width:calc(calc(100% - calc(var(--spacing-2S) * 2)) - 4px); vertical-align:middle; border:2px var(--color-dark-gray) solid; }

    input[disabled='disabled'],
    input[disabled],
    textarea[disabled='disabled'],
    textarea[disabled],
    input[type=text]:read-only { color:var(--color-black); background-color:var(--color-light-gray); border:0px; }

    select { background-size:var(--font-size-0); background-position:right var(--spacing-3S) center; background-repeat:no-repeat; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m480 705 173-173-43-42-130 130-130-130-43 42 173 173Zm0 271q-82 0-155-31.5t-127.5-86Q143 804 111.5 731T80 576q0-83 31.5-156t86-127Q252 239 325 207.5T480 176q83 0 156 31.5T763 293q54 54 85.5 127T880 576q0 82-31.5 155T763 858.5q-54 54.5-127 86T480 976Zm0-60q142 0 241-99.5T820 576q0-142-99-241t-241-99q-141 0-240.5 99T140 576q0 141 99.5 240.5T480 916Zm0-340Z"/></svg>'); }
    select::-ms-expand { display:none; }

    fieldset { border:0px; padding:0px; }
    /* end inputs */

    /* start text */
    .smaller_text { font-size:var(--font-size-2S); }
    .small_text { font-size:var(--font-size-1S); }
    .large_text { font-size:var(--font-size-1L); }
    .larger_text { font-size:var(--font-size-2L); }
    .largest_text { font-size:var(--font-size-3L); }

    .bold_text { font-weight:var(--font-weight-bold); }
    .bolder_text { font-weight:var(--font-weight-bolder); }

    .italic_text { font-style:italic; }

    .uppercase_text { text-transform:uppercase; }
    .no_uppercase { text-transform:none; }
     /* end text */

    /* start controls */
    .control_small_width { width:10% !important; min-width:100px; }
    .control_quarter_width { width:25%  !important; }
    .control_half_width { width:50% !important; }
    .control_three_quarters_width { width:75%  !important; }
    /* end controls */

    /* start buttons */
    .input_button,
    .link_as_button { display:inline-block; padding:var(--spacing-1S); font-size:var(--font-size-2S); font-weight:var(--font-weight-bold); color:var(--color-white); background-color:var(--color-green); border:0px; border-radius:5px; line-height:1; letter-spacing:1px; cursor:pointer;} 

    .input_button:hover,
    .input_button:focus,
    .link_as_button:hover,
    .link_as_button:focus { color:var(--color-white); background-color:var(--color-dark-green); border:1px var(--color-dark-green) solid;}

    .input_button:disabled,
    .link_as_button:disabled { color:var(--color-white); background-color:var(--color-dark-gray);  border:1px var(--color-dark-gray) solid; cursor:default;}

    .input_button.arrow_button,
    a.arrow_button { display: inline-flex; align-items:center; justify-content:space-between; }

    .input_button.arrow_button:after,
    a.arrow_button:after { content:'\f061'; margin-left:var(--spacing-2S); font-family:var(--font-awesome); font-weight:var(--font-weight-bolder); }

    .input_button.download_button,
    a.download_button { display: inline-flex; align-items:center; justify-content:space-between; }

    .input_button.download_button:before,
    a.download_button:before { content:'\f358 \00a0\00a0'; font-family:var(--font-awesome); font-weight:var(--font-weight-bolder); }

    .arrow_button_next { padding-right:var(--spacing-2L); background-repeat: no-repeat; background-size: var(--font-size-1S); background-position: right var(--spacing-0) center; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"%3E%3Cpath d="m480 896-42-43 247-247H160v-60h525L438 299l42-43 320 320-320 320Z" fill="%23ffffff" /%3E%3C/svg%3E');}
    .arrow_button_previous { padding-left: var(--spacing-2L); background-repeat: no-repeat; background-size: var(--font-size-1S); background-position: left var(--spacing-0) center; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"%3E%3Cpath d="M480 896 160 576l320-320 42 42-248 248h526v60H274l248 248-42 42Z" fill="%23ffffff" /%3E%3C/svg%3E');}

    .black_button { background-color:var(--color-black); color:var(--color-white); }
    .black_button:hover,
    .black_button:focus { background-color:var(--color-blue); color:var(--color-white); }

    .red_button { background-color:var(--color-red); }
    .red_button:hover,
    .red_button:focus { color:var(--color-white); background-color:var(--color-dark-red); }

    .blue_button { background-color:var(--color-blue); border:1px var(--color-white) solid; }
    .blue_button:hover,
    .blue_button:focus { color:var(--color-blue); background-color:var(--color-white); }

    .green_button { background-color:var(--color-green) !important; }
    .green_button:hover,
    .green_button:focus { color:var(--color-green) !important; background-color:var(--color-white)!important; }

    .transparent_button { color:var(--color-black); background-color:transparent; border:1px var(--color-black) solid; }
    .transparent_button:hover,
    .transparent_button:focus { color:var(--color-white); background-color:var(--color-black); }
    /* end buttons */

    /* flex and grid */
    .is_flex { display:flex; align-items: center; }
    .is_grid { display:grid; grid-template-columns: repeat(2, 1fr); }

    /* form */
    .form_box { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--spacing-0); list-style:none; }
    .form_box > div { position:relative; }
    .form_box > div.full_row { padding:0px; grid-column: 1 / -1 }

    .form_box > div label { display: block; margin-bottom: var(--spacing-3S); font-weight:var(--font-weight-bold); letter-spacing:1px; z-index:2; transition: top 0.3s ease-in-out;}

    .form_box > div .input_error { border-bottom: 4px var(--color-red) solid; }

    .form_box > div:focus-within textarea { height:7rem; }

    .form_box > div .form_error { font-size: 0.85rem; color: var(--color-red); }
    
    .form_error_box { color: var(--color-red); }
    /* end form */

    .split_group { display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-1L); }
    .split_group .form_box > div { padding:0px; grid-column: 1 / -1 }

    /* start message */
    .message { display:block; margin-bottom:var(--spacing-1S); border-radius:5px; }

    .message.error { background-color:var(--color-alert-red); }
    .message.warning { background-color:var(--color-alert-yellow); }
    .message.ok { background-color:var(--color-alert-green); }
    .message.nothing_defined { background-color:var(--color-alert-gray); }

    .message .body { padding:var(--spacing-2S); color:var(--color-white); }
    /* end message */

    /* alignments */
    .left { text-align:left; }
    .right { text-align:right; }
    .center { text-align:center; }
    /* end alignments */

    /*required*/
    .required { position:absolute; top:0px; right:0px; z-index:1; padding:2px 8px; color:var(--color-red); font-size:var(--font-size-2S); } 
    /*end required*/

    /* catcpha */
    .catcpha { font-size:1.1rem; letter-spacing:2px; }
    /* end catcpha */

    /* other */
    .hide { display:none; }

    /* used for row with back link on blog pages */
    .back_row { margin-bottom:var(--spacing-1S); padding-bottom:var(--spacing-1S); border-bottom:1px rgba(255,255,255,.4) solid; }
    .back_row a { display: inline-flex; font-weight:var(--font-weight-bold); letter-spacing:2px; align-items:center; justify-content:space-between; }
    .back_row a:before { content:'\f060'; margin-right:var(--spacing-2S); font-family:var(--font-awesome); font-weight:var(--font-weight-bolder); }
}

/* ------------------------------ */
/* MAIN BODY ROWS */
/* ------------------------------ */
@media all {
    main { clear:both; }
    main ul { margin-bottom:var(--spacing-1L); }

    #content a:not(.link_as_button) {  text-decoration:underline; }
    #content a:not(.link_as_button):hover,
    #content a:not(.link_as_button):focus {  text-decoration:none; }

    .wrapper_row { position:relative; background-color:var(--color-white); }
    .container_row { position:relative; margin:0px auto; width:90%; max-width:1400px; }
    .container_row_content { position:relative; padding:var(--spacing-5L) 0px; }

    .container_row_content.padding_top_bottom_1 { padding-top:var(--spacing-1L); padding-bottom:var(--spacing-1L); }
    .container_row_content.padding_top_bottom_2 { padding-top:var(--spacing-2L); padding-bottom:var(--spacing-2L); }
    .container_row_content.padding_top_bottom_3 { padding-top:var(--spacing-3L); padding-bottom:var(--spacing-3L); }
    .container_row_content.padding_top_bottom_4 { padding-top:var(--spacing-4L); padding-bottom:var(--spacing-4L); }

    .width_400 { max-width:400px; }
    .width_500 { max-width:500px; }
    .width_600 { max-width:600px; }
    .width_800 { max-width:800px; }
    .width_1000 { max-width:1000px; }
    .width_1200 { max-width:1200px; }
    .width_1400 { max-width:1400px; }
    .width_1600 { max-width:1600px; }

    .center_div { margin-right:auto; margin-left:auto; }

    /*-----------------------------*/
    /* HEADER */
    /*-----------------------------*/
    header { position:fixed; top:0px; right:0px; left:0px; z-index:1000; }
    header .container_row_content { padding:var(--spacing-2S) 0px; }

    header.scroll { position:fixed; top:0px; right:0px; left:0px; background-color:var(--color-white); border-bottom:1px var(--color-green) solid; z-index:1000; }

    header a.rd_menu_button { display:none; }

    header nav { display:grid; grid-template-columns:2fr 8fr; align-items:center; gap:var(--spacing-2S); }
    header nav .logo a { display: inline-block; }
    header nav .logo img { width:96%; max-width:250px; }

    header nav ul.menu_list { display:flex; gap:var(--spacing-1L); align-items:center; justify-content:end; }

    header nav ul.menu_list li.icon { margin-left:var(--spacing-2S); }

    header nav ul.menu_list a { position: relative; display:block; font-size:var(--font-size-2S); font-weight:var(--font-weight-bold); color:var(--color-dark-blue); line-height: 1; }
    header nav ul.menu_list a.link_as_button { padding:var(--spacing-2S); color:var(--color-white); }

    header nav ul.menu_list a.selected:not(.link_as_button),
    header nav ul.menu_list a:hover:not(.link_as_button),
    header nav ul.menu_list a:focus:not(.link_as_button) { color:var(--color-green);}

    header nav ul.menu_list a.accessibility { color:var(--color-blue); font-size:var(--font-size-2L); }
    header nav ul.menu_list a.accessibility:hover,
    header nav ul.menu_list a.accessibility:focus{ color:var(--color-green); }

    header nav ul.menu_list a.accessibility img { height:var(--font-size-1L); }
    header nav ul.menu_list a.accessibility:hover img,
    header nav ul.menu_list a.accessibility:focus img { opacity:.8; animation: pulse 1s infinite ease-in-out; }

    /*-----------------------------*/
    /* HERO */
    /*-----------------------------*/
    #hero:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 20vh;  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); pointer-events: none; z-index:501; }
    #hero .container_row { top:50%; transform:translateY(-50%); z-index:500; }

    /*-----------------------------*/
    /* FOOTER */
    /*-----------------------------*/
    footer { position: relative; background-color:var(--color-black); color:var(--color-white); overflow: hidden; }
    footer .container_row_content { position: relative; padding:calc(var(--spacing-5L) * 1.5) 0px var(--spacing-2L) 0px; z-index: 2; }

    footer .footer_group { gap:var(--spacing-3L); align-items:end; }
    footer .footer_group > div:nth-child(1) p { width:80%; font-size:var(--font-size-3L); font-weight:var(--font-weight-bolder); }

    footer .footer_group > div:nth-child(2) p.join { margin-bottom:var(--spacing-0); font-size:var(--font-size-0); font-weight:var(--font-weight-bolder);  }
    footer .footer_group > div:nth-child(2) ul.social_list { margin-top:var(--spacing-3L); justify-content:flex-end; gap:var(--spacing-2S); }
    footer .footer_group > div:nth-child(2) ul.social_list img { height:var(--spacing-1L); }
    footer .footer_group > div:nth-child(2) ul.social_list img:hover,
    footer .footer_group > div:nth-child(2) ul.social_list img:focus { opacity:.8; animation: pulse 1s infinite ease-in-out; }

    footer .legal_row { display:flex; align-items:center; font-size:var(--font-size-2S); }
    footer .legal_row .box { flex-basis:50%; }
    footer .legal_row .legal_links { justify-content:flex-end; gap:var(--spacing-1L); }

    footer .legal_row a { display:inline-block; font-size:var(--font-size-2S); color:var(--color-light-blue); text-transform:uppercase; }
    footer .legal_row a:hover,
    footer .legal_row a:focus { color:var(--color-white); }

    #sub_footer { font-size:var(--font-size-2S); border-top:1px rgba(255, 255, 255, .2) solid; }
    #sub_footer .sub_footer_group > div:nth-child(2) { text-align:right; }
    #sub_footer .sub_footer_group > div:nth-child(2) ul.legal_list { gap:var(--spacing-1S); justify-content:flex-end; }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
}

/* ------------------------------ */
/* BRAND SPECIFIC */
/* brand styles go here */
/* ------------------------------ */
@media all {
    /* see resource center for use */
    .brand_small_title { display:block; margin-bottom:var(--spacing-3S); color:var(--color-blue); font-size:var(--font-size-1S); font-weight:var(--font-weight-bold); text-transform:uppercase; letter-spacing:1px; }

    /* for hero */
    .brand_hero_title { width:50%; min-width:300px; margin-bottom:var(--spacing-0); font-size:var(--font-size-0); font-weight:var(--font-weight-bold); line-height:1; letter-spacing:2px; text-transform:uppercase; }
    .brand_hero_sub_title { width:50%; min-width:300px; font-size:var(--font-size-3L); font-weight:var(--font-weight-bolder); }

    /* brand background dividers */
    .brand_divider_blue_white { background-size:100vw; background-position:center top; background-repeat:no-repeat; background-image:url(/resources/images/common/other/i_divider_blue_white.jpg); }
    .brand_divider_green_white { background-size:100vw; background-position:center top; background-repeat:no-repeat; background-image:url(/resources/images/common/other/i_divider_green_white.jpg); }
    .brand_divider_white_blue { background-size:100vw; background-position:center top; background-repeat:no-repeat; background-image:url(/resources/images/common/other/i_divider_white_blue.jpg); }
    .brand_divider_white_green { background-size:100vw; background-position:center top; background-repeat:no-repeat; background-image:url(/resources/images/common/other/i_divider_white_green.jpg); }

    /* brand background colors */
    .brand_bg_blue { color:var(--color-white); background-color:var(--color-blue); }

    .brand_bg_blue h1,
    .brand_bg_blue h2,
    .brand_bg_blue h3,
    .brand_bg_blue h4 { color:var(--color-white); }

    .brand_bg_blue a { color:var(--color-white); text-decoration:underline; }
    
    .brand_bg_blue .link_as_button,
    .brand_bg_blue .input_button { color:var(--color-white); background-color:var(--color-blue); border:1px var(--color-white); text-decoration:none; }

    .brand_bg_blue .link_as_button:hover,
    .brand_bg_blue .link_as_button:focus,
    .brand_bg_blue .input_button:focus,
    .brand_bg_blue .input_button:hover { color:var(--color-blue); background-color:var(--color-white);}

    /* -- */ 
    .brand_bg_dark_blue { color:var(--color-white); background-color:var(--color-dark-blue); }

    .brand_bg_dark_blue h1,
    .brand_bg_dark_blue h2,
    .brand_bg_dark_blue h3,
    .brand_bg_dark_blue h4 { color:var(--color-white); }

    .brand_bg_dark_blue a { color:var(--color-white); text-decoration:underline; }
    
    .brand_bg_dark_blue .link_as_button,
    .brand_bg_dark_blue .input_button { color:var(--color-white); background-color:var(--color-dark-blue); border:1px var(--color-white); text-decoration:none; }

    .brand_bg_dark_blue .link_as_button:hover,
    .brand_bg_dark_blue .link_as_button:focus,
    .brand_bg_dark_blue .input_button:focus,
    .brand_bg_dark_blue .input_button:hover { color:var(--color-dark-blue); background-color:var(--color-white);}

    /* brand for courses */
    .brand_course ul.course_list { margin-bottom:var(--spacing-2L); grid-template-columns:repeat(3, 1fr); gap:var(--spacing-1L); }
    .brand_course ul.course_list li { background-color:var(--color-white); border-radius:var(--spacing-2S); }

    .brand_course ul.course_list li .body { padding:var(--spacing-1S) var(--spacing-1S) var(--spacing-4L) var(--spacing-1S); }
    .brand_course ul.course_list li .body img.photo { margin-bottom:var(--spacing-2S); width:100%; height:calc(var(--spacing-5L) * 1.5); object-fit:cover;  background-color:var(--color-dark-green);  border-radius:var(--spacing-2S); }

    .brand_course ul.course_list li .body .date { font-size:var(--font-size-2S); }
    .brand_course ul.course_list li .body p.title { margin-top:var(--spacing-3S); margin-bottom:var(--spacing-2S); font-weight:var(--font-weight-bolder); }

    .brand_course ul.course_list li .body a.link_as_button { position:absolute; bottom:var(--spacing-1S); left:var(--spacing-1S); z-index:1; }

    .brand_label_row { margin-bottom:var(--spacing-1S); gap:var(--spacing-3S); }
    .brand_label_row .brand_label { display:inline-block; padding:var(--spacing-4S); color:var(--color-white); font-size:var(--font-size-4S); text-transform:uppercase; line-height:1; }
    .brand_label_row .brand_label.course_new { background-color:var(--color-light-green); }
    .brand_label_row .brand_label.course_required { background-color:var(--color-light-blue); }
    .brand_label_row .brand_label.category { background-color:var(--color-blue); }

}

@media all {
    #course_options_box { display:grid; margin-bottom:var(--spacing-1L); padding-bottom:var(--spacing-2S); grid-template-columns:1fr 1fr;  border-bottom:1px var(--color-dark-gray) solid; }
    #course_options_box > div:nth-child(2) { text-align:right; }

    .course_page_count ul { display:flex; margin:0px; padding:0px; list-style:none; gap:var(--spacing-1S); justify-content:flex-end; }

    .question_row { border-bottom:1px #ebebeb solid; margin:1em 0em .5em 0em; padding:1em 0em 1em 0em; }
    .answer_row { margin:0em 0em .5em 0em; padding:0em 0em 0em 1em; }
    .right_answer { color:#36999f; padding:.1em; }
    .wrong_answer { color:#CC0000; padding:.1em; }

    #payment_form { clear:both; margin:1em 0em 1em 0em; }
    #payment_billing { float:left; width:50%; }
    #payment_credit_card { float:right; width:48%; }

    .payment_row { clear:both; font-size:.8em; font-weight:600; }

    .discount_code_checking { color:#ec8c1a; }
    .discount_code_ok{ color:#3cae30; }\
    .discount_code_error { color:#f44d4d; }
}

@media (max-width:1600px) {

}

@media (max-width:1400px) {
    html { font-size:20px; }
    header nav ul.menu_list a { font-size:var(--font-size-1S); }

    .brand_label_row .brand_label { font-size:var(--font-size-3S); }
}

@media (max-width:1300px) {
    header nav ul.menu_list { gap:var(--spacing-1S); }
}

@media (max-width:1200px) {
    html { font-size:18px; }
   
    header .container_row_content { padding:var(--spacing-1S) 0px; grid-template-columns:1fr 1fr; }

    header a.rd_menu_button { position:absolute; display:block; padding:var(--spacing-2S); top:50%; right:0px; transform:translateY(-50%); font-size:var(--font-size-2L); color:var(--color-white); background-color:var(--color-blue); cursor:pointer; border-radius:5px; z-index:1200; }
    header a.rd_menu_button:hover,
    header a.rd_menu_button:focus { text-decoration:none; color:var(--color-light-blue); }

    header nav ul.menu_list { position:fixed; display:none; top:0px; right:0px; bottom:0px; left:0px; background-color:var(--color-black); z-index:1100;  }
    
    header nav ul.menu_list li { margin-left:10%;}
    header nav ul.menu_list li:first-of-type { margin-top:var(--spacing-5L); }
    header nav ul.menu_list li a { display:inline-block; margin:var(--spacing-0) 0px; color:var(--color-white); font-size:var(--font-size-4L); font-weight:var(--font-weight-light); line-height:1; }
    
    header nav ul.menu_list li a.link_as_button { display:inline-block; padding:0px; background-color:transparent; }

    header nav ul.menu_list a.accessibility img {height: var(--font-size-4L);}

    .container_row_content { position:relative; padding:var(--spacing-5L) 0px var(--spacing-3L) 0px; }

    .brand_label_row .brand_label { font-size:var(--font-size-2S); }
    .brand_course ul.course_list li .body .date  { font-size:var(--font-size-1S); }

    .input_button,
    .link_as_button { font-size:var(--font-size-1S); }

    #sub_footer { font-size:var(--font-size-1S); }

    footer .footer_group > div:nth-child(2) ul.social_list img { height:var(--spacing-2L); }
}

@media (max-width:1000px) {
    .brand_course ul.course_list { grid-template-columns:1fr 1fr; }
}

@media (max-width:900px) {
    footer .container_row_content { padding-top:var(--spacing-3L); }
}

@media (max-width:800px) {
    footer .footer_group { gap:var(--spacing-0); grid-template-columns:6fr 4fr; }
}

@media (max-width:700px) {
    html { font-size:16px;}

     .input_button,
    .link_as_button { font-size:var(--font-size-0); }

    .brand_label_row .brand_label { padding:var(--spacing-2S); font-size:var(--font-size-0); text-transform:none;}
    .brand_course ul.course_list li .body .date { font-size:var(--font-size-0); }

    #sub_footer { font-size:var(--font-size-0); }
    #sub_footer .sub_footer_group { grid-template-columns:1fr; text-align:center; gap:var(--spacing-1S); }

    .split_group { grid-template-columns:1fr; gap:var(--spacing-3L); }
}

@media (max-width:600px) {
    .brand_course { margin:0px auto; width:80%;}
    .brand_course ul.course_list { grid-template-columns:1fr; }
    .brand_course ul.course_list li .body img.photo { height: calc(var(--spacing-5L) * 3); }

    footer .footer_group { grid-template-columns:1fr; text-align:center; }
    footer .footer_group > div:nth-child(1) p { width:100%; }
    footer .footer_group > div:nth-child(2) ul.social_list { margin-top:var(--spacing-1L); justify-content:center;}
}