/* --------------------------------

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


b {
  font-family: "Gilroy" !important;
}


h2 {
  padding: 10px;
  color: white;

}

html {
  font-size: 62.5%;
  font-family: "Gilroy" !important;
}

body {
  font-size: 1.6rem;
  font-family: "Gilroy" !important;
  color: #7f8c97;
  background: #000000;
}

a {
  color: #acb7c0;
  text-decoration: none;
}

img {
  max-width: 100%;
  max-height: 25em;
}

h1, h2 {
  font-family: "Gilroy" !important;
  font-weight: bold;
}

li {
  list-style-type: disc;
  margin-left: 4px;
  font-family: "Gilroy" !important;
}

#dropdowns {
  /*display: inline-block;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
#filterDropdown {
  width: 150px;
}
#sortDropdown {
  width: 150px;
}

iframe {
  position: relative;
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 80%;
  height: 20vw;
}


/* --------------------------------

Patterns - reusable parts of our design

-------------------------------- */
@media only screen and (min-width: 1276px) {

  .cd-hide {
    visibility: hidden;
  }
}

/* --------------------------------

Vertical Timeline - elements of the timeline

-------------------------------- */
header {
  display: flex;
  flex-direction: column;
  width: 100%;
  line-height: 200px;
  text-align: center;
  background: #000000;
  background-repeat: no-repeat;
  padding: 2%;
  padding-bottom: 0;
  padding-top: 0;
  font-family: "Gilroy" !important;
}

header h1 {
  color: white;
  font-size: 3.8rem;
  line-height: 4rem;
  font-family: "Gilroy" !important;
}

header h2 {
  color: white;
  font-size: 20px;
  width: 75%;
  word-wrap: break-word;
  line-height: 2;
  margin: 0 auto;
  font-weight: bold;
  font-family: "Gilroy" !important;
}
/*
@media only screen and (min-width: 1276px) {
  header {
    height: 300px;
    line-height: 300px;
  }

}
*/

.cd-timeline {
  overflow: hidden;
  margin: 2em auto;
  font-family: "Gilroy" !important;
}

.cd-timeline__container {
  position: relative;
  width: 100%;
  /*max-width: 1170px;*/
  margin: 0 auto;
  padding: 2em 0;
}

.cd-timeline__container::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
  margin-left: 10px;
}

@media only screen and (min-width: 1276px) {
  .cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  .cd-timeline__container::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline__block {
  position: relative;
  margin: 0.5em 0;
}

.cd-timeline__block:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

.cd-timeline__block:first-child {
  margin-top: 0;
}

.cd-timeline__block:last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 1276px) {
  .cd-timeline__block {
    margin: 1em 0;
  }
}

.cd-timeline__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
  -webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-timeline__img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}

.cd-timeline__img.cd-timeline__img--IQP_Award {
  background: #ffcd01;
}

.cd-timeline__img.cd-timeline__img--Publication {
  background: #ff9901;
}

.cd-timeline__img.cd-timeline__img--Milestone {
  background: #e9360c;
}

.cd-timeline__img.cd-timeline__img--Application {
  background: #88d8b0;
}

@media only screen and (min-width: 1276px) {
  .cd-timeline__img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .cd-timeline__img.cd-timeline__img--show-animation {
    visibility: visible;
    animation: cd-bounce-in 0.6s;
  }
  .cd-timeline__img.cd-timeline__img--hide-animation {
    visibility: hidden;

    animation: cd-bounce-out 0.6s;
  }
}

.cd-timeline__content {
  position: relative;
  margin-left: 70px;
  background: white;
  border-radius: 0.25em;
  padding: 15px;
  -webkit-box-shadow: 0 3px 0 #d7e4ed;
  box-shadow: 0 3px 0 #d7e4ed;
}

.cd-timeline__content:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

.cd-timeline__content::before {
  /* triangle next to content block */
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
}

.cd-timeline__content h2 {
  font-size: 24px;
  margin: 0;
  color: #303e49;
}

.cd-timeline__content p,
.cd-timeline__read-more,
.cd-timeline__date {
  font-size: 1.3rem;
  font-weight: bold;
}

.cd-timeline__content p {
  font-size: 18px;
  font-weight: normal;
  line-height: 1.3;
}

.cd-timeline__read-more,
.cd-timeline__date {
  display: inline-block;
  font-size: 18px;
}

.cd-timeline__read-more {
  float: right;
  padding: 10px;
  background: #acb7c0;
  color: white;
  border-radius: 0.25em;
}

.cd-timeline__read-more:hover {
  background-color: #bac4cb;
}

.cd-timeline__date {
  float: left;
  padding: 1em 0;
  opacity: .7;
  font-size: 18px;
}

@media only screen and (min-width: 768px) {
  .cd-timeline__content h2 {
    font-size: 24px;
    padding-left: 0;
  }
  .cd-timeline__content p {
    font-size: 18px;
  }
  .cd-timeline__read-more,
  .cd-timeline__date {
    font-size: 18px;
  }
}

@media only screen and (min-width: 1276px) {
  .cd-timeline__content {
    margin-left: 1em;
    padding: 15px;
    width: 45%;
    /*margin-right: 14em;*/
    /*right: 15%; !* here *!*/
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .cd-timeline__content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: white;
  }
  .cd-timeline__read-more {
    float: left;
  }
  .cd-timeline__date {
    position: absolute;
    width: 100%;
    left: 115%; /* date */
    top: -20px;
    font-size: 36px;
    color: #ffffff;
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__content {
    float: right;
    left: -1em; /* here*/
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: white;
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__read-more {
    float: right;
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__date {
    left: auto;
    right: 115%; /* date */
    text-align: right;
  }
  .cd-timeline__content.cd-timeline__content--show-animation {
    visibility: visible;
    animation: cd-slide-in-right 0.6s;
  }
  .cd-timeline__content.cd-timeline__content--hide-animation {
    visibility: hidden;
    animation: cd-slide-out-right 0.6s;
  }
}

@media only screen and (min-width: 1276px) {
  /* inverse bounce effect on even content blocks */
  .cd-timeline__block:nth-child(even) .cd-timeline__content.cd-timeline__content--show-animation {
    visibility: visible;
    animation: cd-slide-in-left 0.6s;
  }
  .cd-timeline__block:nth-child(even) .cd-timeline__content.cd-timeline__content--hide-animation {
    visibility: hidden;
    animation: cd-slide-out-left 0.6s;
  }
}

@keyframes cd-bounce-in {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  60% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  99% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    visibility: visible;
  }
}

@keyframes cd-bounce-out {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  60% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  99% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    visibility: hidden;
  }
}

@keyframes cd-slide-in-right {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  99% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: visible;
  }
}

@keyframes cd-slide-in-left {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  99% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    visibility: visible;
  }
}

@keyframes cd-slide-out-left {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }
  100% {
    visibility: hidden;
  }
}

@keyframes cd-slide-out-right {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }
  100% {
    visibility: hidden;
  }
}

.dark-mode{
  background-color: black;
  color: white
}

.header-vpc{
  z-index: 5;
  display: grid;
  grid-template-areas: 'how title vpc';
  grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: 20px;
  padding-top: 20px;
  line-height: 20px;
}

.text-header-vpc{
    font-size: 18px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.header-visit-vpc{
    grid-area: vpc;
    cursor: pointer;
    text-decoration: none;
    text-align: right;
    margin-right: 15px;
    color: white;
}

a.header-visit-vpc:hover{
   color: orange !important;
}

.my_link{
  text-decoration: none;
  cursor: pointer;
  color: white;
}  

.my_link:hover{
  color: #e5b106;
} 

.about_modal{
  position: absolute;
  z-index: 9999;
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  min-height: 100%;
  display: none;
  
}

.container{
  margin-top: 100px;
  text-align: center;
}

.container h1{
  font-size: 30px;
  color: #ffffff;
}

.container h2{
  font-size: 20px;
  color: #ffffff;
}

.close_modal{
  margin-top: 15px;
  font-size: 26px;
  font-weight: 800;
  float: right;
  color: #fff;
  margin-right: 15px;
  border: 3px solid #cc2f0c;
  border-radius: 5px;
  min-width: 30px;
  padding: 5px;
  background: #cc2f0c;
  text-align: center;
  cursor: pointer;
}

/*.close_modal:hover{
  background-color: rgba(63,63,63,0.95);
}*/

.filtri{
  margin: 0 auto;
  width: 650px;
  display: flex;
}

.input-field{
  width: 250px;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.dropdown-content{
  overflow-x: hidden;
  background-color: #333333 !important;
}


.select-dropdown{
  color: #fff !important;
}
.caret{
  fill: #fff !important;
}
.anni .select-wrapper ul{
  max-height: 360px;
}
.select-wrapper ul li img{
    height: 30px !important;
    width: 30px !important;
    margin: 10px 15px !important;
}

.select-wrapper ul li img[src='img/cd-icon-towers.png']{
  background-color: #e9360c !important;
}

.select-wrapper ul li img[src='img/cd-icon-star.png']{
  background-color: #ffcd01 !important;
}

.select-wrapper ul li img[src='img/cd-icon-publication.png']{
  background-color: #ff9901 !important;
}

.select-wrapper ul li img[src='img/cd-icon-application.png']{
  background-color: #88d8b0 !important;
}

.dropdown-content li span{
  color: #ffffff !important;
}

.dropdown-content li{
  margin-left: 0px !important;
}

.select-dropdown.dropdown-content li:hover{
  background-color: rgba(0, 0, 0, 0.38) !important;
}


.container_about{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'img text';
  margin-left: 15px;
  margin-right: 15px;
  place-self: center;
}

.legenda{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'ico descr';
}

.titoli{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 'title_ico title_descr';
  color: #fff;
}

.title_ico{
  grid-area: title_ico;
  place-self: center;
}

.title_ico h1{
  font-size: 2em;
  font-weight: bold;
}

.title_descr{
  grid-area: title_descr;
  place-self: center;
}

.title_descr h1{
  font-size: 2em;
  font-weight: bold;
}

.categoria{
  grid-area: descr;
  place-self: center left;
  font-weight: bolder;
}

.icona{
  grid-area: ico;
  place-self: center;
  margin-bottom: 30px;

}

.icona img{
  max-width: 70px !important;
}

.img_container{
  grid-area: img;
  place-self: center;
  width: 100%;
}


.text_container{
  grid-area: text;
  place-self: center;
}

.text_container h2{
  margin-top: 10px;
  margin-bottom: 10px;
}


.title h1{
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.guida{
  margin-top: 15px;
  border: solid 1px #ffffff;
  background: transparent;
  border-radius: 50px;
  padding: .5em 2.4em;
  cursor: pointer;
  transition: .3s ease-in-out;
  min-width: 120px;
  max-height: 30px;
  color: #ffffff;
  text-decoration: none;
}


.guida span{
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .05em;
  transition: .3s ease-in-out;
  margin: 0 !important;
  place-self: center;
}

.guida::hover {
  animation: shinehover 2s infinite ease-in-out;
  transition: .3s;
}

.guida::hover span{
  transition: .3s ease-in-out;
}

.back{
  text-align: center;
  margin-top: 30px;
}

.paragrafo{
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 15px;
  margin-right: 15px;
}


//.prova{
//  border-radius: 50%;
//  -webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
//  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
//  transform: translateZ(0);
//  background: #c8c500;
//}