/* ******* GENERAL STYLES **************** */

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
}

.main { /*, .main > .row */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.main > .row {
  flex: 1 0 auto;
}


html, body, .main, .main > .row {
  box-sizing: border-box;
}



 footer {
   margin-top: 0px;
   padding: 16px 0;
   flex-shrink: 0;
 }

  h1, h2, h3, h4, h5, h6 {
	  font-weight: 800;
  }

  h4 {
	  font-size: 1.22rem;
	  margin-top: 1.5rem;
	  margin-bottom: 1rem;
  }

  h5 {
	  font-size: 1rem;
	  margin-top: 1.5rem;
	  margin-bottom: 1rem;
  }

  h5.card-header {
	  margin-top: 0;
	  margin-bottom: 0;
  }

	.logo {
		max-height:  180px;
	}

  .maincontent {
	  background-color: rgba(255,255,255,.8);
	  padding: 20px;
  }


  footer {
	  margin-top: 16px;
	  padding: 16px 0;
  }

  .form-help {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 14px;
  }

/* ******* BOOTSTRAP STYLES **************** */

 .form-check-input {
    margin-left: 0rem;
}

.form-control, .form-control:focus {
    color: #413a34;
}

.custom-file-label::after {
  content: 'Hochladen';
}


/* ********** MEDIA QUERIES ************* */

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 768px) {
  body {font-size:1rem;} /*1rem = 16px*/
  h1 {font-size:1.5rem;}
  h2 {font-size:1.3rem;}
  h3 {font-size:1.2rem;}
  h4 {font-size:1.1rem;}
  h5 {font-size:1rem;}

  .lead {font-size:1.2rem;}

  .jumbotron img {
    width: 75%;
    max-width: 180px;
  }
}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 544px) {
  body {font-size:0.8rem;} /*1rem = 16px*/
  h1 {font-size:1.2rem;}
  h2 {font-size:1.1rem;}
  h3 {font-size:1rem;}
  h4 {font-size:0.9rem;}
  h5 {font-size:0.8rem;}

  .lead {font-size:1rem;}
}