/* Farbdefinitionen */

:root {
	--testbg: #FFFFFF;
	--testbg2: #fff8f7;
	--testfg1: #333333;
	--testfg2: #232323;
	
	--testbg_2: #202932;
	--testfg1_2: #e1e1e1;
	
	--testfg2_2: #e7e7e7;
	
	--testHighlight: #E62424;
	
	--testbg3: #bf0f02;
	--testfg3: #e1e1e1;
	--testbtn3: #0e0000;	
	
	--testbg4: #FAFAFA;
	--testfg4: #333333;
	--testbtn4: #0e0000;	
}

/* Modus Hell */

.theme1-bg
{
	background : var(--testbg) !important;
}

.theme1-text1
{
	color: var(--testfg1) !important;
}

.theme1-text2
{
	color: var(--testfg2) !important;
}

.theme1-btn
{
	color: var(--testfg1_2) !important;
	background: var(--testbg_2) !important;
	border: var(--testbg_2) !important;
}

.theme1-btn:hover
{
	color: var(--testfg3) !important;
	background: var(--testbg3) !important;
	border: var(--testbg3) !important;
}

/* Modus Dunkel */

.theme2-bg
{
	background : var(--testbg3) !important;
}

.theme2-text1
{
	color: var(--testfg1_2) !important;
}

.theme2-text2
{
	color: var(--testfg2_2) !important;
}

.theme2-btn
{
	color: var(--testfg1) !important;
	background: var(--testbg) !important;
	border: var(--testbg) !important;
}

.theme2-btn:hover
{
	color: var(--testfg1_2) !important;
	background: var(--testHighlight) !important;
	border: var(--testHighlight) !important;
}

/* Modus Rot */

.theme3-bg
{
	background : var(--testbg3) !important;
}

.theme3-text1
{
	color: var(--testfg3) !important;
}

.theme3-text2
{
	color: var(--testfg3) !important;
}

.theme3-btn
{
	color: var(--testfg3) !important;
	background: var(--testbtn3) !important;
	border: var(--testbtn3) !important;
}

.theme3-btn:hover
{
	color: var(--testfg3) !important;
	background: var(--testbg3) !important;
	border: var(--testbg3) !important;
}

/* Modus Grau */

.theme4-bg
{
	background : var(--testbg4) !important;
}

.theme4-text1
{
	color: var(--testfg4) !important;
}

.theme4-text2
{
	color: var(--testfg4) !important;
}

.theme4-btn
{
	color: var(--testfg4) !important;
	background: var(--testbtn4) !important;
	border: var(--testbtn4) !important;
}

.theme4-btn:hover
{
	color: var(--testfg4) !important;
	background: var(--testbg4) !important;
	border: var(--testbg4) !important;
}

/*Listgroup */

.list-group-item:hover
{
    background-color: var(--testbg4) !important;  	
}

/* Cards */

.card
{
  align-items: center;
}

.card-title {
  font-weight: bold;
}

.card img {
  border-top-right-radius: 0;
  border-bottom-left-radius: calc(0.25rem - 1px);
}

@media only screen and (min-width: 800px) {
.card-horizontal
{
	flex-direction: row !important;
}

.card-horizontal img {
  width: 30% !important; 
}
}

.dropdown-menu
{
    background-color: var(--testbg) !important;  
    border: 0px solid var(--testbg) !important;
}

.dropdown-item:focus
{
    background-color: var(--testbg3) !important;  
}

@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{
		display:block;
		opacity: 0;
		visibility: hidden;
		transition:.3s;
		margin-top:0;
		}
	.navbar .dropdown-menu.fade-down{ 
	top:80%; 
	transform: rotateX(-75deg);
	transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ 
	top:180%;  
	}
	.navbar .nav-item:hover .dropdown-menu{ 
	transition: .3s;
	opacity:1;
	visibility:visible;
	top:100%;
	transform: rotateX(0deg);
background: var(--testbg) !important;	}
}
.content-section-light
{
	padding-top: 6rem !important;
	padding-bottom: 3rem !important;
	background: var(--testbg2);
	color: var(--testfg1);
	margin:0 !important;
	width:100% !important;
}

.custom-toggler .navbar-toggler 
{
    border: 0px;
    border-color: rgba(102,102,102, 0.7);
}

.footer
{	
	padding-top:20px;
	padding-left:80px;
	padding-right:80px;
	color: var(--testfg1_2);
    background: var(--testbg_2);
}

.footer-link
{
    color: var(--testfg1_2);
    text-decoration: none;
}

.footer-link:hover
{
    color: var(--testfg1_2);
    border-bottom: 2px solid var(--testbg3);
    text-decoration: none;
}

.form-control:focus
 {
        border-color: var(--testfg1) !important;
        box-shadow: 0 0 0 0.2rem rgba(102, 102, 102, 0.25) !important;
} 

hr.title-divider {
  border: 20px solid var(--testbg3);
  margin-top:0;
}

hr
{
	height:2px;
	border-width:0;
	color: var(--testfg1_2);
	background-color: var(--testfg1_2);
}

.header-icon
{
	font-size: 30px !important;  
}

.header-icon-red
{
    color: var(--testbg3);
	font-size: 30px !important;  
}

.container img {
   width: 100%;
}

.illustration-static
{
	font-size: 120px !important;
    border: 10px solid var(--testbg);
	background: var(--testbg);
	color: var(--testfg1);
	transition: all .2s ease-in-out;
    border-radius: 100px;
	padding: 30px;
}

.illustration-static:hover
{
	font-size: 140px !important;
    color: var(--testbg3) !important;
	transition: all .2s ease-in-out;
    border: 10px solid var(--testbg3);
    border-radius: 100px;
	padding: 20px;
	box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%);
}

.illustration-dynamic
{
	font-size: 40em !important;
    border: 2em solid var(--testbg3);
	transition: all .2s ease-in-out;
    border-radius: 20em;
	padding: 5em;
}

.illustration-dynamic:hover
{
	font-size: 200px !important;
    color: var(--testbg3) !important;
	transition: all .2s ease-in-out;
    border: 10px solid var(--testbg3);
    border-radius: 100px;
	padding: 20px;
	box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%);
}

.link-light {
  color: var(--testfg3);
}

.link-dark {
  color: var(--testfg1);
}

.link-dark:hover {
    color: var(--testfg1) !important;
    border-bottom: 2px solid var(--testbg3);
	text-decoration: none !important;
}

.link-light:hover {
    color: var(--testfg3) !important;
    border-bottom: 2px solid var(--testbg3);
	text-decoration: none !important;
}

.navbar
{
    background-color: var(--testbg);  
}

.nav-link 
{
    color: var(--testfg1) !important;
}

.nav-link-selected
{
	color: var(--testbg3) !important;
}

.navbar-brand 
{
    color: var(--testfg1) !important;
}

.navbar-custom .navbar-nav .nav-link:hover > span, .navbar-dark .navbar-nav .active > .nav-link span 
{
    border-bottom: 3px solid var(--testbg3);
}

.top-bar-light
{
	background: var(--testbg);
	color: var(--testfg1);
	padding: 5px;
	margin:0px;
}

.test{
	background:red;
}


@media only screen and (max-width: 1000px) {
    .hide-tablet {
        display: none !important;
    }
}

@media only screen and (min-width: 1000px) {
    .show-tablet {
        display: none !important;
    }
}


@media only screen and (max-width: 700px) {
    .hide-mobile-large {
        display: none !important;
    }
}

@media only screen and (min-width: 700px) {
    .show-mobile-large {
        display: none !important;
    }
}


@media only screen and (max-width: 500px) {
    .hide-mobile {
        display: none !important;
    }
}

@media only screen and (min-width: 500px) {
    .show-mobile {
        display: none !important;
    }
}

.card-flip > div {
  backface-visibility: hidden;
  transition: transform 500ms;
  transition-timing-function: linear;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
}

.card-flip:hover .card-front {
  transform: rotateY(-180deg);
}
  
.card-flip:hover .card-back {
  transform: rotateY(0deg);
}

.transparent-bg {
   background-color: rgba(255,255,255, 0.0) !important;
   border-color: rgba(255,255,255, 0.0) !important;
}

.underline-header {
  text-decoration: underline;
  text-decoration-color: var(--testbg3);
  text-decoration-thickness: 3px;
}