/* Minification failed. Returning unminified contents.
(2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,22): run-time error CSS1039: Token not allowed after unary operator: '-page-backcolor'
(53,17): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(60,32): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(76,27): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(77,16): run-time error CSS1039: Token not allowed after unary operator: '-white'
(119,21): run-time error CSS1039: Token not allowed after unary operator: '-darkwhite'
(173,28): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(174,28): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(181,17): run-time error CSS1039: Token not allowed after unary operator: '-white'
(229,28): run-time error CSS1039: Token not allowed after unary operator: '-white'
(230,17): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(231,24): run-time error CSS1039: Token not allowed after unary operator: '-white'
(236,38): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(239,38): run-time error CSS1039: Token not allowed after unary operator: '-white'
(243,26): run-time error CSS1039: Token not allowed after unary operator: '-control-back'
(244,28): run-time error CSS1039: Token not allowed after unary operator: '-control-back'
(245,20): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(278,28): run-time error CSS1039: Token not allowed after unary operator: '-control-back'
(287,17): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(292,35): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(293,45): run-time error CSS1039: Token not allowed after unary operator: '-control-back'
(297,21): run-time error CSS1039: Token not allowed after unary operator: '-placeholder'
(318,21): run-time error CSS1039: Token not allowed after unary operator: '-placeholder'
(323,16): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(324,27): run-time error CSS1039: Token not allowed after unary operator: '-darkwhite'
(336,23): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(387,22): run-time error CSS1039: Token not allowed after unary operator: '-page-backcolor'
(392,28): run-time error CSS1039: Token not allowed after unary operator: '-footer-backcolor'
(397,16): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(405,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(413,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(418,25): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(422,36): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(443,29): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(449,29): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(464,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(591,33): run-time error CSS1039: Token not allowed after unary operator: '-black-title'
(619,44): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(652,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(656,36): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(666,41): run-time error CSS1039: Token not allowed after unary operator: '-control-back'
(709,37): run-time error CSS1039: Token not allowed after unary operator: '-black-title'
(725,20): run-time error CSS1039: Token not allowed after unary operator: '-white'
(729,19): run-time error CSS1039: Token not allowed after unary operator: '-white'
(733,21): run-time error CSS1039: Token not allowed after unary operator: '-white'
(741,21): run-time error CSS1039: Token not allowed after unary operator: '-white'
(861,27): run-time error CSS1039: Token not allowed after unary operator: '-white'
(886,5): run-time error CSS1019: Unexpected token, found '}'
(941,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(942,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(1025,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1202,56): run-time error CSS1039: Token not allowed after unary operator: '-page-backcolor'
(1202,138): run-time error CSS1039: Token not allowed after unary operator: '-page-backcolor'
(1214,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1228,21): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(1232,21): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(1238,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1255,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(1262,21): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1266,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1713,26): run-time error CSS1039: Token not allowed after unary operator: '-box-background'
(1718,30): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(1723,30): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1728,29): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1732,29): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1736,29): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1748,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1755,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1762,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(1771,25): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(1896,25): run-time error CSS1039: Token not allowed after unary operator: '-white'
(1907,25): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(1928,21): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(2114,21): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(2133,36): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(2142,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(2143,14): run-time error CSS1035: Expected colon, found '{'
(2176,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(2188,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-text'
(2259,25): run-time error CSS1039: Token not allowed after unary operator: '-black-text'
(2368,30): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(2373,30): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
(2400,34): run-time error CSS1039: Token not allowed after unary operator: '-page-backcolor'
(2411,25): run-time error CSS1039: Token not allowed after unary operator: '-orange-text'
(2416,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-title'
 */
:root {
    --footer-backcolor: #eaeaef;
    --page-backcolor: #f5f5f7;
    --black-title: #1d1d1f;
    --blue-title: #213a8e;
    --gray-text: #666666;
    --placeholder:#888888;
    --orange-text: #f36f21;
    --white: #ffffff;
    --darkwhite: #ffffff;
    --box-background: #ffffff;
    --control-back: #ecf0f6;
    --black-text:#333;
}

@media (prefers-color-scheme: dark) {

    :root {
        --footer-backcolor: #1d1f20;
        --page-backcolor: #252b2c;
        --black-title: #1d1d1f;
        --blue-title: #ddd;
        --gray-text: #868686;
        --orange-text: #f36f21;
        --white: #eee;
        --darkwhite: #101112;
        --box-background: #1d1f20;
        --control-back: #34383b;
        --black-text: #eee;
    }


}

body {
    margin: 0px;
    font-family: 'Poppins', sans-serif;
    background: var(--page-backcolor);
    
}

body.menuvisible
{
    overflow:hidden;
}

[sameheightgroup]
{
    box-sizing:border-box;
}

a {
    color: var(--orange-text);
}



    a.ballon {
        text-decoration: none;
        border: 2px solid var(--orange-text);
        border-radius: 40px;
        padding: 10px 20px;
        margin-top: 10px;
        display: inline-block;
        cursor: pointer;
    }

a.ballon.mini
{
    padding:5px 10px;
    font-size:10pt;
}

a.ballon:hover
{
    background-color:var(--orange-text);
    color:var(--white);
}

.bold
{
    font-weight:400;
}

.bolder
{
    font-weight:600;
}

.follow  h4
{
    margin:0px;
}
.follow a {
    width: 32px;
    height: 32px;

    cursor: pointer;
    display: inline-block;
    position:relative;
}
    .follow a:after {
        content: " ";
        width: 24px;
        height: 24px;
        background: url('images/followus.svg') no-repeat 0px 0px;
        background-size: auto 24px;
        position:absolute;
        left:2px;
        top:2px;
    }

.follow a:before
{
    content:" ";
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--darkwhite);
    left:-4px;
    top:-4px;
    transform:scale(0.5);
    opacity:0;
    position:absolute;
    transition:all 300ms;
}
    .follow a:hover:before {
        transform: scale(1);
        opacity:1;
    }

    .follow a.facebook:after {
        background-position: -36px 0px;
    }
    .follow a.twitter:after {
        background-position: -72px 0px;
    }
    .follow a.instagram:after {
        background-position: 0px 0px;
    }
    .follow a.youtube:after {
        background-position: -108px 0px;
    }



.content {
    width: 1540px;
    margin: auto;
 
}

.darkmode , .lightmode
{
    display:none !important;
}

@media (prefers-color-scheme: dark) {
    .darkmode
    {
        display:block !important;
    }
}

@media (prefers-color-scheme: light) {
    .lightmode {
        display: block !important;
    }
}

.button-control {
    text-decoration: none;
    border: 2px solid var(--orange-text);
    background-color: var(--orange-text);
    border-radius: 10px;
    padding: 10px 20px;
    margin-top: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    display: inline-block;
    color: var(--white);
    min-width:150px;
    cursor:pointer;
}

    .button-control.button-prev {
        position: relative;
        width:28px;
        min-width:28px;
    }
    .button-control.button-prev:after {
        content: " ";
        width: 24px;
        height: 24px;
        display: block;
        background: url('chevron-left.svg');
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .button-control.button-next {
        position: relative;
    }
.button-control.button-next:after {
    content: " ";
    width: 24px;
    height: 24px;
    display: block;
    background: url('chevron-right.svg');
    position: absolute;
    right: 10px;
    top: 10px;
}

@media (max-width: 1400px) and (min-width: 993px)
{
    .button-control.button-prev {
        width: 38px;
        min-width: 38px;
    }
    .button-control.button-next:after, .button-control.button-prev:after {
        top: 5px;
        right: 5px;
    }
}

.button-control.button-white {
    background-color: var(--white);
    color: var(--orange-text);
    border-color: var(--white);
}


    .button-control:active {
        box-shadow: 0px 0px 5px var(--orange-text);
    }
    .button-control.button-white:active {
        box-shadow: 0px 0px 5px var(--white);
    }

    .button-control:disabled {
        background: var(--control-back);
        border-color: var(--control-back);
        color:var(--gray-text);
        cursor:not-allowed;
    }



@media (max-width: 992px) {

    .button-control.button-prev {
        width: 60px;
        min-width: 60px;
    }
    .button-control-large-xs
    {
        width:100%;
    }

    /*.col
    {
        margin-bottom:10px;
    }

        .col:last-child {
            margin-bottom: 0px;
        }*/
}

.form-control {
    padding: 8px 12px;
    min-height: 42px;
    height: auto;
    border: 2px solid transparent;
    width: 100%;
    background-color: var(--control-back);
    margin-bottom: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    border-radius: 5px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    color: var(--black-text);
    -webkit-appearance: none;
}

input:-webkit-autofill {
    -webkit-text-fill-color: var(--black-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--control-back) inset;
}

    .form-control::placeholder {
        color: var(--placeholder);
    }

select.form-control
{
    background-image:url('chevron-down.svg');
    background-repeat:no-repeat;
    background-position:calc(100% - 10px) center;
    background-size:24px auto;  
}

@media (prefers-color-scheme: dark) {
    select.form-control {
        background-image: url('chevron-down-white.svg');
        background-repeat: no-repeat;
        background-position: calc(100% - 10px) center;
        background-size: 24px auto;
    }
}

    select.form-control:invalid {
        color: var(--placeholder);
    }

select.form-control option
{
    color:var(--black-text);
    background-color:var(--darkwhite);
}

select.form-control option:disabled
{
    display:none;
}



.form-control:focus
{
    border-color:var(--orange-text);
}

textarea.form-control
{
    min-height:200px;
    resize:none;
}

@media (max-width: 1600px) {
    .content {
        width: 1240px;
    }
}

@media (max-width: 1400px) {
    .content {
        width: 1140px;
    }
}

@media (max-width: 1200px) {
    .content {
        width: 960px;
    }
}

/*@media (max-width: 992px) {
    .content {
        width: 720px;
    }
}*/

/* 992px was mobile now 992 */

@media (max-width: 992px) {
    .content {
        width: calc(100% - 20px);
        margin: 0px 10px;
    }
}



main {
    min-height: calc(100vh - 270px);
    margin: 0px;
    padding: 0px;
    /*min-height: 1000px;*/
    padding-bottom: 40px;
    position: relative;
    background: var(--page-backcolor);
}

footer {
    min-height: 250px;
    background-color: var(--footer-backcolor);
    margin: 0px;
    padding: 10px;
    padding-top:30px;
    display: block;
    color:var(--gray-text);
}



    footer h4 {
        font-size: 10pt;
        font-weight: 600;
        color: var(--gray-text);
        display: block;
        text-decoration: none;
    }

    footer a, footer span, footer p {
        font-size: 10pt;
        font-weight: 400;
        color: var(--gray-text);
        display: block;
    }

        footer a:hover {
            color: var(--orange-text);
        }

    .footer2 {
        border-top: 1px solid var(--gray-text);
        margin-top: 40px;
    }

        .footer2 p, .footer2 a {
            font-weight: 600;
            display: inline-block;
        }

        .footer2 a {
            margin-left: 10px;
        }

            .footer2 a:first-of-type {
                margin-left: 50px;
            }


            .footer2 a:after {
                content: "|";
                margin-left: 20px;
                color: var(--gray-text);
            }

            .footer2 a:last-of-type:after {
                content: "";
                margin-left: 20px;
                color: var(--gray-text);
            }

@media (max-width: 992px) {
    .footer2 a:first-of-type {
        margin-left: 0px;
    }

    .footer2 a {
        display: block;
        margin-left: 0px;
    }
    .footer2 a:after {
        content: "";
        margin-left: 0px;
        color: var(--gray-text);
        
    }
}

@media (min-height: 992px) {
    footer {
        height: auto;
    }

    footer .col
    {
        margin-bottom:20px;
    }
}

nav {
    width: 100%;
    height: 70px;
    display: block;
    padding: 20px 0px;
    z-index: 1;
    /*position: relative;*/
    position: absolute;
    top: 0px;
    z-index:10;
}

#topsite
{
    position:absolute;
    top:80vh;
}

#navspacer 
{
    height:110px;
}

nav.fixed {
    position: fixed;
    top: -100px;
    -webkit-animation: menuin 1s forwards;
    animation: menuin 1s forwards;
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 100;
    height: 30px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
    nav.fixed {
        background: rgba(50,50,50,0.85);
        height: 30px;
        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
    }
}

    nav.fixed .logo {
        min-width: 60px;
        height: 45px;
    }
@keyframes menuin
{
    from
    {
        top:-100px;
    }
    to
    {
        top:-20px;
    }
}

        nav .content {
            display: flex;
            gap:50px;
        }

        nav .logo {
            min-width: 150px;
            height: 90px;
            background: url('logo.svg') no-repeat left center;
            display: block;
            flex: 0 0;
            -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 1));
            filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 1));
        }

        @media (prefers-color-scheme: dark) {
            nav .logo {
                background: url('logo-dark.svg') no-repeat left center;
            }
        }

        nav .showmenu, nav .closemenu {
            display: none;
        }

        nav ul {
            flex: 1 0;
            text-align: right;
            list-style: none;
            margin-right: -20px;
          
        }

        nav.fixed ul {
            margin-top: 10px;
        }

            nav ul li {
                display: inline-block;
                position:relative;
            }

                nav ul li:first-child {
                    padding-left: 0px;
                }

                nav ul li:last-child {
                    padding-right: 0px;
                }

                nav ul li a, nav ul li span{
                    color: var(--black-title);
                    padding: 5px 0px;
                    margin: 0px 15px;
                    border-radius: 20px;
                    text-decoration: none;
                    font-size: 12pt;
                    font-weight: 400;
                    transition: all 300ms;
                    position: relative;
                    display: inline-block;
                    cursor:pointer;
                }

                    nav ul li a.disabled, nav ul li span.disabled {
                        opacity:0.5;
                        pointer-events:none;
                    }

                nav.fixed ul li a {
                    font-size: 10pt;
                   
                }

                 nav ul li a:before
                 {
                     content:" ";
                     width:0%;
                     height:3px;
                     background-color:var(--orange-text);
                     border-radius:4px;
                     display:block;
                     position:absolute;
                     bottom:0px;
                     right:50%;
                     transition:all 300ms;
                 }
                    nav ul li a:hover, nav ul li span:hover {
                        text-shadow: 0px 0px 1px #000000AA;
                    }
                    nav ul li a:hover:before {
                        width: 100%;
                        right: 0px;
                        opacity: 1;
                    }
                        nav ul li a.active:before {
                            width: 100%;
                            right: 0px;
                            opacity: 1;
                        }

                    /*nav .content.home ul li a {
    
                        color: var(--black-title);
                    }*/

                    nav ul li span > svg
                    {
                        width:24px;
                        display:inline-block;
                        vertical-align:-6px;
                        transition:all 300ms;
                        fill:var(--gray-text);
                    }

                    nav ul li:hover span svg, nav ul li.active span svg, nav ul li:hover span svg, nav ul li.touched span svg {
                        fill: var(--orange-text);
                        transform: rotate(90deg);
                    }

                    nav ul li:hover span, nav ul li.active span, nav ul li:hover span, nav ul li.touched span {
                        text-shadow: 0px 0px 1px #000000AA;
                    }

                    nav ul li ul {
                        display:none;
                        background:var(--control-back);
                        position: absolute;
                        text-align: left;
                        list-style: none;
                        margin-right: 0px;
                        padding:10px;
                        border-radius:16px;
                        box-shadow:0px 4px 20px 0px #00000033;
                        opacity:0;
                    }

                    nav ul li:hover ul, nav ul li.touched ul {
                        display: block;
                        animation: menuin 600ms forwards;
                    }

                    @keyframes menuin
                    {
                        from
                        {
                            opacity:0;
                            
                            margin-top:-10px;
                        }

                        to {
                            opacity: 1;
                            
                            margin-top: 0px;
                        }
                    }

                    nav ul li ul li
                    {
                        display:block;
                        height:40px;                        
                    }
                    nav ul li ul li a
                    {
                        white-space:nowrap;
                    }

                    nav.fixed .content.home ul li a {
                        color: var(--black-title);
                    }
                   

                    /*nav ul li a:hover {
                        background: var(--orange-text);
                        color: var(--white);
                    }*/




@media (prefers-color-scheme: dark) {

    nav ul li span > svg {

        fill: var(--white);
    }
    nav .showmenu svg
    {
        fill:var(--white);
    }

    nav ul li a, nav ul li span{
        color: var(--white);
    }

        nav ul li a:hover, nav ul li span:hover {
            text-shadow: 0px 0px 2px #ffffff;
        }

    nav.fixed .content.home ul li a {
        color: var(--white);
    }
}


    @media (max-width: 992px) {
        nav ul {
            display: none;

        }

        nav.fixed ul li a {
            font-size: 12pt;
        }

        body.menuvisible nav ul {
            display: block;
            position: fixed;
            width: 100%;
            height: calc(100vh + 20px);
            background: #000000AA;
            right: 20px;
            top: -16px;
            box-sizing: border-box;
            z-index: 100;
            padding: 20px;
            text-align: right;
            padding-top: 80px;
            -webkit-animation: fadein 200ms forwards;
            animation: fadein 200ms forwards;
        }

        body.menuvisible nav ul li svg
        {
            display:none;
        }

            body.menuvisible nav ul li ul {
                position: relative;
                height: auto;
                width: 80%;
                background: transparent;
                border-radius: unset;
                right: unset;
                top: unset;
                z-index: unset;
                padding: unset;
                padding: unset;
                -webkit-animation: unset;
                box-shadow: unset;
                opacity: 1;
                animation: unset;
                padding-right: 20px;
                display: inline-block;
            }


        @keyframes fadein
        {
            from
            {
                opacity:0;
            }

            to
            {
                opacity:1;
            }
        }

        body.menuvisible nav.fixed ul {
            top:-10px;
        }


        body.menuvisible nav ul:before {
            content: " ";
            background: #eee;
            width: 80%;
            height: 100%;
            position: absolute;
            right: 0px;
            top: 0px;
            z-index: 0;
            -webkit-animation: slidein 400ms forwards;
            animation: slidein 400ms forwards;
        }

        @media (prefers-color-scheme: dark) {
            body.menuvisible nav ul:before {
                background: #282828;
            }
        }


        @keyframes slidein
        {
            from
            {
                width:0%;
            }

            to {
                width: 80%;
            }
        }

        body.menuvisible nav .closemenu
        {
            display:inline-block;
            width:36px;
            height:36px;
            right:20px;
            top:20px;
            position:absolute;
        }

        @media (prefers-color-scheme: dark) {
            body.menuvisible nav .closemenu svg
            {
                fill:var(--white);
            }
        }

        body.menuvisible nav.fixed .closemenu
        {
            top:30px;
        }

        nav ul li
        {
            display:block;
        }

        nav .showmenu {
            display: block;
            width: 36px;
            height: 36px;
            position: absolute;
            right: 20px;
            top: 20px;
        }
        nav.fixed .showmenu {
            top: 25px;
        }
    }


.banner .back {
    width: 100%;
    height: 100vh;
    background: url(photos/white-compass-1920.jpg) center bottom, url(photos/white-compass-1920-low.jpg) center bottom;
    background-size: cover;
    position: absolute;
    left: 0px;
    top: -110px;
    z-index: 0;
}

.banner .back_services {
    width: 80vw;
    height: 25vw;
    background: url(photos/jigsaw_deskop_light.jpg) center center no-repeat,url(photos/jigsaw_deskop_light_low.jpg) center center no-repeat;
    background-size: cover;
    position: absolute;
    left: 10vw;
    top: 0px;
    z-index: 0;
}



.banner .spacer_services
{
    width:100%;
    height:21vw;
}

.imgpreview {
    -webkit-animation-duration: 1.25s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeHolderShimmer;
    -webkit-animation-timing-function: linear;
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: darkgray;
    background: linear-gradient(to right, #eeeeee 10%, #dddddd 33%, #eeeeee 70%);
    background-size: 200% 100%;
    position: relative;
    border-radius: 18px;
    position:relative;
    padding-top:62%;
    box-sizing:border-box;

}

@keyframes placeHolderShimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

.imgpreview.loaded {
    -webkit-animation: unset;
    animation: unset;
    background: unset;
    min-height: unset;
    padding-top: 0px;

}




.imgpreview img {
    opacity: 0;
    transition: all 500ms;
    position: absolute;
    left: 0px;
    top: 0px;
    filter: blur(40px);
}
.imgpreview.loaded img {
    opacity: 1;
    position: static;
    filter: blur(0px);
}





@media (max-width: 992px) {


    .banner .back {
        height: calc(100vh - 50px);
        background: #ffffff url(photos/white-compass-mobile.jpg) center bottom;
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: -50px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .banner .back_services {
        width: 100%;
        height: 67vw;
        background: url('photos/jigsaw_mobile_light.jpg') no-repeat center center;
        background-size: cover;
        position: absolute;
        left: 0px;
        z-index: 0;
    }



    .banner .spacer_services {
        width: 100%;
        height: 65vw;
    }
}


    .banner.features .back {
        width: 100%;
        height: 500px;
        background: url(images/features.jpg) center center;
        background-size: cover;
        position: absolute;
        left: 0px;
        top: -110px;
        z-index: 0;
    }

    .banner.features h1 {
        color: var(--blue-title);
    }

    .banner.features p {
        max-width: 50%;
    }

    .banner.contacts {
        height: 300px;
    }

        .banner.contacts .back {
            width: 100vw;
            height: 410px;
            background: url('images/istockphoto-1158860016-2048x2048-transformed.jpeg');
            background-size: cover;
        }

        .banner.contacts .back {
            width: 100vw;
            height: 410px;
            background: url('images/istockphoto-1158860016-2048x2048-transformed.jpeg');
            background-size: cover;
        }

    @media (prefers-color-scheme: dark) {
    .banner .back {
        filter: brightness(80%);
    }

    img {
        filter: brightness(80%);
    }
}

.banner .info {
    width: 100%;
    height: calc(100vh - 110px);
    display: block;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    position: relative;
    text-align: right;
}


    .banner .info .canadian {
        position: absolute;
        right: 0px;
        top:calc(50% - 200px);
        background:#ffffffdd url('canadians.svg') no-repeat center center;
        width: 150px;
        height:150px;
        background-size: 90% auto;
        border-radius:50%;
    }

    .banner .info .innerinfo {
        position: absolute;
        bottom: 50px;
        width: 480px;
        right: 0px;
    }



@media (max-width: 1024px) {
    .banner .info .innerinfo {
        right: 0px;
        top: 30px;
    }

    .banner .info .canadian {
        
        right: 10px;
        top: unset;
        bottom:20px;
        width:150px;
        height:150px;
    }
}

@media (max-width: 760px) {


    .banner .info .canadian {
        right: 10px;
        top: unset;
        bottom: 70px;
        width: 100px;
        height: 100px;
    }
}


 


    .banner.features .info {
        height: calc(500px - 110px);
    }


    .banner.features .info {
        text-align: left;
    }


@media (prefers-color-scheme: dark) {

    .banner .back {
        width: 100%;
        height: 100vh;
        background: url(photos/dark-compass-1920.jpg) center bottom, url(photos/dark-compass-1920-low.jpg) center bottom;
        background-size: cover;
        position: absolute;
        left: 0px;
        top: -110px;
        z-index: 0;
    }

    .banner .back_services {
        background: url(photos/jigsaw_deskop_dark.jpg) center center, url(photos/jigsaw_deskop_dark_low.jpg) center center;
        background-repeat:no-repeat;        
        background-size: cover;
        
     
    }

    .banner .info {
        width: 750px;
    }

        .banner .info .canadian {
            left: 0px;
        }
        .banner .info .canadian {
            position: absolute;
            left: 0;
            top: calc(50% - 200px);
            background: url(canadians.svg) no-repeat center center;
            width: 150px;
            height: 150px;
            background-size: 100% auto;
        }

        .banner .info .innerinfo {
            text-align: left;
            right: unset;
            top: unset;
        }

    @media (max-width: 992px) {
        .banner .back {
            height: calc(100vh - 50px);
            background: #1c1c1c url(photos/dark-compass-mobile.jpg) center bottom;
            background-size: contain;
            background-repeat: no-repeat;
            /*background-blend-mode: darken;*/
            opacity:0.5;
        }
        
    }

    @media (max-width: 1024px) and (orientation: portrait) {
        .banner .back_services {
            width: 100%;
            height: 67vw;
            background: url('photos/jigsaw_mobile_dark.jpg') no-repeat center center;
            background-size: cover;
            position: absolute;
            left: 0px;
            z-index: 0;
        }

            .banner .back_services .h_fade {
                background: linear-gradient(0deg, var(--page-backcolor) 5%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, var(--page-backcolor) 95%);
            }

        .banner .spacer_services {
            width: 100%;
            height: 65vw;
        }
    }

}

    h1 {
        color: var(--blue-title);
        font-size: 36pt;
        line-height: 36pt;
        font-weight: 600;
    }

@media (max-width: 600px) {
    h1 {
        font-size: 24pt;
        line-height: 24pt;
    }
}

    .orange {
        color: var(--orange-text);
    }

    .blacktext {
        color: var(--black-text);
    }



    h2 {
        color: var(--blue-title);
        font-size: 24pt;
        font-weight: 600;
    }

@media (max-width: 600px) {
    h2 {
        font-size: 21pt;
    }
}

    h3 {
        font-size: 18pt;
        font-weight: 600;
    }

    p {
        color: var(--gray-text);
    }



    .banner .info h3, .banner .info h4 {
        margin: 0px;
        color: var(--white);
    }

    .banner .info h3, .banner .info h4 {
        color: var(--blue-title);
    }

    .banner .info h3 {
        font-size: 24pt;
        font-weight: 600;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    }

    .banner .info h4 {
        font-weight: 300;
        font-size: 16pt;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
    }


    @media (max-width: 992px) {

        .banner .info h3 {
            font-size: 21pt;
            margin-bottom: 20px;
        }



        .banner .info .innerinfo {
            top: 50px;
        }

        .banner .info .innerinfo {
            width: 100%;
            text-align: center;
            padding: 0px;
            box-sizing: border-box;
        }

        @media (prefers-color-scheme: dark) {

            .banner .info {
                width: 100%;
            }

                .banner .info .canadian {
                    position: absolute;
                    left: 10px;
                    top: calc(100% - 170px);
                    background: url(canadians.svg) no-repeat center center;
                    width: 100px;
                    height: 100px;
                    background-size: 100% auto;
                }

                .banner .info .innerinfo {
                    width: 100%;
                    text-align: center;
                    padding: 0px;
                    box-sizing: border-box;
                }
        }
    }



    .spacer {
        display: block;
        height: 40px;
        clear: both;
    }

    .spacer_half {
        height: 20px;
    }

    .spacer_none {
        height: 0px;
    }

    @media (max-width: 1400px) {

        .spacer_m {
            height: 40px;
        }

        .spacer_m_half {
            height: 20px;
        }

        .spacer_m_none {
            height: 0px;
        }
    }

    @media (max-width: 1024px) {

        .spacer_s {
            height: 40px;
        }

        .spacer_s_half {
            height: 20px;
        }

        .spacer_s_none {
            height: 0px;
        }
    }



    @media (max-width: 992px) {

        .spacer_xs {
            height: 40px;
        }

        .spacer_xs_half {
            height: 20px;
        }

        .spacer_xs_none {
            height: 0px;
        }
    }

    .flexbox {
        display: flex;
        gap: 40px;
        flex-wrap: wrap;
    }

    .flex-verical {
        flex-direction: column;
    }

    .flex-row {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    @media (max-width: 1024px) {
        .flexbox {
            gap: 20px;
            row-gap: 10px;
        }
    }

    .flexbox .col {
        flex: 1 0;
    }

    .flexbox .col0 {
        flex: 0 0;
    }

    .flexbox .col1 {
        flex: 1 0;
    }

    .flexbox .col2 {
        flex: 2 0;
    }

    .flexbox .col3 {
        flex: 3 0;
    }

    .flexbox .col4 {
        flex: 4 0;
    }

    .flexbox .col5 {
        flex: 5 0;
    }

    .flexbox .col6 {
        flex: 6 0;
    }

    .flexbox .order1 {
        order: 1;
    }

    .flexbox .order2 {
        order: 2;
    }

    .flex-break {
        flex-basis: 100%;
    }

    .flex-break-s, .flex-break-xs, .flex-break-xxs {
        display: none;
    }


    @media (min-width: 1600px) {

        .flexbox .col-xl {
            flex: 1 0;
        }

        .flexbox .col0-xl {
            flex: 0 0;
        }

        .flexbox .col1-xl {
            flex: 1 0;
        }

        .flexbox .col2-xl {
            flex: 2 0;
        }

        .flexbox .col3-xl {
            flex: 3 0;
        }

        .flexbox .col4-xl {
            flex: 4 0;
        }

        .flexbox .col5-xl {
            flex: 5 0;
        }

        .flexbox .col6-xl {
            flex: 6 0;
        }
    }

    @media (max-width: 1024px) {

        .flexbox .order1-s {
            order: 1;
        }

        .flexbox .order2-s {
            order: 2;
        }

        .flex-break-s {
            flex-basis: 100%;
            display: block;
        }


        .flexbox .col-s {
            flex: 1 0;
        }

        .flexbox .col1-s {
            flex: 1 0;
        }

        .flexbox .col2-s {
            flex: 2 0;
        }

        .flexbox .col3-s {
            flex: 3 0;
        }

        .flexbox .col4-s {
            flex: 4 0;
        }

        .flexbox .col5-s {
            flex: 5 0;
        }

        .flexbox .col6-s {
            flex: 6 0;
        }
    }

    @media (max-width: 992px) {



        .flexbox .order1-xs {
            order: 1;
        }

        .flexbox .order2-xs {
            order: 2;
        }

        .flex-break-xs {
            flex-basis: 100%;
            display: block;
        }

        .flexbox .d-xs-none {
            display: none;
        }

        .flexbox .col-xs {
            flex: 1 0;
        }

        .flexbox .col1-xs {
            flex: 1 0;
        }

        .flexbox .col2-xs {
            flex: 2 0;
        }

        .flexbox .col3-xs {
            flex: 3 0;
        }

        .flexbox .col4-xs {
            flex: 4 0;
        }

        .flexbox .col5-xs {
            flex: 5 0;
        }

        .flexbox .col6-xs {
            flex: 6 0;
        }

        .flexbox-xs {
            display: flex;
        }
    }

    @media (max-width: 760px) {
        .flex-break-xxs {
            flex-basis: 100%;
            display: block;
        }
    }

    .flexbox .col900px {
        flex: 0 0;
        min-width: 940px;
    }

    .margin0 {
        margin: 0px;
    }

    .margin-top0 {
        margin-top: 0px !important;
    }

    .margin-top1 {
        margin-top: 20px !important;
    }

    .margin-top2 {
        margin-top: 40px !important;
    }

    .margin-top3 {
        margin-top: 60px !important;
    }

    .margin-top4 {
        margin-top: 80px !important;
    }

    .margin-top5 {
        margin-top: 100px !important;
    }

    .margin-top6 {
        margin-top: 120px !important;
    }

    .margin-top7 {
        margin-top: 140px !important;
    }

    .margin-top8 {
        margin-top: 160px !important;
    }

    .padding0 {
        padding: 0px;
    }

    .padding1 {
        padding: 20px;
    }

    .padding2 {
        padding: 40px;
    }

    .padding3 {
        padding: 60px;
    }

    @media (max-width: 1400px) {
        .padding0-s {
            padding: 0px;
        }

        .padding05-s {
            padding: 10px;
        }

        .padding1-s {
            padding: 20px;
        }

        .padding2-s {
            padding: 40px;
        }

        .padding3-s {
            padding: 60px;
        }
    }

    @media (max-width: 992px) {
        .padding0-xs {
            padding: 0px;
        }

        .padding05-xs {
            padding: 10px;
        }

        .padding1-xs {
            padding: 20px;
        }

        .padding2-xs {
            padding: 40px;
        }

        .padding3-xs {
            padding: 60px;
        }

        .flexbox .col900px {
            flex: 0 0;
            min-width: 0px;
        }
    }

    .flexbox .titlebox {
        background: var(--box-background);
        border-radius: 18px;
    }

        .flexbox .titlebox.orange {
            background: var(--orange-text);
            background: radial-gradient(circle at top, rgba(243, 111, 33, 1) 0%, rgba(226, 103, 31, 1) 100%);
        }

        .flexbox .titlebox.darkblue {
            background: var(--blue-title);
            background: radial-gradient(circle at top,rgba(57, 86, 184, 1) 0%, rgba(33, 58, 142, 1) 100%);
        }

            .flexbox .titlebox.orange h3, .flexbox .titlebox.darkblue h3 {
                color: var(--white);
            }

            .flexbox .titlebox.orange p, .flexbox .titlebox.darkblue p {
                color: var(--white);
            }

            .flexbox .titlebox.orange a, .flexbox .titlebox.darkblue a {
                color: var(--white);
            }

        .flexbox .titlebox.nobox {
            background: transparent;
            border-radius: 0px;
            padding: 0px;
        }

        .flexbox .titlebox h4 {
            font-weight: 300;
            font-size: 14.5pt;
            color: var(--blue-title);
            margin: 0px;
        }

        .flexbox .titlebox h3 {
            font-weight: 600;
            font-size: 14.5pt;
            color: var(--blue-title);
            margin: 0px;
        }

        .flexbox .titlebox h1 {
            font-weight: 600;
            font-size: 18pt;
            color: var(--blue-title);
            margin: 0px;
        }

        .flexbox .titlebox.nobox h1 {
            font-size: 21pt;
        }

        .flexbox .titlebox p {
            color: var(--gray-text);
            font-size: 12pt;
            font-weight: 300;
        }

        .flexbox .titlebox a {
            text-decoration: none;
            display: inline-block;
        }

            .flexbox .titlebox a:hover {
                text-decoration: underline;
            }

        .flexbox .titlebox img {
            /*width: 220px;
            height: 220px;
            display: block;
            margin: 0 auto;
            object-fit: cover;*/
            display: block;
            margin: 0 auto;
            object-fit: cover;
            width: 100%;
            border-radius: 12px;
        }

            .flexbox .titlebox img.free {
                width: 100%;
                height: auto;
                /*height: 100%;
                object-fit:cover;*/
            }

            .flexbox .titlebox img.rounded {
                border-radius: 12px;
            }

    @media (max-width: 992px) {
        .flexbox .titlebox img.rounded_up_xs {
            border-radius: 12px 12px 0px 0px;
        }
    }

    /*@media (min-width: 1600px) {
        .flexbox .titlebox img {
            width: 250px;
            height: 250px;
        }
    }*/

    @media (max-width: 992px) {
        .flexbox {
            display: block;
        }

        .flexbox-xs {
            display: flex;
        }

        .flexbox .titlebox {
            flex: 1 0;
            border-radius: 18px;
            text-align: center;
            margin-bottom: 20px;
        }
    }

    .lazyloadanim {
        position: relative;
        opacity: 0;
        transition: all 400ms;
        transition-delay: 200ms;
        transition-timing-function: ease-in-out;
        transform: translateX(-100px);
        transform: scale(0.8);
    }

        .lazyloadanim.right {
            transform: translateX(100px);
            transform: scale(0.8);
        }

        .lazyloadanim.center {
            transform: scale(0.8);
        }


        .lazyloadanim.visible, .lazyloadanim2.visible {
            opacity: 1;
            transform: none;
        }



    .anywherebox {
        width: 100%;
        min-height: 350px;
        background: gray;
        border-radius: 18px;
        overflow: hidden;
        padding: 0px;
        position: relative;
        text-align: center;
    }


        .anywherebox.partner {
            text-align: right;
        }

        .anywherebox img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            position: absolute;
            z-index: 1;
        }



        .anywherebox h3 {
            z-index: 2;
            position: relative;
            color: var(--white);
            width: 700px;
            text-align: center;
            font-size: 24pt;
            font-weight: 100;
            display: inline-block;
        }

        .anywherebox.partner h3 {
            text-align: right;
            margin-right: 50px;
            color: var(--black-text);
        }


    @media (max-width: 992px) {
        .anywherebox h3 {
            width: 100%;
            font-size: 18pt;
            padding: 20px;
            box-sizing: border-box;
            margin-top: 50px !important;
        }

        .anywherebox.partner h3 {
            text-align: center;
            margin-right: 0px;
            margin-top: 20px !important;
        }
    }

    .anywherebox.cloudimage h3 {
        color: var(--black-text);
        font-weight: 600;
        width: 800px;
    }

    .textright {
        text-align: right !important;
    }

    .textleft {
        text-align: left !important;
    }

    .textcenter {
        text-align: center !important;
    }

    @media (max-width: 992px) {

        .textright-xs {
            text-align: right !important;
        }

        .textleft-xs {
            text-align: left !important;
        }

        .textcenter-xs {
            text-align: center !important;
        }
    }

    span.contacttitle {
        display: block;
        margin-bottom: 4px;
        position: relative;
        padding-left: 36px;
    }

        span.contacttitle:before {
            content: " ";
            background: url('contactsicon.svg');
            background-size: 48px auto;
            background-position: -24px 0px;
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: -6px;
            position: absolute;
            left: 0px;
        }

        span.contacttitle.call:before {
            background-position: -24px -24px;
        }

        span.contacttitle.address:before {
            background-position: -24px -48px;
        }

    img[others] {
        cursor: alias;
    }


    .achivments {
        display: inline-block;
        text-align: center;
        width: 100%;
    }

        .achivments .achivment {
            width: 60px;
            height: 60px;
            background: url('achivment_gray.svg');
            background-size: 60px auto;
            display: inline-block;
            margin: 5px;
        }

            .achivments .achivment:nth-child(1) {
                background-position: 0px -60px;
            }

            .achivments .achivment:nth-child(2) {
                background-position: 0px -120px;
            }

            .achivments .achivment:nth-child(3) {
                background-position: 0px -180px;
            }

            .achivments .achivment:nth-child(4) {
                background-position: 0px -240px;
            }

            .achivments .achivment:nth-child(5) {
                background-position: 0px -300px;
            }

            .achivments .achivment:nth-child(6) {
                background-position: 0px -360px;
            }

            .achivments .achivment:nth-child(7) {
                background-position: 0px -420px;
            }

            .achivments .achivment:nth-child(8) {
                background-position: 0px -480px;
            }


    .responsiveimage {
        width: 450px;
        max-width: 80vw;
    }

    .bookmark {
        margin-top: -100px;
        position: absolute;
    }


    form.submitted input:invalid, form.submitted textarea:invalid {
        border-color: #dc3545;
    }

    .text-success {
        color: #28a745 !important;
    }

    .text-danger {
        color: #dc3545 !important;
    }

    .infobox {
        display: none;
    }

    .errorbox {
        display: none;
    }

    .visible {
        display: block !important;
    }

    .hidden {
        display: none !important;
    }

    .erroricon {
        width: 64px;
        height: 64px;
        display: inline-block;
        background: url('alert-outline.svg') no-repeat left center;
        background-size: 64px 64px;
    }

    .infoicon {
        width: 64px;
        height: 64px;
        display: inline-block;
        background: url('check-circle-outline.svg') no-repeat left center;
        background-size: 64px 64px;
    }

    ::-webkit-validation-bubble-message {
        display: none;
    }

    .valiationerror {
        color: #dc3545 !important;
        background: url('alert-outline.svg') no-repeat left center;
        background-size: 24px 24px;
        padding-left: 28px;
        display: none;
    }

    form.submitted input:invalid + .valiationerror, form.submitted textarea:invalid + .valiationerror, form.submitted select:invalid + .valiationerror {
        display: block;
    }

    .pleasewait {
        height: 36px;
        color: var(--black-text);
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        position: relative;
        padding-left: 50px;
        padding-top: 6px;
        display: none;
    }


        .pleasewait:before {
            content: " ";
            position: absolute;
            left: 0px;
            top: 0px;
            width: 36px;
            height: 36px;
            display: block;
            border: 5px solid var(--orange-text);
            box-sizing: border-box;
            -webkit-animation: rotation 1s;
            animation: rotation 750ms forwards infinite;
            border-radius: 50%;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .vcenterimg {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .vcenterimg img {
            flex: 0 0;
        }

    @media (max-width: 992px) {
        .vcenterimg {
            height: auto;
            display: block;
            flex-direction: column;
            justify-content: center;
        }
    }



    .tip {
        font-style: italic;
        color: var(--gray-text);
        font-size: 10.5pt;
    }

    .charactercounter {
        width: 100%;
        text-align: right;
        display: block;
        padding: 10px;
        box-sizing: border-box;
        margin-top: -45px;
        font-size: 9pt;
        color: var(--gray-text);
        pointer-events: none;
        height: 36px;
    }

    .pages {
        display: block;
        position: relative;
        width: 100%;
        min-height: 300px;
    }

    @media (max-width: 992px) {
        .pages {
            min-height: 400px;
        }


            .pages .button-control.button-prev:after {
                margin-right: 5px;
            }
    }



    .pages .page {
        position: absolute;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        top: 50px;
    }

        .pages .page[pageno='1'] {
            opacity: 1;
            pointer-events: all;
            top: 0px;
        }

        .pages .page.hide {
            opacity: 0;
            pointer-events: none;
            transition: all 300ms;
            top: 50px;
        }

        .pages .page.show {
            opacity: 1;
            pointer-events: all;
            transition: all 300ms;
            top: 0px;
        }


    .radiobutton {
        margin-bottom: 10px;
        cursor: pointer;
        display: block;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }

        .radiobutton * {
            cursor: pointer;
        }

        .radiobutton label {
            position: relative;
            padding-left: 30px;
            display: inline-block;
            color: var(--black-text);
        }

            .radiobutton label:before {
                content: " ";
                width: 24px;
                height: 24px;
                display: inline-block;
                vertical-align: -6px;
                margin-right: 5px;
                background: url('radiobutton.svg');
                background-size: auto 48px;
                position: absolute;
                left: 0px;
                top: 0px;
            }



            .radiobutton label:hover:before {
                background-position: -24px 0px;
            }

        .radiobutton input[type='radio'] {
            display: none;
        }

        .radiobutton .others {
            margin-top: 10px;
            height: 0px;
            overflow: hidden;
            transition: all 300ms;
        }

            .radiobutton .others input {
                display: none;
            }

        .radiobutton input:checked + label:before {
            background-position: -48px -0px;
        }

        .radiobutton input:checked + label + .others {
            height: 45px;
        }

            .radiobutton input:checked + label + .others input {
                display: block;
            }

    @media (prefers-color-scheme: dark) {
        .radiobutton label:before {
            background-position: 0px -24px;
        }

        .radiobutton label:hover:before {
            background-position: -24px -24px;
        }

        .radiobutton input:checked + label:before {
            background-position: -48px -24px;
        }
    }

    .progressarrows {
        width: 100%;
        display: flex;
        grid-gap: 50px;
    }

    .progressarrow {
        flex: 1;
        position: relative;
        text-align: left;
        padding-left: 150px;
        padding-top: 40px;
        height: 200px;
    }

        .progressarrow .colorarrow {
            width: 200px;
            height: 220px;
            position: absolute;
            left: -50px;
            top: 0px;
            mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
            z-index: 1;
        }

        .progressarrow span {
            position: absolute;
            left: 105px;
            top: 95px;
            font-size: 16pt;
            font-weight: 600;
            color: white;
            z-index: 3;
        }

        .progressarrow .colorarrow:before {
            content: " ";
            border-radius: 20px;
            transform: rotate(45deg);
            box-shadow: 0px 0px 20px #00000055;
            width: 150px;
            height: 150px;
            position: absolute;
            left: 15px;
            top: 35px;
            background: var(--orange-text);
            display: block;
        }

        .progressarrow.blue .colorarrow:before {
            background: var(--blue-title);
        }

        .progressarrow.green .colorarrow:before {
            background: #8a5458;
        }

        .progressarrow .whitearrow {
            width: 200px;
            height: 220px;
            position: absolute;
            top: 0px;
            left: -100px;
            z-index: 2;
            mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
        }

            .progressarrow .whitearrow:before {
                content: " ";
                border-radius: 20px;
                transform: rotate(45deg);
                box-shadow: 0px 0px 20px #00000055;
                width: 150px;
                height: 150px;
                position: absolute;
                left: 15px;
                top: 35px;
                background: var(--page-backcolor);
                display: block;
            }


        .progressarrow h3, .progressarrow h4, .progressarrow p {
            padding: 0px;
            margin: 0px;
        }

        .progressarrow h3 {
            color: var(--orange-text) !important;
            font-size: 16pt !important;
        }

        .progressarrow.blue h3 {
            color: var(--blue-title) !important;
        }

        .progressarrow.green h3 {
            color: #8a5458 !important;
        }

        .progressarrow h4 {
            font-weight: 500;
        }

        .progressarrow p {
            font-weight: 100;
            font-size: 9pt !important;
        }


    @media (max-width: 992px) {
        .progressarrows {
            display: block;
        }

        .progressarrow .colorarrow {
            transform: scale(0.7) translateX(-30px);
        }

        .progressarrow .whitearrow {
            transform: scale(0.7) translateX(-30px);
        }

        .progressarrow span {
            transform: translateX(-50px);
        }

        .progressarrow {
            padding-left: 100px;
            overflow: hidden;
            height: 150px;
        }

            .progressarrow.blue .colorarrow {
                transform: scale(0.7) rotate(180deg) translateX(30px);
                left: unset;
                right: -100px;
            }

            .progressarrow.blue {
                padding-left: unset;
                padding-right: 80px;
            }

                .progressarrow.blue .whitearrow {
                    transform: scale(0.7) rotate(180deg) translateX(30px);
                    left: unset;
                    right: -140px;
                }

                .progressarrow.blue span {
                    left: unset;
                    right: 0px;
                }
    }
@media (max-width: 1400px) and (min-width:1241px) {
    .content {
        width: 1200px;
    }
}

@media (max-width: 1240px) and (min-width:1025px) {
    .content {
        width: 1024px;
    }
}



@media (max-width: 1400px) and (min-width:993px) {

    nav ul li a {
        font-size: 10.5pt;
    }

    h1 {
        font-size: 28pt;
        line-height: 28pt;
    }

    h2 {
        font-size: 18pt;
    }

    .flexbox .titlebox p {
        font-size: 10.5pt;
    }

    a {
        font-size: 10.5pt;
    }

    .flexbox .titlebox h3, .flexbox .titlebox h4 {
        font-size: 12.5pt;
    }

    .anywherebox h3 {
        font-size: 21pt;
    }


    .form-control {
        padding: 6px 10px;
        min-height: 30px;
        height: auto;
        margin-bottom: 3px;
        font-size: 10.5pt;
    }

    .button-control {
        padding: 6px 12px;
        margin-top: 10px;
        font-size: 10.5pt;
        min-width: 120px;
    }

        .button-control:active {
            padding-top: 8px;
            padding-bottom: 4px;
        }

    .spacer_half {
        height: 10px;
    }

    .flexbox {
        gap: 20px;
    }

    .valiationerror {
        font-size: 10.5pt;
    }
}