@charset "utf-8";

@font-face {
  font-family: din-pro;
  src: url("din-pro-cond-cufonfonts/DINPro.otf"), url("din-pro-cond-cufonfonts/DINPro/fonts/DINPro.eot");
}

* {box-sizing: border-box}

/* General sytling-----------------------------------------------------------*/

body {
	font-family: din-pro;
	color : white;
	background: black;
	text-align: justify;
	line-height: 1.8vw;
	font-size: 1.2vw;
	border: none;
	margin:0;
  	padding:0;
	hyphens: auto;

}

.research-title,
.publications-title,
.media-title,
.team-title,
.contact-title{
	text-align: center;
	font-size: 2.5vw;
	text-transform: uppercase;
	padding-bottom: 5%;
}

#research,
#publications,
#media,
#team,
#contact{
	padding: 5%;
	width: 100%;
}

/*Navigation bar sytling--------------------------------------------------------*/

.navigation-bar{
	position: fixed;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	background: white;
	text-transform: uppercase;
	font-size : 1.6vw;
	left: 0;
	z-index: 1;
  color: black;
  padding: 0vw 1vw 0vw 0.5vw;
  align-items: center;
}

/* news/notice bar */
.notif-bar{
	position: flex;
	top: 0;
	width: 100%;
	height: 100px;
	display: flex;
	/* justify-content: space-between; */
	background: orange;
	text-transform: uppercase;
	font-size : 1.6vw;
	left: 0;
	z-index: 1;
	color: black;
	padding: 0vw 1vw 0vw 0.5vw;
	align-items: center;
    justify-content: center;

}
.notif-bar .row {
	width: auto;
}

.navbar-title{
  display: flex;
  align-items:center;
}

.navbar-title .logo{
	padding: 1vw 0.5vw 1vw 1vw;
  width: 8vw;
}

.navbar-title .big-screen{
	padding: 1vw 1vw 1vw 0.5vw;
}


.navbar-items{
  display: flex;
}

.navigation-bar a{
	color : black;
	text-decoration: none;
	padding: 1vw;
}

.navigation-bar a:hover{
	color: #3500D3;
}

.icon-bars{
  display: none;
}

/* Home section--------------------------------------------------------------*/

#home{
  align-items: center;
}

.home-image-container{
  position: relative;
  top: 8vw;
}

.image{
  width: 100%;
}

.home-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5vw;
	line-height: 3.5vw;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
}

.copyright{
	position: absolute;
	top: 85%;
	left: 95%;
	transform: translate(-50%, -50%);
	font-size: 1vw;
	line-height: 1vw;
	text-decoration: none;
	text-align: center;
}

.copyright a{
	text-decoration: none;
	color: white;
}

.copyright a:hover{
	color: #FF00F5;
}

.home-text{
	padding: 10% 15% 3% 15%;
}

#slideshow{
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.mySlides{
  background-size: contain;
  background-repeat: no-repeat;
  width: 40%;
  height: 0;
  padding-top: 40%;
}

.slide1{
  background-image: url("images/exo_patient.JPG");
}

.slide2{
  background-image: url("images/exo_setup.jpg");
}

.slide3{
  background-image: url("images/retreat2023.jpeg");
}

.slide4{
  background-image: url("images/opms.jpeg");
}

.slide5{
  background-image: url("images/exo2.jpg");
}

.slide6{
  background-image: url("images/bungee.jpg");
}

.slide7{
  background-image: url("images/cl_setup.jpeg");
}

.slide8{
	background-image: url("images/retreat2022.jpeg");
}

#research{
	background: white;
	color: black;
  padding-bottom: 2%;
}

#research .text-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.focus{
	display: flex;
	flex-direction: column;
	max-width: 650px;
	width: 100%;
  padding: 0% 3% 3% 0%;
}

.focus .title{
	font-size: 1.8vw;
	padding-bottom: 2%;
	color: #3500D3;
}

#publications{
	background: #3500D3;
	color: white;
	width: 100%;
}

#publications a:hover{
	color: #FF00F5;
}

.visible-container,
.slide-down-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: justify;
}

.sub-container{
	max-width: 650px;
	padding: 0% 3% 3% 0%;
}

.title-year{
	text-align: center;
}

#publications a{
	text-decoration: underline;
	color: #DBDBDB;
}

.slide-down-publications{
	text-decoration: underline;
	text-align: center;
  pa
}

.slide-down-publications:hover{
	color: #FF00F5;
}

.slide-down-container{
	padding-top: 3%;
	display: none;
}

#media{
	background: white;
	color: black;
  padding-bottom: 2%;
}

.media-container{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.video{
	display: flex;
	flex-direction: column;
	padding: 0% 3% 3% 0%;
	max-width: 650px;
  align-items: center;
}

.video iframe{
	height: 350px;
	width: 620px;
}

.video a{
	text-decoration: none;
	color: black;
}

.video a:hover{
	color: #FF00F5;
}

#team,
#contact{
	background: black;
	color: white;
	width: 100%;
}

.team-image{
	width: 100%;
  border:#FF00F5 3.3px solid;
}

.team-portriat-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: center;
}

.portrait-text-container{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 5% 3% 0% 3%;
	width: 400px;
	text-align: center;
}
.portrait-text-container a{
	display:none;
}

.portrait{
	border: white 3.3px solid;
	width: 140px;
	height: auto;
	align-self: center;
}

.slide-down-team-information{
  text-decoration: underline;
  padding-bottom: 3%;
}

.slide-down-team-information:hover{
  	color: #FF00F5;
}

.more-team-information{
  display: none;
  text-align: justify;
  padding: 1%;
  border:white 0px solid;
}

#team a{
  text-decoration: none;
  color: white;
}

#team a:hover{
  color: #FF00F5;
}


#contact{
	background: white;
	color: black;
  padding-bottom: 0%;
}

.contact-title{
	color: black;
	text-align: center;
	text-transform: uppercase;
}

.contact-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.sub-container-contact{
	max-width: 650px;
	padding: 0 3% 5% 0%;
	width:100%;
}

.contact-information{
	padding: 3% 0% 1% 0%;
}

.maps{
	border:black 3.2px solid;
	width: 100%;
}

.maps:hover{
	border:#3500D3 3.8px solid;
}

.e-mail{
	padding-bottom: 2%;
}

.e-mail a{
	color: black;
	text-decoration: none;
}

.e-mail a:hover{
	color: #3500D3;
}

.impressum{
	background: #3500D3;
	text-align: center;
	align-content: center;
	color: white;
	padding: 2%;
}

.impressum-title{
	text-transform: uppercase;
  padding: 2%;
  font-size: 1.5vw;
}

.impressum-title:hover{
	color: #FF00F5;
}

.impressum-content{
	display: none;
	align-content: center;
}

.impressum-content a{
	color: white;
	text-decoration: none;
}

.impressum-content a:hover{
	color: #FF00F5;
}

/*Styling for smaller displays-----------------------------------------------------------*/

@media only screen and (max-width: 1200px) {
	body {
		font-size: 1.8vw;
		line-height: 2.5vw;
	}

  .research-title,
	.publications-title,
	.media-title,
	.team-title,
	.contact-title{
		font-size: 3vw;
	}

  .navigation-bar{
    font-size: 2vw;
  }

	.focus .title{
		font-size: 2.5vw;
	}


}

@media only screen and (max-width: 900px) {
  body {
    font-size: 2.5vw;
		line-height: 3.4vw;
	}

  .research-title,
	.publications-title,
	.media-title,
	.team-title,
	.contact-title{
		font-size: 4vw;
    padding-bottom: 7%;
	}

  #research,
  #publications,
  #media,
  #team,
  #contact{
  	padding: 7%;
  }

  .navigation-bar{
    font-size: 2.8vw;
    align-items: flex-start;
  }

/*Transform the navigation bar into a dropdown bar*/

  .navbar-title .big-screen{
  	display: none;
  }

  .navbar-title .logo{
  	padding: 2vw 1vw 2vw 2vw;
    width: 20vw;
  }

  .icon-bars{
    display: block;
    padding: 5vw;
    text-align: right;
  }

  .icon-bars:hover{
    color: #3500D3;
  }

  .navbar-items{
	display: flex;
	flex-direction: column;
}

  .navbar-items a{
  	display: none;
    padding-right: 2vw;
  }

  .focus{
    padding-bottom: 5%;
  }

  .focus .title{
    font-size: 3.5vw;
  }

  .home-image-container{
    position: relative;
    top: 14vw;
  }

  .home-title{
  	font-size: 3vw;
  	line-height: 5vw;
  }

  .home-text{
  	padding: 12% 10% 3% 10%;
  }

  .video iframe{
  	height: 280px;
  	width: 496px;
  }

  .impressum-title{
    font-size:3vw;
    padding: 4%;
  }

}


@media only screen and (max-width: 600px) {
	body {
		font-size: 3.5vw;
		line-height: 4.6vw;
	}

  #research,
  #publications,
  #media,
  #team,
  #contact{
  	padding: 9%;
  }

  .research-title,
	.publications-title,
	.media-title,
	.team-title,
	.contact-title{
		font-size: 5vw;
    padding-bottom: 9%;
	}

  .navigation-bar{
    font-size: 3.5vw;
  }

  .navbar-items a{
    padding-right: 5vw;
  }

	.focus .title{
		font-size: 4vw;
	}

  .icon-bars{
    font-size: 3.5vw;
  }

  .home-image-container{
    position: relative;
    top: 20vw;
  }

  .home-title {
  	font-size: 3vw;
  	line-height: 5vw;
  }

  .home-text{
  	padding: 20% 15% 2% 15%;
  }

  .mySlides{
    width: 70%;
    padding-top: 70%;
  }

  .video iframe{
  	height: 210px;
  	width: 372px;
  }

  .portrait-text-container{
    padding-top: 10%;
  }

  .portrait{
  	width: 100px;
  }

  .impressum-title{
    font-size:4vw;
    padding: 5%;
  }

}

@media only screen and (max-width: 400px) {
  .video iframe{
  	height: 168px;
  	width: 297px;
  }

  .navigation-bar{
    font-size: 4vw;
  }
}