:root{
	--zft-red: #991900;
	--zft-light-red: #E62600;
	--zft-second-red: #A61C00;
	--zft-dark-gray:#595959;
	--zft-light-gray:#A6A6A6;

	--zft-blue: #0B50E5;
	--zft-dark-blue: #0A2766;
	--zft-light-green: #00995D;
	--zft-dark-green: #004D2E;
	--color: #999;
    --checked-color: #991900;
    --bg-color: #e8e8e8;

}

body {
	background-color: #ffffff;
}

h1,h2,h3,h4,h5 {
	color: var(--zft-red);
}

.container{
	max-width: 1440px;
}

img{
	max-width: 100%;
}

.bg-white {
	background-color: white;
	color: var(--zft-dark-gray);
}

.zft-footer{
	padding: 30px;
	padding-bottom: 50px;
	background-color: var(--zft-dark-gray);
	color: var(--zft-light-gray);
}

.zft-footer img{
	width: 250px;
}

.youtube{
	width: 100px;
}

.navbar a{
	font-variant: small-caps;
	font-weight: bold;
}

.container-zft-index{
	margin-top: 20px;
	margin-bottom: 20px;
}

.shuffle-btn-primary{
	color: var(zft-light-gray);
	background: white; /* var(--zft-red);*/
	 background-color: white; /*var(--zft-red); */
	border-color: var(--zft-red);
	border-radius: 6px;
}

.shuffle-btn-primary:hover{
	color: white;
	background: var(--zft-light-red);
	background-color: var(--zft-light-red);
	border-color: var(--zft-light-red);
}

.btn-primary{
	color: white;
	background: var(--zft-red);
	background-color: var(--zft-red);
	border-color: var(--zft-red);
}

.btn-primary:hover{
	color: white;
	background: var(--zft-light-red);
	background-color: var(--zft-light-red);
	border-color: var(--zft-light-red);
}

.row-content{
	margin-bottom: 30px;
}

.zft-headline-bg {
	padding-left: 20px;
	color: white;
	background-image: url("/img/zft-headlines-background.png");
	background-repeat: no-repeat;
	background-size: 380px;
	background-position: -10px, 0px;
}

.sticky-top.scrolled {
	opacity: 0.9;
	color: white;
	background-color: var(--zft-red) !important;
	transition: background-color 500ms linear;
	background-image: url("/img/logo_zft_inverted.png");
	background-repeat: no-repeat;
	background-size: 100px;
	background-position: right;
}

.sticky-top.scrolled .nav-link{
	color: white;
}

.card-img-overlay-gray{
	color: white;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(89,89,89,1));
}

.card-topic-title{
	background-image: url("/img/zft-headlines-background.png");
	color:white;
}

.a-footer{
	color: var(--zft-light-gray) !important;
}

.a-footer:hover{
	color: var(--zft-light-red)!important;
}

.project-logos{
	height: 60px !important;
	margin: 14px !important;
}

.headbanner img{
	height: 140px;
}

.carousel-item img{
	min-height: 140px;
	object-fit: cover;
	object-position: 50% 0;
}

#zft-banner-head{
	display: block;
}
#zft-banner-head img{
	object-fit: cover !important;
	object-position: 0% 0; 
	min-width: 354px;
}
#zft-logo-head{
	display: block;
}

 @media (max-width: 770px){
 	#zft-banner-head{
 		display: none;
 	}
 	#zft-logo-head{
 		display: none;
 	}

 	.sticky-top {
	color: white;
	background-color: var(--zft-red) !important;
	transition: background-color 500ms linear;
	background-image: url("/img/logo_zft_inverted.png");
	background-repeat: no-repeat;
	background-size: 100px;
	background-position: right;
	}

	.navbar-light .navbar-nav .nav-link {
	color: white;
	}
 }

 @media(max-height: 823px){
 	#zft-banner-head{
 		display: none;
 	}
 	#zft-logo-head{
 		display: none;
 	}

 	.sticky-top {
	color: white;
	background-color: var(--zft-red) !important;
	transition: background-color 500ms linear;
	background-image: url("/img/logo_zft_inverted.png");
	background-repeat: no-repeat;
	background-size: 100px;
	background-position: right;
	}

	.navbar-light .navbar-nav .nav-link {
	color: white;
	}
 }

a:hover {
    color: var(--zft-light-red);
    text-decoration: none;
}

a .zft-headline-bg:hover {
    color: var(--zft-light-red);
}

.slider-gray-overlay{
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: linear-gradient(rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.8) 100%);
}

.carousel-caption{
	bottom: 0px;
}

.carousel-caption h5{
color: white;
}

.dropdown-item.active .dropdown-item:active a.active.dropdown-item{
 background-color: var(--zft-red)!important;
}


fieldset {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
	/* outline: 1px solid var(--zft-light-gray) */
}

.search-label{
	margin-right: 0.9rem;
	padding-top: 0.2rem;
	margin-top: 0.3em;
}

.search-radio{
	height: 1.2rem;
    width: 1.2rem;
    margin-right: 0.4rem;
	appearance: none;
    /* Safari support */
    -webkit-appearance: none;
    border: 0.2rem solid #fff;
    background-color: var(--zft-red);
    border-radius: 50%;
	accent-color: var(--zft-light-green);
	background: #FF572233;

	/* The border will be the spacing between the dot and the outer circle */
	border: 3px solid #FFF;

	/* And by creating a box-shadow with no offset and no blur, we have an outer circle */
	box-shadow: 0 0 0 1px var(--zft-red);
	/* outline: 1px solid #999; */
}

/* keyboard navigation focus appearance */
.search-radio:focus-visible {
    outline-offset: 0;
}

.box-shadow {
    box-shadow: 0 0 0 1px var(--color);
}

.box-shadow:hover {
    border-width: 0;
}

.box-shadow:checked {
    box-shadow: 0 0 0 1px var(--zft-blue);
    background-color: var(--zft-dark-gray);
    border-width: 0.2rem;
}

.outline {
    outline: 1px solid var(--zft-red);
}

.outline:hover {
    outline-color: var(--checked-color);
}

.outline:checked {
    outline-color: var(--checked-color);
    background-color: var(--checked-color);

    animation: outline-checked;
    animation-duration: 0.1s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: linear;
}

.big-card {
    width: 50%; 
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    float: right;
    margin-left: 20px; 
    margin-bottom: 20px;
    border-left: 20px;
}

.big-card-img {
    width: 100%; 
    height: auto;
}

.big-card-body {
    padding: 20px;
}

.big-card-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.big-card-text {
    font-size: 1rem;
    color: #333;
}

.big-card table {
    width: 90%; 
    border-collapse: collapse;
}

.big-card h5 {
    padding-top: 20px
}

.big-card td {
    padding: 0px 2px 5px 0px;
}

.big-card td:first-child {
    min-width: 20px;
    /* font-weight: bold; */
    text-align: left;
}

.big-card td:last-child {
    text-align: left;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}


@media (max-width: 768px) {
    .big-card {
        width: 100%;
        float: none;
        margin-left: 0;
    }
}

@keyframes outline-checked {
    0% {
        outline-offset: 0;
    }
    100% {
        outline-offset: -0.1rem;
    }
}


/* .altrows {
		background-color:gainsboro;
} */



/*
.dropdown-menu.columns-3 {
	min-width: 600px;
}
.dropdown-menu li a {
	padding: 5px 15px;
	font-weight: 300;
}
.multi-column-dropdown {
	list-style: none;
  margin: 0px;
  padding: 0px;
}
.multi-column-dropdown li a {
	display: block;
	clear: both;
	line-height: 1.428571429;
	color: #333;
	white-space: normal;
}
.multi-column-dropdown li a:hover {
	text-decoration: none;
	color: #262626;
	background-color: #999;
}
 
@media (max-width: 767px) {
	.dropdown-menu.multi-column {
		min-width: 240px !important;
		overflow-x: hidden;
	}
}*/