/******************************************************************************/
/*                                                                            */
/*     Webdienste FHNW                                                        */
/*     2006 Urban Meier                                                       */
/*     nw_screen.css : Please edit ONLY the colors as shown below             */
/*                                                                            */
/******************************************************************************/

/* in jeder Zeile, wo der Text:
 * "Hier die FHNW Farbe einsetzen"
 * steht, muss der bestehende Farbwert durch den gewünschten
 * FHNW Farbwert ersetzt werden!
*/
/******************************************************************************/
/* Header */
#Logo_FHNW img {
 position:absolute;
 left:0;
 top:0;
 border:none;
 max-width: 500px;
}

#Logo_FHNW a {
 text-decoration:none;
}

#Titel_mit_menu {
 position:absolute;
 left:0px;
 width: 100%;
}

#Otitel_FHNW h1, #Utitel_FHNW h1 {
	font-family:Roboto,sans-serif;
	font-weight:normal;
	font-size:18px;
	color:#FFFFFF;
	margin:auto;
    text-align: center;
	padding:0;
	line-hight: 25px;
	height: 25px;
}
#Otitel_FHNW h1{margin-top: 75px; }

h1 a, h1 a:hover {color:#fff; background: #30314D; text-decoration: none;}

#flaming-logo img {
    height: 2em;
}

/******************************************************************************/

/*Allgemein*/
body,td,th,form {
 font-family: Roboto,Arial,sans-serif;
 background-color: #30314D;
 color: #FFFFFF;
 margin: 0;
 padding: 0;
}
/******************************************************************************/
/*Text*/
p {
 text-align: left;
 line-height: 1.2em;
 padding: 0em 0em 0.2em 0em;
}

.lead-paragraph{
 font-size: 18px;
 margin-top: 0;
}
/******************************************************************************/
/*Hochgestellt*/
sup {
 font-size: 70%;
}
/******************************************************************************/
/*Fett*/
b,strong {
 font-weight: bold;
}
/******************************************************************************/
/*Titel*/
h1, h2 {
 font-size: 100%;
 margin: 0;
 font-family: Roboto;
 color: #FFFFFF;
}
/*************************************/
/*Seitentitel innerhalb des Dokumentes*/
h1,h4 {
 font-size: 48px;
 font-weight: normal;
 text-decoration: none;
 padding: 0.0em 0em 0.0em 0em;
}
/*************************************/
/*Texttitel innerhalb des Dokumentes*/
h2 {
 font-size: 85%;
 font-weight: bold;
 text-decoration: none;
 padding: 0em 0em 0.0em 0em;
}

h5 {
 font-size: 16px;
 font-weight: bold;
 line-height: 1em;
 text-decoration: none;
 text-transform: uppercase;
 padding: 0em 0em 0em 0em;
 margin: 10px 0 4px;
}

h6 {
 font-size: 85%;
 font-weight: bold;
 text-decoration: none;
 border-bottom: 1px dashed #000000;
 display: inline;
 padding: 1.4em 1.0em 0.4em 0em;
}

/******************************************************************************/
/*Listen*/
ul,ol {
 font: 85% Roboto,sans-serif;
 line-height: 1.4em;
 background-color: #FFFFFF;
 color: #000000;
 margin: 0;
}
ul{
 padding: 0.0em 0em 0.7em 1.1em;
}
ol{

 padding: 0.0em 0em 0.7em 1.7em;
}

.sublist {
 font: 100% Roboto,sans-serif;
 line-height: 1.4em;
 background-color: #FFFFFF;
 color: #000000;
 margin: 0;
 padding: 0em 0em 0em 0em;
}
/*************************************/
ul li {
 list-style-type: square;
}

ol li {
 list-style-type: decimal;
}
/******************************************************************************/
/*Links*/
a {
 line-height: 1.2em;
 background-color: transparent;
 color: #DE144A;
 text-transform: uppercase;
}

a:hover {
 line-height: 1.2em;
 background-color: #DE144A; /*Hier die FHNW Farbe einsetzen*/
 color: #FFFFFF;
}
/*************************************/
/*Links mit Bildern*/
.image
{
 background-color: #FFFFFF;
 color: #000000;
 text-decoration: none;
}

.image:hover
{
 background-color: #FFFFFF;
 color: #000000;
 text-decoration: none;
}

/*************************************/
/*Links der Navigation*/
.nav {
 font: 85% Verdana,Arial,sans-serif;
 line-height: 1.4em;
 background-color: #FFFFFF;
 color: #000000;
 text-decoration: none;
}
.nav:hover {
 line-height: 1.4em;
 background-color: #C9C9C9; /*Hier die FHNW Farbe einsetzen*/
 color: #000000;
 text-decoration: none;
}

/*************************************/
/*Aktiver Link zu geladener Seite*/
.navactive {
 font: 85% Verdana,Arial,sans-serif;
 line-height: 1.4em;
 font-weight: bold;
 color: #000000;
 text-decoration: none;
}


/******************************************************************************/
table
{
 position: relative;
 top: -0.3em;
 width: 100%;
 border-top: 0.1em solid #000000;
 border-bottom: 0.1em solid #000000;
 border-collapse: collapse;
}

.noline
{
 border-top: 0em solid #000000;
 border-bottom: 0em solid #000000;
}

/*************************************/
tr
{

}
/*************************************/
th
{
 font-weight: bold;
 border-top: none;
 padding: 0.6em 0em 0.3em 0em;
 text-align: left;
 vertical-align: top;
 line-height: 1em;
}

.space
{
 width: 2%;
 border-style: none;
}
/*************************************/
td
{
 vertical-align: top;
 border-top: 0.1em solid #000000;
 padding: 0.3em 0em 0.3em 0em;
 line-height: 1.4em;
}

.space
{
 width: 2%;
 border-style: none;
}

.noline
{
 border-top: 0em solid #000000;
 border-bottom: 0em solid #000000;
}

/******************************************************************************/
/*Formulare*/
form {
    border: none;
    margin: 0;
}

fieldset {
border: none;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    margin: 1em 0em 1.5em 0em;
    padding: 0.5em 0.5em 1em 0em;
    line-height: 1.5em;
}

legend {
    background: transparent;
    margin: 0 0 1.5em 0;
    padding: 0.5em 0.5em 0.5em 0;
    font-size: 100%;
}

label {
    font-weight: bold;
}

input,select,textarea
{
 font: 100% Roboto,sans-serif;
 border: 1px solid #000000;
 color: #000000;
 background-color: #FFFFFF;
 margin: 0;
 padding: 0;
 vertical-align: middle;
 padding-left: 0.5em;
}

input.button,
button
{
 font: 100% Roboto,sans-serif;
 border: 1px solid #000000;
 color: #FFFFFF;
 background-color: #000000;
 margin: 0;
 padding: 0;
 vertical-align: middle;
 padding-left: 0.5em;
 cursor: pointer;
}

abbr, acronym, .explain {
 border-bottom: 1px solid #000;
 color: #000000;
 background-color: transparent;
 cursor: help;
}


/******************************************************************************/
/*Linie*/
hr {
 display: none;
}
/******************************************************************************/
/*Bilder*/
img
{
 border: none;
 margin: 0;
 padding: 0;
}

/******************************************************************************/
/*DIV's*/

/*Wrapper*/
header {
 display: block;
 width: 100%;
 height: 250px;
 color: #FFFFFF;
 border-bottom:4px solid #FFFFFF; /*Hier die FHNW Farbe einsetzen*/
 background-image: url("img/BG_Image.png");
 background-color: #DE144A;
 background-repeat: no-repeat;
 background-size: cover;
}

#Content_FHNW {
 position: relative;
 display: block;
 width: 100%;
}

/*Menu*/
nav {
	position: fixed;
	left: 8px;
	top: 260px;
    background-color: #DE144A;
	display: block;
	width: 180px;
}

#lmenu {
 display: flex;
 flex-direction: column;
 width: 190px;
 padding: 5px;
}

#lmenu a {
    line-height: 1.6em;
    color: white;
    text-decoration: none;
}

 #lmenu a:hover {
     text-decoration: underline;
 }

/*Content*/
main {
 padding: 20px 200px;
 margin: auto;
}

#content_ohne_menu {

}
/******************************************************************************/
/*Section's*/
section{
 max-width: 1200px;
 margin: 32px auto;
}
#section-projektdaten img {
 width: 100%;
}
/******************************************************************************/
/*Article's*/
.article-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.wrap-article{
 width: 50%;
 min-width: 320px;
}

.wrap-article img{
 width: 100%
}

.wrap-article:first-child {
 margin-right: 20px;
}

.detail-card{
 width: calc(100% - 40px);
 background-color: #4E4E72;
 margin: 16px 0;
 height: auto;
 padding: 32px 20px 16px;
}

.images-container {
 display: flex;
 flex-wrap: wrap;
}

.images-container img {
    height: 315px;
}

.detail-card img {
 padding: 5px;
 display: block;
 /* width: 50px; */
 /* flex: 30%; */
 flex-shrink: 5;
}

.profile-card-wrapper{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-content: center;
 margin: auto;
 justify-content: space-between;
}

.profile-card{
 max-width: 320px;
 padding: 10px;
}
.profile-card img{
 width: 100%;
}
.profile-card-content{
 padding: 5px;
 background-color: #0D0A24;
}
.profile-card-content p{
 font-size: 12px;
 font-weight: lighter;
 font-family: Roboto;
}
.profile-card-content p:first-of-type{
 margin: 10px 0 0 0;
}

.profile-card-content p:last-of-type{
 margin: 0 0 10px 0;
}

.contact-card{
 padding: 10px;
}

.detail-card:first-of-type{
 background-color: #928EC5;
}

.detail-card:last-of-type{
 background-color: #0D0A24;
}


/******************************************************************************/
/*Tag's*/
.tag-wrapper{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.tag{
 background-color: #DE144A;
 display: flex;
 border-radius: 50px;
 align-items: center;
 justify-content: center;
 height: 50px;
 padding: 0 32px;
 margin: 8px 10px;
 text-transform: uppercase;
}

.tag p{
 margin: 0;
 font-size: 14px;
 padding: 0;
 line-height: 0;
}

/******************************************************************************/
/*Tag's*/
@media only screen and (max-width: 1100px) {
 header{
  height: 80vh;
  margin-top: 60px;
 }

 #Logo_FHNW{
  display: flex;
  justify-content: center;
  position: relative;
 }

 #Logo_FHNW img{
  position: relative;
 }


 main{
  padding: 20px;
 }

 .profile-card-wrapper{
  justify-content: center;
 }

 .article-wrapper{
  flex-direction: column;
  justify-content: center;
 }

 .wrap-article{
  width: 100%;
 }

 /*Menu*/
 nav{
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex
 }

 #lmenu{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  flex-wrap: wrap;
  margin: auto 20px;
  padding: 0;
 }

 .images-container{
  justify-content: center;
 }
}

@media only screen and (max-width: 640px) {
 /*Menu*/
 nav{
  height: 100px;
 }
 header{
  margin-top: 100px;
 }
}