:root {
    /*base styles*/
    --base-width: 94%;
    --text-content-width: 66%;
    --base-font-size: 16px;
    --base-font-family: 'Open Sans', sans-serif;
    --base-font-color: #222222;
    --base-bg-color: #ffffff;
    --base-transition: all 0.3s linear;
    --warning-color: #ff0000;

    --link-color: #762d4f;

    --academy-color: #154a46;
    --contractor-color: #c9622f;
    --documents-color: #195d80;
    --law-color: #762d4f;
    --hobby-color: #6a3d8a;

    --rectangle-bg-url: url('/media/images/rectangle_bg.png') repeat-y top center;


    /*cookie*/
    --cookie-bg-color: #ffffff;
    --cookie-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    --cookie-color: #222222;
    --cookie-link-color: #762d4f;

    /*title*/
    --title-font-family: 'Butler', serif;
    --title-font-color: #222222;

    /*input*/
    --input-border-color: #ffffff;
    --input-focus-border-color: #762d4f;
    --warning-input-outline-color: #ff0000;
    --button-input-radius: 2px;
    --disabled-input-bg: #d2d2d2;

    /*button*/
    --button-font-family: 'Butler', serif;
    --button-bg-color: #154a46;
    --button-hover-bg-color: #c9622f;
    --button-border: 1px solid #154a46;
    --button-border-radius: 2px;
    --button-font-color: #ffffff;
    --important-button-bg-color: #c9622f;
    --important-button-hover-bg-color: #e7814f;
    --clear-button-bg-color: #762d4f;

    /*base table*/
    --base-table-th-bg-color: #ffffff;
    --base-table-th-border: 2px solid #082a27;
    --base-table-td-border: 1px solid #082a27;
    --base-table-even-row-bg-color: #ffffff;
    --base-table-odd-row-bg-color: #f0ecf3;
    --base-table-row-hover-bg-color: #ddd1d7;

    /*details*/
    --details-border-color: #6c408b;
    --details-odd-bg-color: #f0ecf3;


    /*header*/
    --header-bg-color: var(--academy-color);
    --header-color: #ffffff;
    --header-link-color: #e7814f;
    --header-link-hover-color: #ffffff;
    --header-contact-link-color: #ffffff;
    --header-contact-link-hover-color: #e7814f;
    --header-icon-color: invert(100%) sepia(100%) saturate(0%) hue-rotate(357deg) brightness(112%) contrast(101%);
    --header-icon-hover-color: invert(67%) sepia(80%) saturate(2311%) hue-rotate(328deg) brightness(98%) contrast(84%);
    --nav-link-hover-color: #c9622f;
    --nav-submenubox-bg-color: #ffffff;
    --nav-submenubox-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18), 10px 0px 13px -7px rgba(0,0,0,0.18), -10px 0px 13px -7px rgba(0,0,0,0.18);
    --nav-submenu-hover-bg-color: #ece3e7;
    --mobilmenu-color: invert(52%) sepia(94%) saturate(334%) hue-rotate(334deg) brightness(94%) contrast(92%);
    --nav-icon-color: invert(20%) sepia(7%) saturate(5158%) hue-rotate(127deg) brightness(94%) contrast(84%);
    --nav-icon-hover-color: invert(52%) sepia(94%) saturate(334%) hue-rotate(334deg) brightness(94%) contrast(92%);
    --logout-icon-color: invert(13%) sepia(89%) saturate(7499%) hue-rotate(2deg) brightness(95%) contrast(110%);
    --mobil-mainnav-bg-color: #ffffff;
    --mobil-mainnav-shadow: -6px 8px 8px 0px rgba(0,0,0,0.18);
    --mobilmenu-close-icon-color: invert(21%) sepia(19%) saturate(3193%) hue-rotate(290deg) brightness(92%) contrast(87%);
    --basket-el-no-bg-color: #e7814f;
    --basket-el-no-color: #ffffff;
    --basket-el-border-color: #bce8e5;

    /*Loginbox*/
    --loginbox-bg-color: #ffffff;
    --loginbox-color: #222222;
    --loginbox-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.38);
    --loginbox-passive-button-color: #222222;
    --loginbox-change-link-bg-color: #E0F0FF;
    --loginbox-change-link-hover-bg-color: #132E48;
    --loginbox-change-link-color: #244a6a;
    --loginbox-change-link-hover-color: #ffffff;
    --login-missing-pwd-color: #ff0000;
    --login-ok-pwd-color: #154a46;

    /*main slider*/
    --slider-main-box-bg-color: rgba(1, 76, 80, 0.4);
    --slider-main-box-color: #ffffff;
    --slider-main-box-btn-border: 1.5px solid #ffffff;
    /*sub slider*/
    --slider-sub-box-bg-color: rgba(1, 76, 80, 0.4);
    --slider-sub-box-color: #ffffff;


    /*main*/
    --main-brands-boxes-btn-bg-color: #ffffff;
    --main-brands-boxes-btn-hover-bg-color: #ddd1d7;
    --main-brands-boxes-btn-border: 1px solid #ffffff;
    --main-brands-boxes-btn-hover-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    --main-brands-boxes-hobby-btn-bg-color: var(--hobby-color);
    --main-brands-boxes-hobby-btn-hover-bg-color: #8c66a7;
    --main-brands-boxes-hobby-btn-border: 1px solid var(--hobby-color);
    --main-brands-boxes-title-bg-color: rgba(255, 255, 255, 0.7);
    --main-brands-boxes-hobby-title-bg-color: rgba(106, 61, 138, 0.5);

    --testimonial-bg-color: #541a35;
    --testimonial-color: #ffffff;
    --testimonial-button-color: invert(84%) sepia(6%) saturate(413%) hue-rotate(283deg) brightness(91%) contrast(92%);;
    --testimonial-button-hover-color: invert(100%) sepia(100%) saturate(0%) hue-rotate(201deg) brightness(102%) contrast(103%);;

    --green-content-bg-color: #edf1f1;
    --brand-content-bg-color: var(--academy-color);
    --brand-conten-color: #ffffff;
    --striped-content-bg-color: var(--contractor-color);

    /*course*/
    --course-list-difficulty-bg-color: rgba(255, 255, 255, 0.7);
    --course-list-difficulty-color: var(--hobby-color);
    --you-get-bg-color-hobby: #f0ecf3;
    --you-get-bg-color-academy: #e9f6f5;
    --you-get-icon-color-hobby: invert(27%) sepia(17%) saturate(2340%) hue-rotate(233deg) brightness(98%) contrast(88%);
    --you-get-icon-color-academy: invert(20%) sepia(7%) saturate(5158%) hue-rotate(127deg) brightness(94%) contrast(84%);
    --course-boxes-bg-color: var(--hobby-color);
    --course-boxes-color: #ffffff;
    --course-for-you-bg-color: #ebebeb;
    --course-for-you-list-image-color: var(--hobby-color);
    --you-get-bg-color: #f0ecf3;
    --you-get-icon-color: invert(27%) sepia(17%) saturate(2340%) hue-rotate(233deg) brightness(98%) contrast(88%);
    --course-price-bg-color: #f0ecf3;
    --course-price-boxes-bg-color: var(--hobby-color);
    --course-price-color: #ffffff;
    --discount-color: #ff0000;

    /*packages*/
    --package-price-bg-color: #f0ecf3;
    --package-price-boxes-bg-color: var(--hobby-color);
    --package-price-color: #ffffff;
    --package-application-bg-color: #541a35;
    --package-application-color: #ffffff;

    /*calculators*/
    --calculator-price-bg-color: #f0ecf3;
    --calculator-price-boxes-bg-color: var(--hobby-color);
    --calculator-price-color: #ffffff;
    --calculator-application-bg-color: #541a35;
    --calculator-application-color: #ffffff;
    --calculator-throw-bg-color: #d7ecea;
    --calculator-throw-outofrange-bg-color: #efbed5;

    /*databases*/
    --database-price-bg-color: #f0ecf3;
    --database-price-boxes-bg-color: var(--academy-color);
    --database-price-color: #ffffff;

    /*blog*/
    --blog-side-link-bg-color: #bce8e5;
    --blog-side-link-hover-bg-color: #eafaf8;
    --blog-side-article-border-color: #154a46;
    --blog-pages-link-bg-color: #bce8e5;
    --blog-pages-link-hover-bg-color: #eafaf8;
    --blog-pages-active-link-bg-color: #81bdb8;

    /*TID contact*/
    --tid-contact-color: #ffffff;
    --tid-contact-link-color: #c9622f;

    /*TID contact*/
    --product-development-contact-bg-color: #993b0d;
    --product-development-contact-color: #ffffff;
    --product-development-contact-link-color: #762d4f;

    /*NL + contact*/
    --nl-contact-bg-color: #541a35;
    --nl-contact-color: #ffffff;
    --nl-contact-link-color: #5ea8a2;

    /*basket*/
    --basket-icon-color: invert(27%) sepia(97%) saturate(7476%) hue-rotate(357deg) brightness(103%) contrast(114%);
    --course-application-bg-color: #541a35;
    --course-application-color: #ffffff;
    --course-application-link-color: #5ae8a2;
    --basket-missing-pwd-color: #ff0000;
    --basket-ok-pwd-color: #5ae8a2;

    /*profil*/
    --profil-base-boxes-title-bg-color: rgba(255, 255, 255, 0.8);
    --profil-base-boxes-border-color: #154a46;
    --profil-base-boxes-btn-color: #154a46;
    --profil-base-boxes-btn-bg-color: #ffffff;
    --profil-base-boxes-btn-hover-bg-color: #ddd1d7;
    --profil-base-boxes-btn-border: 1px solid #ffffff;
    --profil-base-boxes-btn-hover-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    --my-order-invoice-img-color: invert(23%) sepia(5%) saturate(4705%) hue-rotate(126deg) brightness(96%) contrast(93%);
    --profil-missing-pwd-color: #ff0000;
    --profil-ok-pwd-color: #154a46;

    /*online main*/
    --online-main-boxes-title-bg-color: rgba(255, 255, 255, 0.7);
    --online-main-boxes-border-color: var(--hobby-color);
    --online-main-boxes-btn-color: var(--hobby-color);
    --online-main-boxes-btn-bg-color: #ffffff;
    --online-main-boxes-btn-hover-bg-color: #ddd1d7;
    --online-main-boxes-btn-border: 1px solid #ffffff;
    --online-main-boxes-btn-hover-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);


    /*footer*/
    --foter-bg-color: #154a46;
    --footer-color: #ffffff;
    --footer-link-hover-color: #d7a3c8;
    --footer-blog-cat-link-bg-color: #bce8e5;
    --footer-blog-cat-link-hover-bg-color: #ffffff;
    --fortu-link-hover-color: #718FF9;
}


@media screen and (max-width: 980px) {
    :root {
        --text-content-width: 76%;
    }
}

@media screen and (max-width: 650px) {
    :root {
        --text-content-width: 90%;
    }
}