:root {
            --dark-color: #2d737b;
            --light-color: #88c5c8;
            --main-background: #e9fafb;
            --primary-background: #39939c;
            --primary-textColor: #ffffff;
            --secondary-background: #16393d;
            --secondary-textColor: #ffffff;
            --secondary-color:  #88c5c8;
            --accent-background: #2e5f64;
            --accent-textColor: #ffffff;
            --primary-gradient: linear-gradient(180deg, #39939c, #51c7d2);
            --secondary-gradient: linear-gradient(180deg, #16393d, #29636b);
        }
         body {
            background: var(--main-background); 		/* background of your website */
            color: var(--main-color); 		/* color of your website */
        }

        a {
            color: var(--secondary-background); /* color of your links */
        }

        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background: linear-gradient(180deg, rgba(163,214,221,1) 70%, rgba(57,147,156,1) 71%);

        /*  background-image: none;  Set to none if you want to disable the gradient */
        }


        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--primary-background); /* background of your primary buttons */
            border-color: var(--primary-background); /* border color of your primary buttons */
            color: var(--primary-textColor); /* text color of your primary buttons */
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-textColor); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-textColor); /* text color of your card body links */
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px);
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 24px);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(12px, 5vw, 22px);
		}
blockquote
{
  background:  url('/images/postquote.png') no-repeat scroll;
  padding: 10px 10px 10px 38px;
  margin: 10px 10px 10px 50px;
  color: #091617;
  font-weight: normal;
  font-style: italic;
  text-align: left;
  overflow: auto;
  clear: both;
}
div.no-card {
border-left-style: solid;
border-left-width: 2px;
border-left-color: var(--light-color);
border-bottom-style: solid;
border-bottom-width: 2px:
border-bottom-color: var(--light-color);
padding-left: 10px;
padding-right: 10px;
} 
div.site-description {
text-align: center;
  color: var(--dark-color) !important;
}
div.bigD-footercontact {
 height: 64px;
 line-height:normal;
 vertical-align: middle;
 display: inline;
 padding: 20px;
 margin-bottom: 20px;
 text-align: center;
 display: inline-block;
}

div.bigD-footercontact img {
  vertical-align: middle;  margin-right: 5px;
}
footer p.bigD-footercredits {
  clear: both;
  font-size: smaller;
  height: 40px !important ;
  text-align: center;
  vertical-align: middle;
  margin: 32px auto;
}
p.bigD-footercredits img {
  vertical-align: middle;
}

.bigD-fnt15 {font-size:1.5em; vertical-align:middle;}
.bigD-fnt20 {font-size:2.0em; vertical-align:middle;}
.bigD-fnt25 {font-size:2.5em; vertical-align:middle;}
.bigD-fnt30 {font-size: clamp(22px, 5vw, 36px); 
             vertical-align:middle;}
.bigD-fnt40 {font-size:4.0em; vertical-align:middle;}
.bigD-fnt50 {font-size:5.0em; vertical-align:middle;}

.bigD-arrowdollar {
   background: #135961 url("/images/arrowdollar2.png"); 
   background-position: right top; 
   min-height: 350px; 
   width: 100%; 
   color: white; 
   font-size: 2.7vw; 
   line-height: 150%; 
   padding: 100px 0; 
   text-align: center;
}