object {
     width:100%;
     max-height:100%;
}

.error { color: #FF0000;}

.container {
    position: relative;
   font-family: Bradley Hand, "Brush Script", fantasy;
    font-style: bold;
    text-align: center;
    color: #bd0202;
    /*background-color: #ada6a6;*/
    font-size: 4vw;
}

.top-left {
    position: absolute;
    bottom: 16px;
    right: 4px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  box-shadow: 5px 5px 5px #888888;
}

.topnav a {
  float: left;
  display: block;
  color: #bd0202;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 100%;
}

.active {
  background-color: #333;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    /*color: white;*/
    color:#bd0202;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #bd0202;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background-color: #f1f1f1;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #bd0202;
  color: white;
}

.dropdown-content a:hover {
    background-color: #bd0202;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}


@media screen and (max-width: 1230px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1230px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
@media (max-width: 600px) {
	font-size: 60%;
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    font-size: 16px;
    /*padding: 150px;*/
    margin-top: 20px;
    margin-left: 15%;
    margin-right: 15%;
    /*background: #f1f1f1;*/
    background: linear-gradient(to bottom, #737070, #bd0202);
    /* worked well background: rgba(76, 175, 80, 0.3);*/
    /*background: rgba(76, 175, 80, 0.3);*/
}

 
/* Header/Blog Title */
.header {
    /*padding: 10px;*/
    text-align: center;
    margin-bottom: 20px; 
    box-shadow: 5px 5px 5px #888888;
    border-radius: 34px;
    /*background: #f1f1f1;*/
}

a {
text-decoration: none;
}

/* for online anmeldung */
input[type=email], input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
/*input[type=submit] {*/
/*  background-color: #4CAF50;*/
/*  color: white;*/
/*  padding: 12px 20px;*/
/*  border: none;*/
/*  border-radius: 4px;*/
/*  cursor: pointer;*/
/*  float: left;*/
/*}*/


/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/*label {*/
/*    width: 100%;*/
/*    display: block;*/
/*    float: left;*/
/*}*/

/*legend { */
/*    display: block;*/
/*    border: none;*/
/*}*/

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
    float: left;
    width: 75%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 25%;
    /*background-color: #f1f1f1;*/
    padding-left: 20px;
}

/* Fake image */
.fakeimg {
    /*background-color: #aaa;*/
    width: 100%;
    padding: 20px;
}

h2 {
    font-size: 100%;
}

.autor {
    font-size: 130%;
    font-style: bold;
    color: #000;
    margin-top: 30px;
    text-align: center;
}

.emph {
   color: #bd0202;
   font-size: 100%;
   font-weight: bold;
   font-style: sans-serif;
   font-family: Bradley Hand, "Brush Script", fantasy;
   text-transform: uppercase;
}

.emphtext {
   color: #7AC224;
}

.normal {
   color: #000;
}

.justi_im {
   text-align: left;
}

.justi {
   text-align: left;
   padding: 5%;
   margin-top: 20px;
}

.justigr {
   text-align: left;
   font-size: 150%;
   padding: 10%;
   margin-top: 20px;
}

.center {
   text-align: center;
}
/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 5%;
    margin-top: 20px;
    text-align: center;
    box-shadow: 5px 5px 5px #888888;
    /*box-shadow: 5px 10px #888888;*/
}

.cardlang {
    background-color: white;
    padding: 5%;
    margin-top: 20px;
    text-align: center;
    box-shadow: 5px 5px 5px #888888;
    /*box-shadow: 5px 10px #888888;*/
    
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 5px;
    text-align: center;
    background: #f1f1f1;
    box-shadow: 5px 5px 5px #888888;
    margin-top: 20px;
}



/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


.imgcenter {
    height: 350px;
    width: auto;
    vertical-align: center;
    margin-left: -50;
    margin-top: -50;
    overflow: hidden;
}

.imgnext {
    height: 300px;
    width: auto;
    margin-left: -50;
    /* margin-top: -50; */
    margin-top: 20px;

}