/* site width */
/*
.grid-child {
  max-width: 1160px;
}
.site-grid {
  max-width: 1160px;
  margin: auto;
}
*/
/* end site width */

/* banner height */
.container-banner .banner-overlay {
    height: 40vh;
}
/* end banner height */


/* responsive iframe for youtube video */

.container-yt-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe-yt {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* end responsive iframe for youtube video */



.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #000000;
            opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #000000;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
            color: #000000;
 }



/* Made with help of colours.joomla.com */
/* If you feel like it, you can help support */
/* me by donating to paypal@coolcat-creations.com or even just */
/* paying it forward and helping out another Joomler in need. */
/* Either way, have a great day! */


/* new color variables */
:root {
--dark-color: rgba(27,39,57,1);
--light-color:rgba(252,253,255,1);
--primary-color: rgba(27,39,57,1);	
--main-background: #EFEFEF;
--primary-background: #C4C4C4;
--primary-textColor: #000000;
--secondary-background: #d40d0a;
--secondary-textColor: #FCFDFF;
--accent-background: #F07167;
--accent-textColor: #FFFFFF;
--primary-gradient: linear-gradient(110deg, #ffeaea, #d40d0a);
--secondary-gradient: linear-gradient(110deg, #ffeaea, #d40d0a);
--secondary-color: #fefefe;  
--primary-gradient-reversed:  linear-gradient(270deg, #ffeaea, #d40d0a);
}

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-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
}

@media screen and (max-width: 767px) {
  .container-header {
		background-color: var(--primary-background); /* Solid background of your header */
		background-image: var(--primary-gradient-reversed);  /* 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(--dark-color); /* 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(--primary-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);
}