:root {
--cassiopeia-color-primary: #0994e8;
--cassiopeia-color-link: #163a59;
--cassiopeia-color-hover: #003e8a;
}
h1 {
  color: #000;
  font-size: 1.6rem; 
  font-weight: bold;
}
h2 {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: bold;
  color: #232323;
}
h4 {
  color: #0994e8;
  font-size: 1.3rem;
}
p {
  font-size: 1rem;
  line-height: 1.5;
  color: #232323;
}
.site-grid {
  grid-gap: 0 !important;
}

/* Logo + Mainnavigation */
.brand-logo {
    display: inline-block;
	width: 160px;
  margin-left: 15px;
  text-decoration: none !important;
}

main {
   width: 980px;
   margin: 20px auto; 
}
.header.container-header.full-width {
	display: grid;
	grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,19.875rem)) minmax(0,1fr);
	grid-gap: 0 1em;
	align-items: center;
}
.container-header .grid-child:first-child {
	grid-column: 2/2;
}
.container-header .container-nav {
	grid-column: 3/5;
}
.container-header .navbar-brand {
  font-size: 1.3rem;
}

/* Startseite */
div.log-streaming {
  max-width: 300px;
  float: left;
}
div.log-streaming-text {
  min-height: 500px;
  margin-left: 300px;
  border-left: 5px solid #eee;
  padding-left: 20px;
}
div.text-content {
  margin-left: 20px;
  margin-right: 20px;
}
div.text-content p, div.text-content h3, div.text-content h4 {
  margin: 10px 0;
}
.com-content-article ul {
  padding-left: 1rem;
}
div.text-content ul {
  padding-left: 1rem;
}
.btn-group-lg > .btn, .btn-lg {
  padding: 1rem 1.5rem;
}

.container-header .grid-child:first-child {
	grid-column: 2/4;
}
.container-header .container-nav {
	grid-column: 4/6;
}
img.savethedate {
  max-width: 100%;
  height: auto;
}

/* Player */
/*responsive Streaming-Template-Player CSS: */
div.bm-livestream-player {
  float: left;
  width: 70%;
  margin: 10px 1%;
}
div.bm-livestream-chat {
  float: right;
  width: 25%;
  margin: 10px 1%;
}
div.bm-livestream-chat p {
  padding-bottom: 20px;
}
.videodiv {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
}

.videoiframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[data-player] .player-error-screen {
  display: none !important;
}

/* Feedback */
input#jumpin {
	background-color: var(--cassiopeia-color-primary);
	border-color: var(--cassiopeia-color-primary);
}
input#jumpin:hover {
    background-color: rgb(0, 62, 138);
	border-color: var(--cassiopeia-color-primary) !important;
}

/* Registrierung */
.bm-custom-register {
	float: left;
	width: 50%;
}
.com-users-registration {
	width: 44%;
	float: right; 
	padding: 30px;
	background-color: #EFEFEF;
}
.bm-custom-register button {
  margin: 20px;
}
.btn a, .btn a:hover {
	text-decoration: none;
	color: #FFF;
}
/* Kontakt Seite */
div.com-contact__miscinfo.contact-miscinfo {
  padding-left: 20px;
  float: left;
  width: 49%;
}
.contact-misc h1 {
  margin-left: 20px;
}
.kontakt-logos {
  width: 160px;
  margin-bottom: 15px;
}
.kontakt-logos img {
  max-width: 100%;
  height: auto;
  margin-left: 20px;
}
.kontakt-infos {
  margin-left: 20px;
}
#jform_contact_message {
  height: 7rem;
}
div.com-contact.contact {
  float: left;
  width: 49%;
}
div.com-contact.contact h1, div.com-contact.contact h3 {
  display: none;
}
div.contact-form {
  background-color: #F3F3F3;
  padding: 20px;
  border: 1px solid #EEE;
}
/* 404 Seite */
.card {
  border: none;
  width: 980px;
  margin: 20px auto;
}
 legend {
	 font-size: 1.1em !important;
	 margin-bottom: 20px;
 }
.cleared {
	float: none;
	clear: both;
}
 /* Footer */
 footer {
   padding: 0 20px;
}

@media (min-width: 280px) and (max-width: 575px) {
/* Logo + Mainnavigation */
.brand-logo {
    display: flex;
	width: 100%;
    margin-left: 0;
  font-size: 1.3rem;
 white-space: normal;
}
  .container-header .container-nav nav {
    margin-top: 0;
  }
main {
   margin-top: 0!important;
   width: 100%;
  }
.header.container-header.full-width {
	display: grid;
	grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,19.875rem)) minmax(0,1fr);
	grid-gap: 0 1em;
	align-items: center;
}
  
div.streaming-logo1 {
    max-width: 90%;
    margin: 5px auto;
  }
  
/* Profil bearbeiten */
.float-end {
    float: none !important;
    margin-top: 20px;
  }
#users-profile-core, #users-profile-custom, .profile-edit, .com-users-registration, .bm-custom-module, .card {
    max-width: 80%;
    margin: 5px auto;
  }
.mod-login {
    width: 95%;
    margin: 10px auto;
  }
 div.com-users-login.login, div.com-users-reset.reset, div.com-users-remind.remind {
	 width: 90%;
	 margin: 20px auto;
 }

  /* Video Player */
div.bm-livestream-player, div.bm-livestream-chat {
  float: none;
  width: 100%;
  margin: 10px auto;
}
.videodiv {
    max-width: 90%;
    margin: 0 auto;
  }
  /* Registrierung */
.bm-custom-register, .com-users-registration {
	float: none;
	width: 100%;
  max-width: 100%;
}
 
.container-header .grid-child:first-child {
	grid-column: 2/6;
}
.container-header .container-nav {
    grid-column: 2/6;
}
body.wrapper-fluid footer > .grid-child, body.wrapper-fluid header > .grid-child {
	padding-left: 0;
	padding-right: 0;
}
.metismenu.mod-menu .metismenu-item {
    margin-left: 0;
  }
body.wrapper-fluid footer > .grid-child {
    width: 100%;
	margin-top: 0;
}
h1 {
	font-size: 1.3rem;
	margin: 20px;
}
h2 {
	font-size: 1.2rem;
	margin: 10px 20px;
}
h3 {
	font-size: 1.1rem;
	margin: 10px 20px;
}
h4 {
	font-size: 1.1rem;
	margin: 10px 20px;
}
p {
	margin: 10px 20px;
	font-size: 1rem;
	word-wrap: break-word;
}

div.com-contact.contact, div.com-contact__miscinfo.contact-miscinfo {
  float: none;
  width: 100%;
  padding-left: 0;
}
div.contact-form h1 {
	margin: 10px 0;
}

 div.com-contact__miscinfo.contact-miscinfo h2, div.com-contact__miscinfo.contact-miscinfo p {
  margin: 10px 20px;
}

div.com-contact.contact, div.com-contact__miscinfo.contact-miscinfo {
  float: none;
  width: 100%;
  padding-left: 0;
}
.kontakt-logos {
  width: 180px;
}
.kontakt-infos {
  margin-left: 0;
}
/* Startseite */
div.log-streaming {
  max-width: 90%;
  float: none;
  margin: 5px auto;
}
div.log-streaming-text {
  max-width: 100%;
  min-height: auto;
  float: none;
  margin-left: 0;
  border-left: 0;
  padding-left: 0;
  margin-top: 30px;
}
/* Footer */
.footer .mod-menu {
  position: relative;
  width: 100%;
  text-align: center;
}
.mod-list li {
  display: block;
  width: 100%;
  padding: .5em 0;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.container-header .container-nav {
    grid-column: 5/5;
}
.metismenu.mod-menu .metismenu-item {
    margin-left: -50px;
  }

body.wrapper-fluid footer > .grid-child {
    width: 100%;
}

/* Logo + Mainnavigation */
.brand-logo {
    display: flex;
	width: 150px;
    margin-left: 0;
   font-size: 1.4rem;
}
main {
   margin-top: 0!important;
   width: 100%;
  }
  /* Registrierung */
.bm-custom-register, .com-users-registration {
	float: none;
	width: 100%;
  max-width: 100%;
}
.header.container-header.full-width {
	display: grid;
	grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,19.875rem)) minmax(0,1fr);
	grid-gap: 0 1em;
	align-items: center;
}
  
div.streaming-logo1 {
    max-width: 90%;
    margin: 5px auto;
  }
  
/* Profil bearbeiten */
.float-end {
    float: none !important;
    margin-top: 20px;
  }
#users-profile-core, #users-profile-custom, .profile-edit, .bm-custom-module, .card {
    max-width: 80%;
    margin: 5px auto;
  }
.mod-login {
    width: 95%;
    margin: 10px auto;
  }
 div.com-users-login.login, div.com-users-reset.reset, div.com-users-remind.remind {
	 width: 90%;
	 margin: 20px auto;
 }
  /* Video Player */
div.bm-livestream-player, div.bm-livestream-chat {
  float: none;
  width: 100%;
  margin: 10px auto;
}
.videodiv {
    max-width: 90%;
    margin: 0 auto;
  }
.container-header .grid-child:first-child {
	grid-column: 2/5;
}
.container-header .container-nav {
    grid-column: 5/5;
}
body.wrapper-fluid footer > .grid-child, body.wrapper-fluid header > .grid-child {
	padding-left: 0;
	padding-right: 0;
}
.metismenu.mod-menu .metismenu-item {
    margin-left: 0;
  }
body.wrapper-fluid footer > .grid-child {
    width: 100%;
	margin-top: 0;
}

h1 {
	font-size: 1.3rem;
	margin: 20px;
}
h2 {
	font-size: 1.2rem;
	margin: 10px 20px;
}
h3 {
	font-size: 1.6rem;
	margin: 10px 20px;
}
h4 {
	font-size: 1.1rem;
	margin: 10px 20px;
}
p {
	margin: 10px 20px;
	font-size: 1rem;
	word-wrap: break-word;
}

div.com-contact.contact, div.com-contact__miscinfo.contact-miscinfo {
  float: none;
  width: 100%;
  padding-left: 0;
}
div.contact-form h1 {
	margin: 10px 0;
}

 div.com-contact__miscinfo.contact-miscinfo h2, div.com-contact__miscinfo.contact-miscinfo p {
  margin: 10px 20px;
}

div.com-contact.contact, div.com-contact__miscinfo.contact-miscinfo {
  float: none;
  width: 100%;
  padding-left: 0;
}
div.com-contact.contact, div.com-contact__miscinfo.contact-miscinfo {
  float: none;
  width: 100%;
  padding-left: 0;
}
.kontakt-logos {
  width: 180px;
}
.kontakt-infos {
  margin-left: 0;
}
/* Startseite */
div.log-streaming {
  max-width: 90%;
  float: none;
  margin: 5px auto;
}
div.log-streaming-text {
  max-width: 100%;
  min-height: auto;
  float: none;
  margin-left: 0;
  border-left: 0;
  padding-left: 0;
  margin-top: 30px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.container-header .container-nav {
    grid-column: 4/6;
}
.container-header .grid-child:first-child {
  grid-column: 2/2;
}
  .metismenu.mod-menu .metismenu-item {
    display: inline-block;
    font-size: 1rem;
    padding: .5rem;
  }
main, .card {
	width: 90%;
}
body.wrapper-fluid footer > .grid-child {
    width: 100%;
}
h1 {
    font-size: 1.9rem;
}
h2 {
    font-size: 1.6rem;
}
div.bm-livestream-player {
  width: 60%;
}
div.bm-livestream-chat {
  width: 35%;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
body.wrapper-fluid footer > .grid-child {
    width: 960px;
  }
 main, .card {
	width: 90%;
	max-width: 1100px;
}
div.bm-livestream-player {
  width: 60%;
}
div.bm-livestream-chat {
  width: 35%;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
body.wrapper-fluid footer > .grid-child {
    width: 1150px;
  }
 main, .card {
	width: 90%;
	max-width: 1150px;
}
.footer .grid-child {
	width: 90%;
    max-width: 1150px;
}
.kontakt-logos, .kontakt-infos {
    float: left;
}
.kontakt-infos {
    margin-left: 50px;
  }
}
@media (min-width: 1400px) {
body.wrapper-fluid footer > .grid-child {
    width: 1300px;
  }
 main, .card {
	width: 1300px;
}
.kontakt-logos, .kontakt-infos {
    float: left;
}
.kontakt-infos {
    margin-left: 50px;
  }
}