@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic");

/* INICIO */
.inicio_homepage {
    background-image: linear-gradient(to bottom, #0A2234, #0f2d4c00), url('../img/background_inicio_homepage.png');
    height: 500px;
}

/* NEWS source: https://codepen.io/claudiulazar/pen/OdvVOo */
h1,h2 {
  font-family: 'Oswald';
}

h1#principal{
  font-size: 2.5rem;
  padding-top: 2em;
  padding-bottom: 1em;
  padding-left: 50px;
}

h5#second {
    font-family: "Source Sans Pro 600", sans-serif;
    margin-left: 50px;
    font-size: 1.6em;
    color: white;
	  padding-top: 2.5rem;
}

.news {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
	/* CONSOANTE O TAMANHO DO TEXTO DE CIMA
	É PRECISO MUDAR O Nº DE PIXEIS DA MARGIN ABAIXO PROS RETANGULOS
	DAS NEWS FICAREM CENTRADOS ENTRE A IMAGEM DE FUNDO E O AZUL */
    margin: 225px auto 0 auto;
	  overflow: auto;

    > div {
      flex: 0 0 340px;
	    height: 180px;
      border-radius: 0.8rem;
      transition: 0.5s ease-in-out;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:nth-of-type(1) {
        background-image: url('../img/news/1_boasvindas.jpg');
      }
      &:nth-of-type(2) {
        background: #D9D9D9;
      }
      &:nth-of-type(3) {
        background: #D9D9D9;
      }
      &:nth-of-type(4) {
        background: #D9D9D9;
      }


      .content {
        font-size: 1.5rem;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 15px;
        opacity: 0;
        flex-direction: column;
        height: 100%;
        justify-content: flex-end;
        background: rgb(217 217 217);
        background: linear-gradient(
          0deg,
          #fff 0%,
          rgba(255, 255, 255, 0) 100%
        );
        transform: translatey(100%);
        transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
        visibility: hidden;

      }

      &:hover {
        flex: 0 0 350px;
        box-shadow: 1px 3px 15px #d9d9d9ad;

      }

      &:hover .content {
        opacity: 1;
        transform: translatey(0%);
        visibility: visible;
      }
    }
    }



/* CICLOS ESTUDO */
.ciclos_estudo {
    background-color: #002E4F;
    height: max-content;
    display: flex;
    justify-content: space-around;
    padding-top: 10rem;
	padding-bottom: 4rem;
}

.ciclos_estudo .ciclos_estudo_column {
    height: fit-content;
    background-color: #002E4F;
	max-width: 50%;
	padding: 2rem;

    > div {
      display: flex;
	  align-items: center;
	  margin-bottom: 2rem;
    }

}


h3#ciclos_estudo_title {
    color: white;
    font-size: 1.8rem;
    font-family: 'Oswald';
}

button#ciclos_estudo_button {
  margin-left: 4rem;
  padding: 0.2rem 0.6rem;
  height: max-content;
  width: max-content;
  border: none;
  border-radius: 1rem;
  font-family: "Source Sans Pro 600", sans-serif;
  box-shadow: 1px 1px 5px #0f2d4c;
  color:#2b4c6a;
  font-size: 0.7rem;
  font-weight: bold;
}

button#ciclos_estudo_button:hover {
  scale: 1.05;
  cursor: pointer;
}

p#ciclos_estudo_p {
    color: white;
    font-family: "Source Sans Pro", sans-serif;
	max-width: 600px;
}

p#ciclos_estudo_perfis_p {
    color: white;
    font-family: "Source Sans Pro", sans-serif;
	margin: -1rem 0 -0.5rem 4rem;
}

		/* CICLOS ESTUDO RESPONSIVE */

@media (max-width: 800px) {
    .ciclos_estudo  {
		display: flex;
        flex-direction:column;
		align-items: center;
		padding-bottom: 3rem;

		.ciclos_estudo_column {
			padding-bottom: 2rem;
			max-width: 100%;
		}
    }

}

/* ORIGEM */
.origem {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background: white;
	padding: 6rem 2rem;
	height: max-content;
	overflow:auto;

	> div {
		max-width: 50%;
	}

}

img#origem {
		width: 400px;
	}

h2#sobre_title{
  margin-bottom: 2rem;
  font-size: 2.1rem;
}

p#sobre_p {
	color:#0f2d4c;
	font-family: "Source Sans Pro 600", sans-serif;

}


/* TEAM source: https://codepen.io/kristen17/pen/wvPebxy */
.team {
	background: #B0CEE4;
	height: max-content;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 6rem 2rem;
}

.team_row1 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 3rem;
}

h2#title_team {
	font-family: 'Oswald';
	font-size: 2.5rem;
}

button#year_team{
	font-family: "Source Sans Pro", sans-serif;
	margin-left: 2rem;
	padding: 0.2rem 0.6rem;
	background-color: white;
	color:#2b4c6a;
	border: none;
	border-radius: 1rem;
	box-shadow: 1px 1px 5px #2b4c6a;
}

button#year_team:hover {
	scale: 1.05;
	cursor: pointer;
}

.team_row2 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
	overflow: auto;

	.content h2 {
		color: white;
		margin-left: 0;
		font-size: 1.7rem;
	}

	.content p {
		color: white;
		font-size: 1rem;
    margin-left: 10px;
	}

  .content .colaboradores p{
    padding-bottom: 2px;
  }

    > div {
      flex: 0 0 300px;
      height: 350px;
      border-radius: 0.5rem;
      transition: 0.5s ease-in-out;
      cursor: pointer;
      box-shadow: 1px 5px 15px #2b4c6a;
      position: relative;
      overflow: hidden;

      &:nth-of-type(1) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 0% / cover;
      }
      &:nth-of-type(2) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 14% / cover;
      }
      &:nth-of-type(3) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 28% / cover;
      }
      &:nth-of-type(4) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 42% / cover;
      }
      &:nth-of-type(5) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 56% / cover;
      }
      &:nth-of-type(6) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 70% / cover;
      }
      &:nth-of-type(7) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 84% / cover;
      }
      &:nth-of-type(8) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 89% / cover;
      }

      &:nth-of-type(9) {
        background: url('../img/background_inicio_homepage.png')
          no-repeat 91% / cover;
      }

      .content {
        font-size: 1.1rem;
        font-family: 'Oswald';
        color: #fff;
        display: flex;
		  align-content: center;
	    padding: 30px;
	    flex-direction: column;
	    height: 100%;
	    justify-content: flex-start;
        opacity: 0;
        height: 100%;
        background: #2b4c6a;
        background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0) 0%,
			#1f4d6de8 100%
        );
        transform: translatey(100%);
        transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
        visibility: hidden;

      }

      &:hover {
        flex: 0 0 350px;
        box-shadow: 1px 3px 15px #2b4c6a;
        transform: translatey(-30px);
      }

      &:hover .content {
        opacity: 1;
        transform: translatey(0%);
        visibility: visible;
      }
    }
  }

/* TESTEMUNHOS */
.testemunhos {
	display: grid;
  grid-template-rows: 6rem 6rem 6rem;
	grid-template-columns: 15% 25% 20% 20% 20%;
	grid-template-areas:
		"a b b c c"
		"d d e e e"
		"f f f g g";
}

.testemunhos a {
  text-decoration: none;
}

.testemunhos a h2 {
	color: white;
	text-align: center;
  line-height: 5.5rem;
	margin: 0;

  &:hover {
        scale: 1.05;
	    cursor: pointer;
      }
}

.testemunhos_title {
	grid-area: a;
  background: #0f2d4c url('../img/testemunhos/titulo.png')
          no-repeat 50% / contain;
}

.testemunhos_biomedica {
	grid-area: b;
  background: #3074a5 url('../img/testemunhos/engenharia_biomedica.png')
        no-repeat 50% / cover;
}

.testemunhos_perfis {
	grid-area: c;
  background: #3074a5 url('../img/testemunhos/perfis_mestrado.png')
          no-repeat 50% / cover;
}

.testemunhos_dissertacoes {
	grid-area: e;
  background: #3074a5 url('../img/testemunhos/dissertacoes_mestrado.png')
          no-repeat 50% / cover;
}

.testemunhos_mobilidade {
	grid-area: d;
  background: #3074a5 url('../img/testemunhos/programas_mobilidade.png')
          no-repeat 50% / cover;
}

.testemunhos_estagios {
	grid-area: f;
  background: #3074a5 url('../img/testemunhos/estagios_verao.png')
          no-repeat 50% / cover;
}

.testemunhos_bioentrevistas {
	grid-area: g;
  background: #3074a5 url('../img/testemunhos/bioentrevistas.png')
          no-repeat 50% / cover;
}