html,
body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;

  font-family: 'PT Sans Caption', sans-serif;

  background-color: transparent;

  overflow: hidden;

  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

body.loading {
  background-image: url(../../shared/img/loading.svg);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center;
}

#project {
  display: none;
  max-width: 960px;
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  padding: 10px;
}

#projectName {

  font-size: 64px;
  line-height: 80px;
  font-weight: bold;
  color: #3E3E3E;
}

#projectImage {
  margin-top: 30px;
  max-width: 100%;
  height: auto;
  /*display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  float: left;*/

}

#projectAreaImg {

  margin: 24px;
  height: 130px;

}

#projectArea div {

  font-size: 14px;
  /* font-size: 1.2vw; */
  color: #3E3E3E;
  margin-top: 140px;
  height: 30px;
  cursor: pointer;

}

#projectArea:hover {

  font-weight: bold;
}

#projectMaturityImg {

  margin: 24px;
  height: 130px;

}

#projectMaturity, #projectArea {

  font-size: 18px;
  color: #3E3E3E;
  cursor: pointer;
  margin-left: 16px;

}

#projectMaturity:hover {

  font-weight: bold;
}

#projectType {


  font-size: 24px;
  color: #35B7C0;
  text-transform: uppercase;
  height: 18px;
  cursor: pointer;

}

#projectType:hover {

  font-weight: bold;
}

#projectKeywords {
  margin-top: 18px;
  font-size: 18px;
  color: #3E3E3E;
  text-transform: uppercase;
  width: 100%;
}

#projectKeywords .keyword {
  color: #3E3E3E;
  cursor: pointer;
  margin-right: 5px;
  text-decoration: none;
}

#projectKeywords .keyword:hover {
  font-weight: bold;
}

#projectDescription {
  margin-top: 16px;
  font-size: 18px;
  color: #c0c0c0;
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 350px;
	
	padding-right: 5px;
	
	/* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#projectDescription:hover::-webkit-scrollbar-thumb {
   visibility: visible;
 }

#projectDescription a{
  color: #35B7C0;
}
#projectUrl a{
  margin-top: 10px;
  font-size: 18px;
  color: #35B7C0;
  text-decoration: none
}
#projectUrl a:hover {
  text-decoration: underline;
}

#projectYear {
  font-size: 18px;
  color: #35B7C0;
  text-decoration: none;
}


#projectStakeholdersPanel {
	max-height: 400px;
	overflow-x: hidden;
	overflow-y: scroll;
}

#projectStakeholdersPanel:hover::-webkit-scrollbar-thumb {
   visibility: visible;
 }

#projectAuthors {

}

#thirdRow{

}

.title {
  font-size: 24px;
  margin-bottom: 8px;
  margin-top: 16px;
  display: block;
  color: #3E3E3E;
}

#projectAuthors .content{
  font-size: 18px;
  display: block;
  color: #35B7C0 !important;
  text-decoration: none;
  cursor: url("../../shared/img/info.png"),default;  
  transition: all ease-in-out 1s !important;
}

#projectAuthors .content a:hover{
  text-decoration: underline;
}

#projectAuthors .content li{
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;	
}

#projectCollaborations {}

#projectCollaborations .content{
  font-size: 18px;
  display: block;
  color: #c0c0c0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all ease-in-out 1s !important;
}

#projectCollaborations .content a{
	color: #35B7C0 !important;
}

/* ----------------- PROJECTS BY TYPE -------------- */

#projectsByType {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  min-height: 30%;
  max-height: 50%;
  overflow: hidden;
  background-color: white;
  padding: 0.5%;
  border-radius: 30px;
  -webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
}

#projectsOfSelectedType{
  max-height: 500px;
  overflow: scroll;
  margin-bottom: 16px;
}

#projectsOfSelectedType:hover::-webkit-scrollbar-thumb {
	visibility: visible;
}

#projectsByType #selectedType {
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  color: #3e3e3e;
  border-bottom: 1px;
  border-bottom-color: #EFEFEF;
  border-bottom-style: solid;
  padding: 16px 0px;
}

#projectsByType #infoProjectsOfSelectedType {
  font-size: 18px;
  text-align: center;
  font-weight: normal;
  color: #8A8B8A;
  border-bottom: 1px;
  border-bottom-color: #EFEFEF;
  border-bottom-style: solid;
  padding: 8px 0px;
}

#projectsByType .close {
  width: 30px;
	position: absolute;
	right: 15px;
	top: 15px;
	height: 30px;
/*background-image: url(../../shared/img/close.svg);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;*/

	-webkit-mask: url(../../shared/img/close.svg) no-repeat 60% 60%;
	mask: url(../../shared/img/close.svg) no-repeat 60% 60%;
	-webkit-mask-size: 60%;
	mask-size: 60%;
	background-color: #8A8B8A;
	cursor: pointer;
}

#projectsByType #projectsOfSelectedType {
  padding-top: 16px;
  padding-bottom: 32px;
  text-align: center;
}

#projectsByType .projectOfSelectedType a {
  font-size: 18px;
  display: block;
  margin: 8px 0px 0px 0px;
  color: #35B7C0;
  cursor: pointer;
  text-decoration: none;
}

#projectsByType .projectOfSelectedType a:hover{
  text-decoration: underline;
}

#projectsByType .projectOfSelectedType .projectName.selected {
  color: #35B7C0;
}


.projectOfSelectedType a.projectName {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}


/* ----------------- PROJECTS BY TAG -------------- */

#projectsByTag {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  min-height: 30%;
  max-height: 50%;
  overflow-y: auto;
  background-color: white;
  padding: 0.5%;
  border-radius: 30px;
  -webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
}

#projectsByTag #selectedTag {
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  color: #3e3e3e;
  border-bottom: 1px;
  border-bottom-color: #EFEFEF;
  border-bottom-style: solid;
  padding: 16px 0px;
  text-transform: uppercase;
}

#projectsByTag #infoProjectsOfSelectedTag {
  font-size: 18px;
  text-align: center;
  font-weight: normal;
  color: #8A8B8A;
  border-bottom: 1px;
  border-bottom-color: #EFEFEF;
  border-bottom-style: solid;
  padding: 8px 0px;
}

#projectsByTag .close {
  width: 30px;
  position: absolute;
  right: 15px;
  top: 15px;
  height: 30px;
  /*background-image: url(../../shared/img/close.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;*/

  -webkit-mask: url(../../shared/img/close.svg) no-repeat 60% 60%;
  mask: url(../../shared/img/close.svg) no-repeat 60% 60%;
  -webkit-mask-size: 60%;
  mask-size: 60%;
  background-color: #8A8B8A;
  cursor: pointer;
}

#projectsByTag #projectsOfSelectedTag {
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
}

#projectsByTag .projectOfSelectedTag a {
  font-size: 18px;
  display: block;
  margin: 8px 0px 0px 0px;
  color: #35B7C0;
  cursor: pointer;
  text-decoration: none;
}

#projectsByTag .projectOfSelectedTag a:hover {
  text-decoration: underline;
}

#projectsByTag .projectOfSelectedTag .projectName.selected {
  color: #35B7C0;
}

.projectOfSelectedTag a.projectName {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

/*
 *  STYLE 5
 */

 ::-webkit-scrollbar-track {
   /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
   background-color: transparent;
 }

 ::-webkit-scrollbar {
   width: 8px;
   background-color: transparent;
 }

 ::-webkit-scrollbar-thumb {
   background-color: #35B7C0;
   border-radius: 4px;
   visibility: hidden;
 }


ul{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}