/*CSS GENERAL RULES FOR BODY SECTION*/
html{
  background-image: url("../images/background2.png");
  background-repeat: repeat;
}
body {
  display: block;
  height: 100%;
  margin: 0;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 60px;
  position: relative;
}




/*CSS GENERAL RULES FOR FOOTER SECTION*/

/*style the position, size, color and typography of the footer*/
#footer{
   position: absolute;
   bottom:0;
   width:100%;
   height:80px;
   color: rgba(255,255,255,1);
   background-color: rgba(0,0,0,0.75);
   text-align: center;
   font-size: calc(10px + 0.25vw);
}

/*style the footnote in the footer*/
#copy{
  font-family: "arial";
  font-size: calc(10px + 0.25vw);
}

/*style the subnav items "Copyright" and "Terms of use" in the footer*/
#navfoot{
  text-align: center;
}
#navfoot li{
  display: inline;
  padding-right: 15px;
}
#navfoot a{
  text-decoration: none;
  color: rgb(192,197,206);
}
#navfoot a:hover {
  color: rgb(22, 160, 146);
}




/*CSS GENERAL RULES FOR SEARCH TOOL*/
#search{
  float: right;
  margin-right: 20px;
  display: block;
}




/*CSS GENERAL RULES FOR HEADER SECTION*/
header{
	margin: 0;
	border:0;
	max-width: 100%;
}
img.coverpic{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  border-radius: 50%;
  padding: 0;
}
#idtext{
	display: block;
  text-align: center;
	margin-top: 20px;
  margin-bottom: 0;
  padding: 0;
	font-family: 'Oswald';
	font-size: calc(25px + 2vw)
}

/*style the social media icons*/
#social{
  display: block;
  text-align: center;
  margin-left: -35px;
}
#social li{
  display: inline;
}
#social li img{
  width: 3%;
  min-width: 30px;
}
.ic-img{
  width: 100%;
  height: auto;
  border: none;
  margin: 0;
  transform: scale(1);
  transition: all 0.3s;
}
#social li:hover .ic-img{
  transform:scale(1.5);
}

/*style the language link*/
.lang{
  float: right;
  margin-top: 20px;
  padding-right: 20px; 
  width: 30px;
}
.flag{
  width: 100%;
  border-radius: 5px;
}




/*CSS RULES FOR NAVBAR*/
.nav ul{
      list-style: none;
      background-color: rgba(0,0,0,0.75);
      text-align: center;
      padding: 0;
      margin: 0;
    }
.nav li{
      font-family: 'Oswald', sans-serif;
      font-size: 1.2em;
      line-height: 40px;
      height: 40px;
      border-bottom: 1px solid rgb(136, 136, 136);
    }
.nav a{
      text-decoration: none;
      color: rgb(255,255,255);
      display: block;
      transition: .3s background-color;
    }
.nav a:hover{
      background-color: rgba(0,81,81,0.5);
    }
.nav a.active{
	background-color: rgb(198,198,198);
	color: rgb(0,0,0);
	cursor: default;
}
@media screen and (min-width: 600px){
	.nav li {
      width: 120px;
      border-bottom: none;
      height: 50px;
      line-height: 50px;
      font-size: 1.4em;
    }
    .nav li {
      display: inline-block;
      margin-right: -5px;
    }
}




/*CSS RULES FOR SUBNAVBAR IN CV PAGES*/
.subnav ul{
      list-style: none;
      background-color: rgba(112,112,112,0.75);
      text-align: center;
      padding: 0;
      margin: 0;
      border-top: none;
}
.subnav li{
      font-family: 'Oswald', sans-serif;
      font-size: 0.9em;
      line-height: 30px;
      height: 30px;
}
.subnav a{
      text-decoration: none;
      font-size: 0.8em;
      line-height: 30px;
      color: rgb(0,0,0);
      display: block;
      transition: .3s background-color;
}
.subnav a:hover{
      background-color: rgba(0,130,130,0.5);
}
.subnav a.active2{
  background-color: rgb(232, 232, 232);
  color: rgb(68, 68, 68);
  cursor: default;
}
@media screen and (min-width: 600px) {
  .subnav li {
      width: 200px;
      border-bottom: none;
      height: 30px;
      line-height: 50px;
      font-size: 1.4em;
    }
    .subnav li {
      display: inline-block;
      margin-right: -5px;
    }
}




/*CSS FOR INDEX PAGE*/
#quote{
  display: table;
  width: auto;
  margin: 25px auto;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  text-align: center;
  font-family: 'Faustina';
  font-size: calc(15px + 0.8vw);
}
#author{
	display: inline-block;
	width: 100%;
	margin-top: 0; 
	text-align: center;
  font-family: 'Faustina';
  font-size: calc(12px + 0.25vw);
}

/*style the pictures grid*/
#rig{
  background-color: rgb(0,0,0);
  max-width: 75%;
  margin:0 auto;
  padding:0;
  font-size:0;
  list-style:none;
}
#rig li{
  display: inline-block;
  width: 25%;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0;
}
.rig-cell{
  display: block;
  position: relative;
  overflow: hidden;
}
.rig-img{
  display:block;
  width: 100%;
  height: auto;
  border: none;
  margin: 0;
  transform: scale(1);
  transition: all 1s;
}
#rig li:hover .rig-img{
  transform:scale(1.05);
}
.rig-overlay{
  position: absolute;
  display:block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: rgb(0,0,0); url(img/link.png) no-repeat center 20%;
  background-size:50px 50px;
  opacity: 0.65;
  filter:alpha(opacity=0);
  transition:all 0.6s;
}
#rig li:hover .rig-overlay{
  opacity: 0.15;
}
.rig-text{
  display:block;
  padding:0 30px;
  box-sizing:border-box;
  position:absolute;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: capitalize;
  font-size: calc(8px + 0.6vw);
  font-weight: bold;
  font-family: 'Oswald', sans-serif;
  font-weight: normal!important;
  top: 60%;
  color: white;
  opacity:0;
  filter: alpha(opacity=0);
  transform: translateY(-20px);
  transition: all .3s;
}
.leg1{
  top: 80%;
}
.leg2{
  top: 70%;
}
.leg3{
  top: 80%;
}
#rig li:hover .rig-text{
  transform:translateY(0px);
  opacity:0.95;
  color: rgb(0,0,0);
  background-color: rgba(255,255,255,0.50);
}
@media (max-width: 9000px) {
    #rig li {
        width:25%;
    }
}
@media (max-width: 700px) {
    #rig li {
        width:33.33%;
    }
}
@media (max-width: 550px) {
    #rig li {
        width:50%;
    }
}




/*CSS FOR PROFILE PAGE*/
.headerprofile{
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 0;
  margin-bottom: 25px;
  font-family: 'Faustina';
  font-size: calc(10px + 2vw);
}
#p1{
  margin-left: 8%;
  margin-right: 8%;
  margin-bottom: 15px;
  padding: 20px;
  text-align: center;
  font-size: calc(12px + 0.65vw);
  text-shadow: 1px 1px rgb(196, 196, 196);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  line-height: 40px;
  font-family: 'Faustina';
  word-spacing: 5px;
}
#p2{
  margin-left: 8%;
  margin-right: 8%;
  margin-bottom: 15px;
  padding: 20px;
  text-align: left;
  font-size: calc(10px + 0.5vw);
  text-shadow: 0.5px 0.5px rgb(196, 196, 196);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  line-height: 40px;
  font-family: 'Faustina';
  word-spacing: 5px;
}
#p3{
  margin-left: 8%;
  margin-right: 8%;
  margin-bottom: 2%;
  padding: 20px;
  text-align: center;
  font-size: calc(12px + 0.5vw);
  font-style: normal;
  text-shadow: 1px 1px rgb(196, 196, 196);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  line-height: 40px;
  font-family: 'Faustina';
  word-spacing: 5px;
}
img.slides{
  display: block;
  position: relative;
  bottom: 7%;
  left: 25%;
  height: 50%;
  width: 50%;
}
button.slide-bt-left{
  outline:none;
  display: inline;
  position: relative;
  left: 25%;
  width: 50%;
  font-size: calc(12px + 1vw);
  border: none;
  font-weight: bold;
  color: rgb(255,255,255);
  background-color: rgba(0,0,0,0.5);
}
button.slide-bt-right{
  outline:none;
  display: inline;
  position: relative;
  left: 25%;
  width: 50%;
  font-size: calc(12px + 1vw);
  border: none;
  font-weight: bold;
  color: rgb(255,255,255);
  background-color: rgba(0,0,0,0.5);
}




/*CSS FOR CV PAGES*/
/*style the whole section/content*/
.section{
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  margin: 25px 1% 25px 1%;
  padding: 20px;
  width: 80%;
  overflow: auto;
}
.details{
  display: block;
  outline:none;
}
.details:hover{
cursor: pointer;
}
.h2{
  display: inline-block;
  width: 100%;
  margin-left: 2%;
  margin-top: 25px;
  margin-bottom: 10px;
  font-family: 'Faustina';
  font-size: calc(10px + 1vw);
}

/*style the whole list of working-studing places. Note it is under section style already*/
.list{
  display: block;
  margin-left: 2%;
  margin-top: 25px;
  line-height: 27px;
  font-family: 'Faustina';
  font-size: calc(10px + 0.6vw);
  word-spacing: 3px;
}

/*style the activities drop-down detail tag. Note it is under section style already*/
.detag{
  color: rgb(99, 99, 99);
  text-shadow: 0.5px 0.5px rgb(22, 22, 22);
  font-size: calc(8px + 0.6vw);
  margin-top: 5px;
  outline:none;
}

/*style the list of activities that is hidden by default. Note it is under section style already*/
.atividades{
  line-height: 22.5px;
  text-align: left;
  font-size: calc(8px + 0.6vw);
  color: rgb(58, 58, 58);
  word-spacing: 3px;
}
.titulo{
  color: rgb(61, 61, 61);
}
.subsection{
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  margin: 25px 25px 25px 2%;
  padding-right: 20px;
  padding-bottom: 10px; 
  line-height: 27px;
  width: 70%;
  font-family: 'Faustina';
  font-size: calc(8px + 0.6vw);
  word-spacing: 3px;
}
.destaq:hover{
      margin-left: 25px;
      background-color: rgba(0,130,130,0.15);
      border-radius: 5px;
}
.setor{
  line-height: 22.5px;
  text-align: justify;
  text-shadow: 1px 1px rgb(201, 201, 201);
  font-size: calc(10px + 0.6vw);
  word-spacing: 3px;
}
#table{
  display: inline-block;
  font-size: calc(6px + 0.6vw);
  margin-right: 0;
  width: 100%;
}
#attention{
    font-family: 'Faustina';
  font-size: calc(8px + 0.4vw);
  word-spacing: 3px;
}

/* Style for the buttons that are used to open and close the additional info (accordion panel) */
button.accordion{
    background-color: rgb(226, 226, 226);
    color: rgb(0, 0, 0);
    cursor: pointer;
    padding: 6px;
    width: calc(150px + 0.30vw);
    text-align: center;
    font-family: arial, helvetica, verdana;
    font-size: calc(8px + 0.30vw);
    border: 0.5px solid rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px rgb(226, 226, 226);
    border-radius: 5px;
    outline: none;
    transition: 0.4s;
    margin-top: 15px;
}
button.accordion.active, button.accordion:hover{
    background-color: rgba(0,0,0,0.20);
}

/* Style for the the additional info panel (accordion panel) that is hidden by default */
div.panel {
  display: none;
  width: 100%;
  box-shadow: 3px 3px rgb(226, 226, 226);
}
.projects{
  background-color: rgba(0,0,0,0.20);
  box-shadow: 1px 1px rgb(181, 181, 181);
  padding:15px;
  line-height: 23px;
  font-family: 'Faustina';
  text-align: justify;
  font-size: calc(10px + 0.3vw);
  word-spacing: 3px;
}
.alignleft{
  text-align: left;
}
.recuo{
  display: block;
  margin-left: 15px;
  padding-left: 5px;
  width: 96%;
  border-radius: 5px;
}
.recuo:hover{
      margin-left: 25px;
      background-color: rgba(0,130,130,0.15);
    }
.highlight{
  font-size: calc(8px + 0.75vw);
  text-shadow: 0.5px 0.5px rgb(160, 160, 160);
  color: rgb(0, 81, 81);
}
.sectionlang{
  padding-right: 10px;
  display: inline-block;
  border-radius: 10px;
  margin: 25px 15px 25px 2%;
  padding-right: 10px;
  width: 280px;
  line-height: 27px;
  font-family: 'Faustina';
  text-align: justify;
  font-size: calc(10px + 0.6vw);
  word-spacing: 3px;
}
.hlang{
  display: block;
  margin: 25px 25px 25px 2%;
  font-family: 'Faustina';
  font-size: calc(10px + 0.85vw);
  text-align: center;
}
.hlangpt{
  display: block;
  margin: 25px 25px 25px 2%;
  font-family: 'Faustina';
  font-size: calc(10px + 1.2vw);
  text-align: center;
}
.ordem{
  display: block;
  text-shadow: 0.5px 0.5px rgb(160, 160, 160);
  margin-left: 15px;
  padding-left: 5px;
  width: 80%;
  border-radius: 5px;
}
.show:hover{
      margin-left: 25px;
      background-color: rgba(0,130,130,0.5);
    }
.recuolang{
  display: block;
  margin-left: 15px;
  padding-left: 5px;
  width: 90%;
  border-radius: 5px;
}
.recuolang:hover{
      margin-left: 5px;
      background-color: rgba(0,130,130,0.25);
    }
#pt{
  background-image: url("../images/pt.png");
  background-repeat: no-repeat;
}
#en{
  background-image: url("../images/en.png");
}
#de{
  background-image: url("../images/de.png");
}
#es{
  background-image: url("../images/es.png");
}
#note{
  display: block;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  margin: 25px 15px 25px 15px;
  padding-right: 10px;
  width: 97%;
  line-height: 27px;
  font-family: 'Faustina';
  text-align: right;
  font-size: calc(10px + 0.45vw);
  word-spacing: 3px;
}
#underline{
  text-decoration: underline;
  font-style: italic;
}
#shadow{
  text-shadow: 0.5px 0.5px rgb(160, 160, 160);
}




/*CSS FOR COPYRIGHT PAGE*/
#cr{
  display: table;
  width: 100%;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 135px;
  background-color: rgba(255, 255, 255, 0.75);
  text-align: center;
  font-family: 'Faustina';
  font-size: calc(12px + 0.6vw);
}
.crtxt{
  font-family: 'arial', 'verdana';
  text-align: left;
  line-height: 2em;
  padding-left: 5%;
  padding-right: 5%;
}
.tu{
  font-family: 'arial', 'verdana';
  font-size: calc(12px + 0.4vw);
  text-align: justify;
  line-height: 1.8em;
  padding-left: 5%;
  padding-right: 5%;
}




/*CSS FOR CONTACT PAGE*/
#contatar{
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  margin: 2% 25px 25px 2%;
  padding: 20px; 
  line-height: 27px;
  width: 90%;
}
#contitle{
  margin-left: 2%;
  font-family: 'Faustina';
  font-size: calc(10px + 2vw);
  word-spacing: 3px;
}
.context{
  font-family: 'Faustina';
  font-size: calc(12px + 0.65vw);
  word-spacing: 3px;
}
#contaddress{
  font-family: 'Faustina';
  font-size: calc(10px + 0.6vw);
  word-spacing: 3px;
}




/*CSS FOR INTERESTS PAGE*/
button.diffint{
  display: block;
  line-height: 27px;
  font-family: 'Faustina';
  font-size: calc(10px + 1vw);
  word-spacing: 3px;
  font-weight: 500;
  color: rgb(255,255,255);
  background-color: rgba(0,0,0,0.75);
  border-radius: 10px 10px 0 0;
  overflow: auto;
  cursor: pointer;
  outline: none;
  text-align: left;
  transition: 0.4s;
  border: none;
  margin: 25px 0px 0px 1%;
  padding: 20px;
  width: 78%;
}
button.diffint.active, button.diffint:hover{
  background-color: rgba(0,0,0,0.25);
  color: rgb(0,0,0);
  font-weight: 700;
  text-shadow: 1px 1px rgba(255,255,255,0.25);
}
button.diffint:after{
  content: '\002B';
  color: rgba(255,255,255);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
button.diffint.active:after {
  content: "\2212";
}
div.section2 {
  border: none;
  margin: 0px 0px 25px 1%;
  padding: 20px;
  width: 75%;
  display: none;
  background-color: white;
  transition: max-height 0.2s ease-out;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 0 0 10px 10px;
}
p.paragraph{
  display: block;
  margin-top: 0px;
  line-height: 27px;
  font-family: 'Faustina';
  font-size: calc(10px + 0.6vw);
  word-spacing: 3px;
  text-align: justify;
}




/*CSS for music section*/
.music{
  display: inline-block;
  width: 15%;
  min-width: 100px;
  margin: 2%;
}
.play{
  text-align: center;
  margin-top: 60px;
  font-family: 'Faustina';
  font-size: calc(10px + 1.2vw);
}