/* ------------------------------ */
/* STANDARD VARIABLES  STYLES */
/* calculator logic: */
/* at with of 320 font size of 12 */
/* at with of 1600 font size of 20 */
/* ------------------------------ */
@media all {
    :root {
        /* fonts */
        --font-0: 'Rubik', sans-serif;
        --font-1: 'Rubik', sans-serif;
        --font-2: 'Arial', sans-serif;

        --font-weight-normal: 300;
        --font-weight-bold: 400;
        --font-weight-bolder: 500;
        --font-weight-boldest: 600;

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

        --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-red:#ff7272;
        --color-red:#ff0000;
        --color-dark-red:#8a0303;

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

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

        --color-light-blue: #335977;
        --color-blue: #003055;
        --color-dark-blue: #01243f;

        /* 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 */
    * { 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.5; }
    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-red); text-decoration:none; transition: all .5s ease 0s; }
    a:hover,
    a:focus { color:var(--color-black); text-decoration:underline; }

    a[href^="tel:"] { color:var(--color-red); text-decoration:underline; letter-spacing:1px;  }

    h1,
    .fancy_title { margin-bottom:var(--spacing-1S); color:var(--color-red); font-family:var(--font-0); font-size:var(--font-size-3L); line-height:1.2; font-weight:var(--font-weight-boldest); text-align:center; text-transform:uppercase; letter-spacing:2px; } 

    h2 { margin-bottom:var(--spacing-2S); color:var(--color-black); font-family:var(--font-0); font-size:var(--font-size-1L); line-height:1.2; font-weight:var(--font-weight-bolder); text-transform:uppercase; letter-spacing:1.4px; } 
    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-1L); 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-bold); }
    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-bold); }
    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-bold); }

    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    p { 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-top: var(--spacing-0); margin-bottom: var(--spacing-0); padding-left:var(--spacing-0); }

    /* 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']),
    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 */
    .smallest_text { font-size:var(--font-size-3S); }
    .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); }
    .boldest_text { font-weight:var(--font-weight-boldest); }

    .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) var(--spacing-2L); font-size:var(--font-size-1S); color:var(--color-white); background-color:var(--color-red); border:0px; border-radius: 50px; line-height:1; letter-spacing:2px; cursor:pointer; } 

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

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

    .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-red); 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); }

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

    .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-size:var(--font-size-2S); 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 */


    /* start message */
    .message { display:block; }

    .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-1S); 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; background:linear-gradient(to left, #ef473a, #cb2d3e); 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); }

    .wrapper_row { position:relative; background-color:var(--color-white); }
    .wrapper_row:first-child { min-height:80vh; }

    .container_row { position:relative; margin:0px auto; width:96%; max-width:1200px; }
    .container_row_content { position:relative; padding:var(--spacing-3L) 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 button.rd_menu { display:none; }

    /* logo */
    header a#logo { display:inline-block; position:absolute; padding:0px var(--spacing-1L); top:50%; left:50%; transform:translate(-50%, -50%); z-index:1001; }

    header a#logo img { width:100%; max-width:300px; height:var(--font-size-5L); object-fit:contain; transition:all .5s ease 0s; }
    header a#logo img:hover, 
    header a#logo img:focus { transform: scale(1.1); }

    /* menu */
    header nav { display:block; }

    header #menu ul { display:flex; margin:0px; padding:var(--spacing-1L) 0px; gap:0px; list-style:none; text-align:center; }

    header #menu ul li { display:inline-block; margin:0px; padding:0px; width:9%; }
    header #menu ul li:nth-child(5) { margin-left:auto !important; }

    header #menu ul li:not(.icon):not(.divider) { margin:0px var(--spacing-4S); }

    header #menu ul li a { display:inline-block; color:var(--color-black); font-size:var(--font-size-2S); text-transform:uppercase; letter-spacing:1px; }
    header #menu ul li a.selected { font-weight:var(--font-weight-bold); border-bottom:2px var(--color-red) solid; }

    header #menu ul li:not(.icon) a:hover,
    header #menu ul li:not(.icon) a:focus-visible { border-bottom:2px var(--color-red) solid; text-decoration:none; transition:all .5s ease .2s;  }

    /* on scroll class */
    header.no_scroll { border:none; }
    header.scroll { position:fixed; top:0px; right:0px; left:0px; z-index:10000000; transition: all .5s ease 0s;  } 

    /*-----------------------------*/
    /* HERO */
    /*-----------------------------*/
    #hero { color:var(--color-white); text-align:center; }
    #hero .title { font-size:var(--font-size-4L); font-weight:var(--font-weight-bold); line-height:1.8; }
    #hero .sub_title { font-size:var(--font-size-1L); color:var(--color-white); }

    /*-----------------------------*/
    /* FOOTER */
    /*-----------------------------*/
    footer { position: relative; background-color:var(--color-black); color:var(--color-white); overflow: hidden; }
    footer .container_row_content { position: relative; padding:var(--spacing-0) 0px; font-size:var(--font-size-1S); text-align:right; }
}

/* ------------------------------ */
/* BRAND SPECIFIC */
/* brand styles go here */
/* ------------------------------ */
@media all {
    /* styles */
    .brand_style_1 .container_row { padding:var(--spacing-3L) 0px; }
    .brand_style_1 .container_row_content { min-height:50vh; padding:var(--spacing-3L); background-color:var(--color-white); border-radius:var(--spacing-1L); }

    /* background */
    .brand_background_gray { background-color:var(--color-light-gray); }
}

@media (max-width:1600px) {
    html { font-size:22px; }
}

@media (max-width:1400px) {
    html { font-size:20px; }

    .container_row { width:80%; }
    header .container_row,
    footer .container_row{ width:90%; }
}

@media (max-width:1200px) {
    html { font-size:18px; }

    header { background-color:var(--color-white); }
    header button.rd_menu { display:block; position:absolute; padding:var(--spacing-2S); top:50%; right:0px; transform:translateY(-50%); font-size:var(--font-size-2L); cursor:pointer; background-color:transparent; border:1px var(--color-black) solid; border-radius:var(--spacing-2S); z-index:10; }
    header button.rd_menu:hover { color:var(--color-white); background-color:var(--color-black); border-radius:0px; }
    
    header a#logo { position:relative; padding:var(--spacing-0) 0px; top:initial; left:initial; transform:initial; }
    header a#logo img { max-width:140px; height:initial; max-height:80px; }

    header nav { display:none; position: fixed; top: 0px; right: 0px; bottom: 0px; left:0px; z-index:5; }

    header #menu ul { position:absolute; display:grid; top:50%; left:10%; transform:translateY(-50%); grid-template-columns:1fr; gap:var(--spacing-1L); text-align:initial; }
    header #menu ul li { width:initial; }
    header #menu ul li a { font-size:var(--font-size-3L); }
    header #menu ul li a.selected { font-weight:var(--font-weight-bolder); }
    header #menu ul li:nth-child(5) { margin-left:initial !important; }
}

@media (max-width:1000px) {
    html { font-size:16px; }
   
    .container_row { width:90%; }
}

@media (max-width:700px) {

}

@media (max-width:500px) {

}