:root{
  --blackcolor: #222831;
  --greycolor:  #393E46;
  --bluecolor:  #00ADB5;
  --lightbluecolor: #B7FAFD;
  --lightgreycolor: #EEEEEE;
  --darkgreycolor: #2B2D30;
  --whitecolor: #FFFFFF;
  --robotofont: 'Roboto', sans-serif;
  --codefont: 'Source Code Pro', monospace;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
  background-color: var(--lightgreycolor);
  font-family: var(--robotofont);
  font-size: 1.8rem;
}

img{
  max-width:100%;
}

h1, h2{
  text-transform: uppercase;
  text-align: center;
}

h1{
  font-size: 8rem;
}

@media (min-width:768px) {
  h1{
    font-size: 10rem;
  }
}

.container{
  width: 98%;
  margin: 0 auto;
  max-width: 140rem;
}

@media (min-width:768px) {
  .container{
    width: 90%;
  }
}

.container{
  width: 98%;
  margin: 0 auto;
  max-width: 140rem;
}

@media (min-width:768px) {
  .container{
    width: 90%;
  }
}

.new-section{
  padding: 3rem 0 5rem 0;
}

.new-section h2 i{
  color: var(--bluecolor);
}

a{
  text-decoration: none;
}

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

.button{
  text-transform: uppercase;
  text-align: center;

}

.button a{
  background-color: var(--bluecolor);
  padding: 1rem;
  font-weight: bold;
  border: 2px solid var(--whitecolor);
  color: var(--whitecolor);
  transition: all .3s ease;

}

.button a:hover{
  background-color: var(--whitecolor);
  border: 2px solid var(--bluecolor);
  color: var(--bluecolor);
}

/*INDEX*/
/*Header*/
.site-header{
  background-color: var(--blackcolor);
  margin: 0;
  color: var(--whitecolor);
  font-size: 2rem;
}

@media (min-width:768px) {
  .site-header{
    display: flex;
    justify-content: space-between;
    text-wrap: wrap;
    align-items: center;
  }
}

.site-header .logo{
  margin: 0;
  font-size: 3rem;
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-weight: bold;
}

@media (min-width:768px) {
  .site-header .logo{
    padding-left: 3rem;
    flex: 0 0 10%;
  }
}

.site-header .logo a{
  color: var(--whitecolor);
}

.site-header .logo span{
  color: var(--bluecolor);
}

.site-header .burguer{
  color: var(--bluecolor);
  text-align: center;
  padding-bottom: 3rem;
}

@media (min-width:768px) {
  .site-header .burguer{
    display: none;
  }
}

.site-header .main-menu{
  display: none;
  flex-direction: column;
  text-align: center;
  padding-bottom: 3rem;
}

@media (min-width:768px) {
  .site-header .main-menu{
    padding-top: 3rem;
    flex: 0 0 calc(90% - 2rem);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
}

.site-header .main-menu a{
  padding: 1rem;
  color: var(--whitecolor);
  transition: all .3s ease;
  border: 2px solid var(--blackcolor);
}

.site-header .main-menu a:hover{
  background-color: var(--bluecolor);
  border: 2px solid var(--whitecolor);
}

/*Main information*/
.main-information{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:space-around;
}

@media (min-width:768px) {
  .main-information{
    flex-direction: row;
  }
}

.main-information img{
  border-radius: 50%;
}

@media (min-width:768px) {
  .main-information img{
    flex: 0 0 30%;
  }
}

@media (min-width:768px) {
  .main-information .information{
    flex: 0 0 calc(60% - 3rem);
  }
}

.main-information .title{
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
}

@media (min-width:768px) {
  .main-information .title{
    text-align: left;
  }
}

.main-information .content{
  text-align: justify;
}

/* Education */
.education{
  background-color: var(--blackcolor);
  color: var(--whitecolor);
}

.education .fas{
  color: var(--bluecolor);
}

.education .personal-timeline{
  display: flex;
  flex-direction: column;
}

@media (min-width:768px) {
  .education .personal-timeline{
    flex-direction: row;
  }
}

.education .personal-timeline .time-content{
  background-color: var(--greycolor);
  margin-bottom: 2rem;
  text-align: justify;
  border: 1px solid var(--bluecolor);
  padding: 1rem;
}


.education .personal-timeline .time-content:last-of-type{
  margin-bottom: 0rem;
}

@media (min-width:768px) {
  .education .personal-timeline .time-content{
    flex: 0 0 calc(25% - 1rem);
    margin-bottom: 0;
    margin-right: 1rem;
    text-align: center;
  }

  .education .personal-timeline .time-content:last-of-type{
    margin-right: 0rem;
  }
}

.education .personal-timeline .time-content p{
  margin: 0.5rem 0;
}

.education .personal-timeline .time-content .title-year{
  font-weight: bold;
}

.education .personal-timeline .time-content .entity{
  font-size: 1.5rem;
  color: var(--bluecolor);
  margin-top: -0.5rem;
}

.education .personal-timeline .time-content .project-degree{
  font-size: 1.6rem;
  font-style: italic;
}

@media (min-width:768px) {
  .education .personal-timeline .time-content .project-degree{
    text-align: center;
  }
}

.project-degree a{
  color: var(--whitecolor);
}
.project-degree span{
  color: var(--bluecolor);
}

/*Experience*/
/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);

  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;

  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 2rem;
  height: 2rem;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid var(--bluecolor);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;

  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
  color: var(--bluecolor);
}

.desc {
  margin: 1em 0.75em 0 0;

  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.desc a{
  color: var(--bluecolor);
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 10000px) {

  .timeline {
    width: 100%;
    padding: 4em 0 1em 0;
  }

  .timeline li {
    padding: 2em 0;
  }

  .direction-l,
  .direction-r {
    float: none;
    width: 100%;

    text-align: center;
  }

  .flag-wrapper {
    text-align: center;
  }

  .flag {
    background: rgb(255,255,255);
    z-index: 15;
    font-size: 1.8rem;
  }

  .direction-l .flag:before,
  .direction-r .flag:before {
    position: absolute;
    top: -30px;
    left: 50%;
    content: ' ';
    display: block;
    width: 2rem;
    height: 2rem;
    margin-left: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid var(--bluecolor);
    z-index: 10;
  }

  .direction-l .flag:after,
  .direction-r .flag:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    height: 0;
    width: 0;
    margin-left: -8px;
    border: solid transparent;
    border-bottom-color: rgb(255,255,255);
    border-width: 8px;
    pointer-events: none;
  }

  .time-wrapper {
    display: block;
    position: relative;
    margin: 5px 0 0 0;
    z-index: 14;
  }

  .direction-l .time-wrapper {
    float: none;
  }

  .direction-r .time-wrapper {
    float: none;
  }

  .desc {
    position: relative;
    margin: 0 0 0 0;
    padding: 1em;
    background: rgb(245,245,245);
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
    box-shadow: 0 0 1px rgba(0,0,0,0.20);

    z-index: 15;
  }

  .direction-l .desc,
  .direction-r .desc {
    position: relative;
    margin: 0 1em 0 1em;
    padding: 1em;

    z-index: 15;
  }

}

@media screen and (min-width: 400px ?? max-width: 660px) {

  .direction-l .desc,
  .direction-r .desc {
    margin: 1em 4em 0 4em;
  }

}

/*Publications*/
.publications{
  background-color: var(--blackcolor);
  color: var(--whitecolor);
}

.publications .fas{
  color: var(--bluecolor);
}

.papers{
  text-align: justify;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.paper{
  flex: 0 0 100%;
  margin-top: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bluecolor);
}

.paper:last-of-type{
  border: none;
}

@media (min-width:768px) {
  .paper{
    border:none;
  }
}

.paper .bold{
  color: var(--bluecolor);
  font-weight: bold;
}

.paper a{
  color: var(--bluecolor);
}

.paper .journal{
  font-style: italic;
}

/*Teaching*/
table{
  width: 100%;
  text-align: center;
  margin-bottom: 3rem;
  border-collapse: collapse;
  border-bottom: 1px solid var(--bluecolor);
}

table thead{
  background-color: var(--bluecolor);
  color: var(--whitecolor);
}

table td,
table th{
  padding: 1rem;
  font-size: 0.8rem;
}

table .odd{
  background-color: var(--lightbluecolor);
}

@media (min-width:768px) {
  table td,
  table th{
    padding: 1rem;
    font-size: 2rem;
  }
}

/*Footer*/
.site-footer{
  background-color: var(--blackcolor);
  color: var(--whitecolor);
  padding-bottom: 0rem;
}

.site-footer a{
  color: var(--whitecolor);
}

.site-footer .content{
  display: flex;
  flex-direction: column;
  margin-bottom: 0.8rem;
}

@media (min-width:768px) {
  .site-footer .content{
    flex-direction: row;
    align-items: center;
  }

  .site-footer .content .contact-content{
    flex: 0 0 40%;
  }
}

.site-footer .content .contact-content i{
  color: var(--bluecolor);
}

.site-footer .content .social-networks{
  text-align: center;
  font-size: 3rem;
}

@media (min-width:768px) {
    .site-footer .content .social-networks{
      flex: 0 0 calc(60% - 4rem);
      display: flex;
      justify-content: space-around;
    }
}

.site-footer .content .social-networks a{
  color: var(--bluecolor);
  margin-right: 2rem;
}

.site-footer .content .social-networks a:last-of-type{
  margin-right: 0;
}

@media (min-width:768px) {
  .site-footer .content .social-networks a{
    margin-right: 0rem;
  }
}

.site-footer .rights{
  text-align: center;
  background-color: var(--bluecolor);
  padding: 1rem;
}

/* PUBLICATION and CONFERENCE */
.main-information-p span{
  font-weight: bold;
  color: var(--bluecolor);
}

.main-information-p a{
  color: black;
}

.abstract{
  background-color: var(--blackcolor);
  padding: 2rem;
  color: var(--whitecolor);
  text-align: justify;
  margin-top: 1rem;
}

.abstract .title-abstract{
  color: var(--bluecolor);
  font-weight: bold;
}

.citation{
  border: 1px solid var(--bluecolor);
  padding: 1rem;
  margin-top: 1rem;
}

.citation .title-citation{
  color: var(--bluecolor);
  font-weight: bold;
}

.citation .content-citation{

  max-width: 100%;
  white-space: pre-wrap;
  padding: 0;
  color: black;
  font-size: 1.5rem;
}

/*TEACHING and PROJECTS*/
.teaching .pc-course{
  text-align: center;
  font-weight: bold;
}

.directed-projects{
  background-color: var(--blackcolor);
  color: var(--whitecolor);
}

.directed-projects h2 i{
  color: var(--bluecolor);
}

.directed-projects .d-projects{
  display: flex;
  flex-direction: column;
}

.directed-projects .d-projects .project{
  background-color: var(--greycolor);
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid var(--bluecolor);
  text-align: justify;
  transition: all .3s ease;
}

@media (min-width:768px) {
  .directed-projects .d-projects .project:hover{
    transform: scale(1.05);
  }
}

.directed-projects .d-projects .project:last-of-type{
  margin-bottom: 0rem;
}

.directed-projects .d-projects .project span{
  color: var(--bluecolor);
  font-weight: bold;
}

.investigation-projects .projects,
.innovative-projects .i-projects{
  display: flex;
  flex-direction: column;
}

.investigation-projects .projects span,
.innovative-projects .i-projects span{
  color: var(--bluecolor);
  font-weight: bold;
}

.investigation-projects .projects .project,
.innovative-projects .i-projects .project{
  border-bottom: 1px solid var(--bluecolor);
}

.investigation-projects .projects .project:last-of-type,
.innovative-projects .i-projects .project:last-of-type{
  border-bottom: none;
}

.investigation-projects .projects .project .title,
.innovative-projects .i-projects .project .title{
  font-weight: bold;
  text-align: center;
}

/* MORE INFORMATION */
.extra-education-content,
.awards,
.grants-content{
  display: flex;
  flex-direction: column;
}

.extra-education-content .extra-education,
.awards .award,
.grants-content .grant{
  margin-bottom: 2rem;
}

.extra-education-content .extra-education p,
.awards .award p,
.grants-content .grant p{
  margin: 0;
  text-align: center;
}

.extra-education-content .extra-education i,
.awards .award i,
.grants-content .grant i{
  color: var(--bluecolor);
  text-align: center;
}

.extra-education-content .extra-education .name,
.awards .award .name,
.grants-content .grant .name{
  font-weight: bold;
}

.extra-education-content .extra-education .dates,
.awards .award .dates,
.grants-content .grant .dates{
  color: var(--bluecolor);
}

.extra-education-content .extra-education .entity,
.awards .award .entity,
.grants-content .grant .entity{
  font-style: italic;
}

.awards-section{
  background-color: var(--blackcolor);
  color: white;
}

.awards-section h2 i{
  color: var(--bluecolor);
}

.awards-section .awards .award .name{
  font-weight: normal;
}

/*PRESS*/
.press{
  display: flex;
  flex-direction:column;
  text-align: center;
}


.press-block .name-block{
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.press-block .press-subblock .name{
  font-weight: bold;
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.press-block .press-subblock ul{
  margin-bottom: 0.5rem;
}

.press-block .press-subblock ul a{
  padding-left: 0rem;
  color: var(--bluecolor);
}

/*CONTACT*/
/*Map*/
.map{
  background-color: var(--mycolorblue);
  height: 40rem;
}

/*Form*/
form{
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

form .field{
  display: flex;
  flex-direction: column;
}

form .field label{
  font-weight: bold;
  text-align: center;
}

form .field input,
form .field textarea{
  margin-bottom: 1rem;
}

form .field textarea{
  height: 20rem;
  resize: vertical;
}

form .button{
    background-color: var(--bluecolor);
    padding: 1rem;
    font-weight: bold;
    border: 2px solid var(--whitecolor);
    color: var(--whitecolor);
    transition: all .3s ease;
}

form .button:hover{
    background-color: var(--whitecolor);
    border: 2px solid var(--bluecolor);
    color: var(--bluecolor);
    cursor: pointer;
}

/*SEND EMAIL*/
.result-email{
  height: 70rem;
  display: flex;
  align-items: center;
}

.result-email .message{
  margin: 0 auto;
}

/*404*/
.main-not-found h2{
  font-size: 15rem;
  color: var(--bluecolor);
}

.main-not-found p{
  font-size: 8rem;
  text-align: center;
}

.main-not-found i{
  font-size: 15rem;
  color: var(--bluecolor);
  margin: auto auto;
}