/* Main style sheet container */
#portal-header {
	margin-left: -25.7% !important;
	margin-right: -2.5% !important;
}
#portal-logo, .humboldt-logo {
	z-index: 1;
	background: none;
}
#portal-logo {
	position: absolute !important;
	right: 0px;
}
#portal-logo a {
	display: inline-block !important;
	margin-top: 2em !important;
	margin-right: 3em !important;
}
#portal-logo img {
	width: 12em !important;
	height: auto !important;
        content: url('https://www.ibi.hu-berlin.de/de/hu_logo_custom');
}
#folder_image {
	width: 100.3% !important;
	height: 100% !important;
	background: url('https://www.ibi.hu-berlin.de/de/ibi_header_image_sky') no-repeat !important;
	background-size: cover !important;
}
#folder_image a {
	display: inline-block;
	margin-left: 22.5% !important;
	margin-right: auto;
	margin-top: 9.5em;
}
#folder_image img {
	width: 45em !important;
	height: auto !important;
	background-color: transparent !important;
        content: url('https://www.ibi.hu-berlin.de/de/ibi_header_2_80');
}
#portal-header { 
    height: 20em !important;
}
.content { width: 70%; }
.sidebar{ width: 10%; }
.huSearch {
	margin-top: 0.5em !important;
	margin-bottom: 0.8em !important;
}
.huSearch > dd { padding-right: 0em !important; }
#portal-column-one {
	margin-top: 1.7em;
}
#portal-column-one div.portletWrapper:first-child {
	display: none;
}
.header-menu {
	margin-left: -25%;
}
.portlet-portal-title {
        min-height: 1em;
}
ul.navTreeLevel0 li.navTreeItem {
	background-color: #547495 !important;
}
ul.navTreeLevel0>li.navTreeItem:nth-child(-n+3) {
	background-color: #003366 !important;
}
ul.navTreeLevel1 li.navTreeItem {
	background-color: #8099B2 !important;
}
ul.navTreeLevel2 li.navTreeItem {
	background-color: #CCD6E0 !important;
}
ul.navTreeLevel3 li.navTreeItem {
	background-color: #E2EBF3 !important;
}
ul.navTree.navTreeLevel0 li.navTreeItem a {
	border-top: none !important;
	border-bottom: 0.1em solid white;
	line-height: 1.25em !important;
	color: white !important;
}
ul.navTree li.navTreeItem a.state-internal {
	color: #e8996e !important;
}
ul.navTree li.navTreeCurrentNode a.navTreeCurrentItem {
	color: #003366 !important;
}
ul.navTree li.navTreeItem a.navTreeCurrentItem:hover {
	background-color: #ccd6e0 !important;
}
ul.navTree li.navTreeCurrentNode a.navTreeCurrentItem.state-internal {
	color: #a03e09 !important;
}
ul.navTree.navTreeLevel3 li.navTreeItem a, ul.navTree.navTreeLevel2 li.navTreeItem a {
	color: #003366 !important;
}

/* The flip card container */
.flip-card {
  background-color: transparent;
  width: 32%;
  aspect-ratio: 4/4;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  display: inline-block;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.flip-card-inner img {
  width: 100%;
  height: 100%;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #ccd6e0;
  color: white;
}

.flip-card-back p {
  height: 100%;
}

.flip-card-back a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 9em;
    font-size: 2.5em;
}

/* CSS fuer mobile Ansicht */

/* Querformat */
@media screen and (max-width: 900px) and (min-height: 320px) {
	#portal-header {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
	#folder_image a {
		display: inline-block;
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100% !important;
		margin-top: 2%;
	}
	#folder_image img {
		width: 100% !important;
		height: auto;
		background-color: transparent;
	}
	#folder_image {
		height: 4.5em !important;
		width: 100% !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
		max-width: 100% !important;
	}
        .flip-card-back a { line-height: 5em; }
}

/* Hochformat */
@media screen and (max-width: 500px) and (min-height: 320px) {
	.hu-base-col-xs-20 {
                margin-top: 1em;
        }
        #portal-header {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
	#folder_image a {
		display: inline-block;
		margin-left: 0px !important;
		margin-top: 15%;
	}
	#folder_image img {
		width: 100% !important;
		height: auto;
		background-color: transparent;
	}
	#folder_image {
		height: 10.5em !important;
		width: 100% !important;
	}
	.navTreeItem-mobile > li > a {
		color: white;
		background-color: #003366;
	}
	ul.navTree li.navTreeItem a {
		line-height: inherit !important;
	}
	ul.navTreeLevel1 li.navTreeItem a {
		background-color: #8099B2 !important;
	}
	ul.navTreeLevel2 li.navTreeItem a {
		background-color: #CCD6E0 !important;
	}
	ul.navTreeLevel3 li.navTreeItem a {
		background-color: #E2EBF3 !important;
	}
	.flip-card {
			width: 100%;
	}
}

/* Lehrstuhl Teamseiten */

.ibi_employee_category {
    background-color: #CCD6E0;
    color: #003366 !important;
    width: 100%;
    padding: 5px 2px;
    clear: both;
    margin-bottom: 1em;
}
.ibi_employee {
	margin-left: 1em;
	clear: both;
}
.ibi_employee hr {
    margin-right: 0em !important;
}
.employee_desc {
	margin-left: 0.5em;
	width: 70%;
	display: inline-block;
	clear: both;
	float: left;
    margin-bottom: 60px;
    text-align: justify;
}
.ibi_employee_img {
	width: 24%;
	display: inline-block;
	margin-left: 10px;
}
.ibi_employee_img img {
        border: 1px solid #CCD6E0;
}
.ibi_employee_img a img {
        width: 110%;
}
.image-creator {
    margin-left: 10px;
    color: #444;
    font-size: 85%;
}

/* Fernstudium Tabellen Matrikelablaufplaene */ 

html {
--humblodt-blau: rgb(0,55,108);
--humboldt-blau-halb: rgba(0,55,108,0.5);

--humboldt-blaugrau: rgb(189,202,211);

--humboldt-graugruen: rgb(209,209,194);
--humboldt-graugruen-halb: rgba(209,209,194,0.5);

--humboldt-sand: rgb(210,192,103);

--humboldt-gruen: rgb(0,87,44);
--humboldt-gruen-halb: rgba(0,87,44,0.5);

--humboldt-rot: rgb(138,15,20);
--humboldt-rot-halb: rgba(138,15,20,0.5);
--humboldt-rot-drittel: rgba(138,15,20,0.5);

--ibif-color-thead: rgb(00, 51, 102); // humboldt-blau mit eingeschränkter Farbauswahl 
--ibif-color-thead-bg: rgb(204, 214, 224); //angelehnt an 204,204,204

}


.ibif-table thead {
  color: var(--ibif-color-thead);
  background-color: var(--ibif-color-thead-bg);
  font-size: 155%;
    
}
.ibif-table tr:nth-child(even) {
  background-color:var(--humboldt-graugruen-halb);
}
.ibif-klausur {
  background-color: var(--humboldt-rot-halb);
  color:white;
}
.ibif-disko {
  font-style: italic;
}

/* Teamseiten als Collage */

.team-img-container {
  overflow: hidden;
}
.team-img-container::after {
  content: "";
  clear: both;
}
.team-preflex {
  float: left;
  height: 400px;
}

.team-preflex img {
  width: 100%;
  height: 100%;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.team-flex-container {
  display: flex;
  height: 200px;
}

.team-flex-container > div {
  background-color: #f1f1f1;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.team-flex-container img {
  width: 100%;
  height: 100%;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.zwei-wide {
  width: 100%;
}