/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/open-sans-v18-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/open-sans-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/open-sans-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/open-sans-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/open-sans-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/open-sans-v18-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}




* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  margin: 0;
  color: #444;
  background-color: #500000;
  background: url("img/background.jpg") fixed;
  background-repeat: no-repeat;
  background-size: cover; 
  opacity: 0.98;
}

p { line-height: 1.5em; }

/** wird insbesondere bei Erfolge der Studierenden verwendet. Hervorheben der Kategorien **/
.emphTxt { background: #f1f1f1; font-weight: bold; }

h1 {font-family: "Garamond", font-size: 1.5em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.1em;}

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

.content { max-width: 1000px; margin: auto;}
.logo { position: absolute; top: 5px; }

/* Header/logo Title */
.header {
  padding: 0px;
  text-align: center;
  <!--background: #000;-->
  color: white;
  overflow: hidden;
}

.header img { float:left; width:25%; padding:4px;  }

.headerimage {width:100%; height:100px;}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

.caption {
	height:100%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  opacity: 0.6;
  width:50%;
  color: #fff;
  padding: 18px;
  font-size: 18px;
  letter-spacing: 6px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

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

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: darkred	;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  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;
}

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

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

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  border: 1px solid #CCC;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/right column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}

.fullwidth .main {   
	-ms-flex: 100%; /* IE10 */
  	flex: 100%; 
}

.fullwidth .side {   
	-ms-flex: 0%; /* IE10 */
  	flex: 0%; 
  	display: none;
}

/*
.main a, .side a {color: #993333;}
.main a:link, .side a:link { text-decoration: none;}
.main a:hover, .side a:hover { text-decoration: underline; }
*/
.row a, .footer a {color: #993333;}
.row a:link, .footer a:link { text-decoration: none;}
.row a:hover, .footer a:hover { text-decoration: underline; }

.side ul { list-style-type: none; padding-left: 5px; margin-left: 5px; }
.side li { margin-bottom: 10px; border-bottom: 1px solid #CCC;  }

.side img { width:100%; margin-bottom: 10px; }


.erfolge img { width:25%; float: left; padding: 0 15px 0 0; }

.erfolge ul {
  list-style-type: none;
  padding: 0;
  /*border: 1px solid #ddd;*/
}

.erfolge ul li {
  padding: 8px 16px;
  /*border-bottom: 1px solid #ddd;*/
  margin-bottom: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.erfolge ul li:last-child {
  border-bottom: none;
}

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

/*.main li { border: 1px solid #CCC; padding:10px; list-style-type: none; clear: both;}*/
.main li img {margin-bottom: 10px; }

.col50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #500000;
  width: 100%;
  padding: 20px;
}

.imagegrid {   display: flex; flex-wrap: wrap; padding: 0 4px; }
.ig-item  { flex: 20%; margin: 8px; vertical-align: middle;  }
.ig-item img { vertical-align:middle; }


/****** Responsive Image Grid ********/

.igridrow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.igridcol {
  flex: 50%;
  max-width: 50%;
  padding: 0 4px;
}

.igridcol img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of three columns */
@media screen and (max-width: 800px) {
  .igridcol {
    flex: 75%;
    max-width: 75%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .igridcol {
    flex: 100%;
    max-width: 100%;
  }
  
	h1 {font-size: 1.2em;}
	h2 {font-size: 1.1em;}
	h3 {font-size: 1.0em;}
	h4 {font-size: 0.9em;}

}

/****** / End Resp Img Grid **********/



/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

.footer p {  }

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
  
}