/*
Colors

Matisse
#1F62A1

Sisal 
gainsboro

Mirage
#1F2439

Pelorous
#3FB6C4

Blue
#E9F3FE

*/
html{
    font-family: Roboto, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;

}



body {

    background: gainsboro;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
background-color: #E9F1FE; /*2C61DC*/

}

h1 {
    color: white;
    padding: 10px;
    padding-bottom: 20px;
    font-family: Montserrat, sans-serif;
}

h5 {
    color: white;
    padding-bottom: 10px;
}

#net_description, #os_description, #gdi_description, #da_description,#web_description, #legalnotice, #cc_description, #soma_description, #mbd_description,#clean_description, #daas_description, #twin_description {
    scroll-margin-top: 5rem;
}

/*Nav*/
.navbar {
    background:white;
}
.nav-link,
.navbar-brand {
    color:  #1F2439;
    cursor: pointer;
}
.nav-link {
    margin-right: 1em !important;
}
.nav-link:hover {
    color: gainsboro;
}
.navbar-collapse {
    justify-content: flex-end;
}

.nav-item {
    margin-left: 15px;
}

#navbar-button {
    margin-right: 15px;
}



/*Header*/

.landing {
    background-image: url('../figures/background_small.png');
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
    position: relative;
    padding: 80px 200px;
    text-align: center;
}

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

/*Main*/

.description h1 {
	color: white;
}
.description p {
	color: white;
	/*font-size: 1.3rem;*/
    font-size: clamp(1.5rem, 2vw, 2.5rem);
	line-height: 1.5;
}

.description a{
    color:white;
}

.description img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 16px;
  border-radius: 50%;
}

.description button {
    border:1px solid #1F2439;
    background:gainsboro;
    border-radius: 8px;
    color: #1F2439;
}
.description button:hover {
	border:1px solid white;
    background:#1F2439;
    color:white;
}

.recents h1{
    color:#1F2439;
    font-family: Montserrat, sans-serif;
}

.recents h3{
    font-family: Montserrat, sans-serif;
    text-align: center;
    color:#1F2439
}

.recents h5{
    color:#1F2439;
    text-align: justify;
    font-family: Roboto;
}

.recents a{
    color:#1F2439;
    text-decoration: none;
}
.recents > .container {
    padding: 100px 200px;
}

.ll_video {
    position:relative;
    height:0;
    padding-bottom:65%;
}

.LL_text {
    padding-top: 10px;
    padding-bottom: 10px;
}


.recents img:hover {
  opacity: 0.6;
}


/* Footer*/

.page-footer {
    background-color: white;
    color: #1F2439;
    padding: 40px;
}

.page-footer ul {
    list-style-type: none;
}

.page-footer a {
    color: #1F2439;
    text-decoration: none;

}
.footer-copyright {
    color: #666;
    padding-top: 20px;
}

.icons a {
   margin: 0 15px;
   text-decoration: none;
}


/* Impressum*/

.impressum {
	margin: 2em auto;
	padding: 1em;
	position: relative;
    color: #1F2439;
}

.impressum-list li {
    list-style-type: none;
}

.impressum h5 {
    color: #1F2439;
}


.imp{
  color: #1F2439;
}

.imp:hover {
    color: gainsboro;
}



.impressum a {
    color: #1F2439;
}

.impressum-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}



/* TEACHING*/


.teaching_start {
  text-align: justify;
  padding-top: 40px;
  padding-bottom: 40px;
  color: #1F2439;;

}

.teaching_start h3, h5, h4 {
  color:#1F2439;;
  margin-bottom: 20px;
  text-align: justify;
}

.teaching_start h1 {
  font-family: Montserrat;
  text-align: center;
  color: #1F2439;;
}

.teaching_start img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 16px;
  border-radius: 50%; /*2%*/
}

.teaching_start img:hover {
  opacity: 0.6;
}


.teaching_start a{
    text-decoration: none;
    color: #1F2439;
}



.teaching_background {
    position: relative;
    padding: 80px 200px;
    font-family: Roboto, sans-serif;
    background-color: #E7E7E7;
    color:#1F2439;
}

.teaching_background h1{
    font-family: Montserrat;
}
.teaching_background h5 {
    color:#1F2439;
}
.teaching_background a {
    border:1px solid #1F2439;
    background:gainsboro;
    border-radius: 0;
    color: #1F2439;
    border-radius: 8px;
}
.teaching_background a:hover {
    border:1px solid white;
    background:#1F2439;
    color:white;;
}



.teaching_background .card {
    color:#1F2439;
}

.card-text {
    text-align: justify;
}

.teaching_background h2 {
    margin: 20px 0;
}

.course img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	height: 10px;
}

.past_teaching {
    position: relative;
    padding: 80px 200px;
    font-family: Roboto, sans-serif;
    color:#1F2439;
}

.past_teaching h1{
    font-family: Montserrat;
}

.past_teaching a, .past_teaching button {
    border:1px solid #1F2439;
    background:gainsboro;
    border-radius: 0;
    color: #1F2439;
    border-radius: 8px;
}
.past_teaching a:hover, .past_teaching button:hover {
    border:1px solid white;
    background:#1F2439;
    color:white;;
}

.past_teaching .card, .past_teaching h5 {
    color:#1F2439;
}


.teaching_background h2 {
    margin: 20px 0;
}

.accordion-body {
    color:black;
    text-align: justify;
}

.accordion-item {
    margin-bottom: 1em;
}


#link_ocg {
    background-color: white;
    border: none;
}

#link_ocg:hover {
    color: gainsboro;
    background-color: white;
    border: none;
}

/* RESEARCH*/

.research_cards {
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}

.research_cards h1 {
  font-family: Montserrat;
  text-align: center;
  color: #1F2439;;
}

.research_cards h3, h5, h4 {
  color:#1F2439;
  margin-bottom: 20px;
  text-align: justify;
}

.link_research_cards {
    border:1px solid #1F2439;
    background:gainsboro;
    border-radius: 0;
    color: #1F2439;
    border-radius: 8px;
}

.link_research_cards:hover {
    border:1px solid white;
    background:#1F2439;
    color:white;;
}


.research_cards img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.research_cards h4 {
  margin-top: 20px;
margin-bottom: 0;
}

.CV_link {
  border: none;
  text-decoration: none;
  color: #1F2439;
}

.CV_link:hover {
    color:white;
}



.clearfix {
  margin-bottom: 40px;
}

.clearfix a{
  text-decoration: none;
  border: none;
}

a.anchor_MBD, a.anchor_UX, a.anchor_SE, a.anchor_CSed {
  display: block;
  position: relative;
  top: -50px;
  visibility: hidden;
}



/* MEDIA QUERIES */
@media (max-width: 575.98px)  {

    .description h1 {
        font-size: 2em;
    }

    .description p {
        font-size: 1.2rem;
    }

    .recents > .container {
        padding: 30px 40px 40px 40px;
    }

    .LL_text {
        display: none;
      }

    .page-footer ul {
        padding-left: 0;
    }

    .page-footer .container{
        padding-left: 0;
        padding-right: 0;
    }

    .teaching_background, .past_teaching, .landing {
      padding-left: 12px;
      padding-right: 12px;
    }

    .teaching_background h4 {
      padding-top:  20px;
    }

    .clearfix img {
      width: 100%;
    }

    .card {
      margin: 10px;

    }

}

 /* Medium devices (landscape tablets, 768px and up)*/
 /*@media only screen and (max-width: 900px) and (min-width: 576px)  {*/
 @media (min-width: 768px) and (max-width: 1024px){



   .description img {
     max-height: 100%;
   }
   .recents > .container {
       padding: 30px 40px 40px 40px;
   }

   .teaching_background, .past_teaching, .landing {
     padding-left: 40px;
     padding-right: 40px;
   }


 }

 /* Max devices */
 @media screen and (min-width: 1700px) {
    .teaching_background, .past_teaching, .landing {
        padding-left: calc( (100vw - 1600px) / 2 );
        padding-right: calc( (100vw - 1600px) / 2 );
    }
}