/*Corpo do website*/

body {
  background-image: linear-gradient(#f2f2f2, #FED39E, #000000);
}
/**/
/*Textos*/
h1 {   /*Aparece na barra de menus*/
  font-family: 'Pacifico';
  color: #000000; 
  font-size: 200%;
}
h2 {   /*Aparece nos direitos reservados*/
  font-family: 'Oswald';
  color: #ffffff; 
  font-size: 100%;
}
h3 {  /*Aparece no contacte-me*/
  font-family: 'Oswald';
  color: #ffffff; 
  font-size: 300%;
}
h4 {  /*Aparece no sobre mim*/
  font-family: 'Oswald';
  color: #000000; 
  font-size: 100%;
}
/**/
/*PC*/
  /*Barra*/

.botao{display: none;} /*Só telemovel*/
.cima {  /*Barra de navegação*/
  background-color: #FED39E;
  overflow: hidden;
  position: fixed;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  top: 0;
  z-index: 999;
}
.cima h1 { /*Barra de navegação, texto*/
  float: right;
  color: #000000;
  text-align: center;
  padding: 1% 4%;
  font-size: 140%;
  cursor: pointer;
}
.cima h1:hover { /*Barra de navegação passa rato por cima*/
  background-color: rgb(255, 255, 255);
  color: black;
}
.esquerda { /*Barra de navegação, logotipo*/
  margin: 1%;
  float: left;
  width: 80px;
}
  /**/
  /*Portfolio*/
.portfolio {  /*Imagem do portfólio*/
  margin-top: 6%;
  margin-left: 10%;
  margin-bottom: 2%;
}
.tabela { /*Tabela do portfólio*/
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.tabela img{ /*Imagens da tabela*/
  width: 100%;
}
  /**/
  /*Sobre*/
.antesobre{ /*Imagem do sobre*/
  width: 80%;
  margin-left: 10%;
  margin-top: 5%;
  position: absolute;
}
.sobre { /*Corpo do sobre*/
  background-color: #FED39E;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20%;
}
.sobre .eu {  /*Minha imagem*/
  text-align: right;
  margin-right: 25%;
}
.sobre .informacao { /*Texto*/
  margin-top: 18%;
  margin-right: 60%;
  margin-left: 5%;
  font-family: 'Oswald';
  color: #000000; 
  font-size: 150%;
}
.sobre h4 { /*texto*/
  text-align: left;
  padding-top: 40%;
  margin-left: 5%;
}
.flor { /*Imagem da flor*/
  width: 16%;
  margin-left: 79%;
  margin-top: 12%;
  position: absolute;
}
  /**/
  /*Contactos*/
.antescontatos { /*Imagem dos contactos*/
  margin-left: 10%;
  margin-top: 4%;
  position: absolute;
  width: 70%;
}
.contatos { /*Corpo dos contactos*/
  background-color: #000000;
  width: 80%;
  margin-left: 10%;
  margin-top: 26%;
  float: left;
}
.contatos h3 { /*texto dos contactos*/
  margin-left: 5%;
}
.contatos h3:hover { /*Passa rato por cima do contacte-nos*/
  text-shadow: -2px -2px 5px #FED39E;
}
.contatos .conteudo { /*Conteudo dos contactos*/
  width:70%; 
  height:60px;
  color: white;
  line-height: 60px;
  text-align: center;
  background: none;
  border: none;
  background-image: url(../img/fundo.png);
  background-repeat: no-repeat;
  background-size:100% 100%;
  font-size: 150%;
  margin-bottom: 10px;
  margin-left: 10%;
}
.enviar { /*Botão enviar*/
  width:70%; 
  height:60px;
  margin-left: 10%;
  line-height: 60px;
  text-align: center;
  border: none;
  font-size: 150%;
  margin-bottom: 10px;
}

.contatos .caixa2, .contatos .caixa1 { /*Caixas de separação*/
  width: 45%;
  float: left;
 }

.contatos .telemovel, .contatos .redes { /*Conteudos das caixas*/
  width: 200px;
  margin-left: 0%;
  text-align: center;
  font-family: 'Oswald';
  color: #FED39E; 
  font-size: 150%;
  float: left;
}

.contatos .telemovel img, .contatos .redes img{ /*Imagens das caixas*/
 width: 80px;
}
.insta { /*Botão instragram*/
  width: 2%;
} 
.limpaEspaco{ /*Limpar espaço*/
  clear: both;
  padding-top: 3%;
}
/**/
/*Tablet*/
@media only screen and (max-width: 768px) { 
  .botao{display: none;}
  .cima {
    width: 100%;
    margin-left: 0%;
  }
.esquerda {
  margin: 2%;
  width: 70px;
}
  /**/
  /*Portfolio*/
.portfolio {
  margin-top: 12%;
  width: 150%;
  margin-left: auto;
}
.tabela {
  width: 100%;
}
  /**/
  /*Sobre*/
.antesobre{
  width: 100%;
  margin-left: auto;
  margin-top: 2%;
}
.sobre {
  background-color: #FED39E;
  width: 100%;
}
.sobre .eu {
  width: 100%;
}
.sobre .informacao {
  margin-top: 0%;
  margin-right: 1%;
  margin-left: 0%;
  font-size: 150%;
}
.sobre h4 {
  text-align: left;
  padding-top: 20%;
  margin-left: 1%;
}
.flor { display: none;}
 /**/
/*Contactos*/
.antescontatos {
  margin-left: auto;
  margin-top: 9%;
  width: 100%;
}
.contatos {
  width: 100%;
  margin-left: 0%;
  margin-top: 40%;
}
.contatos .conteudo {
  width:90%; 
  height:40px;
  line-height: 20px;
  font-size: 100%;
  margin-bottom: 10px;
  margin-left: 10%;
}
.enviar {
  width:90%; 
  height:40px;
  line-height: 20px;
  margin-left: 10%;
  font-size: 100%;
}
.contatos .telemovel, .contatos .redes {
  width: 100px;
  margin-left: 10%;
  font-size: 100%;
}
.contatos .telemovel img, .contatos .redes img{
 width: 70px;
}
.insta {
  width: 5%;
}
}
/*Telemóvel*/
@media only screen and (max-width: 320px) {
.esquerda{ display: none;}
.cima {
  width: 300px;
  top:50px;
  visibility: hidden;
  margin: 0;
  right: 1px;
}
.cima h1{ 
  float: none; 
  display: block;
  margin: 0;
  padding:0;
}
.botao{
  background-image: url(../img/menu.png);
  background-repeat: no-repeat;
  width: 52px;
  height: 52px;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  cursor: pointer;
}
.menu:focus{
  pointer-events: none;
}
.menu:focus .cima{
  visibility: visible;
  pointer-events: auto;
  display:block;
}
.flor img{
  display: none;
}
.tabela {
  width: 100%;
}
.tabela td{display: block;}
  /*Portfolio*/
.portfolio {
  margin-top: 6%;
  margin-left: 10%;
  margin-bottom: 2%;
}
  /**/
  /*Sobre*/
.antesobre{
  width: 130%;
  margin-left: 15%;
  margin-top: -5%;
}
.sobre {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}
.sobre .eu {
  text-align: left;
  width: 150%;
  margin-left: 5%;
}
.sobre .informacao {
  margin-top: 0%;
  margin-right: auto;
  margin-left: auto;
  font-size: 150%;
}
.sobre h4 {
  text-align: left;
  padding-top: 15%;
  margin-left: 5%;
}
  /**/
  /*Contactos*/
.antescontatos {
  margin-left: 15%;
  margin-top: 8%;
  width: 100%;
}
.contatos {
  width: 98%;
  margin-top: 40%;
}
.contatos h3 {
  margin-left: 25%;
  font-size: 300%;
}
.contatos .conteudo {
  width:90%; 
  margin-left: 5%;
}
.enviar {
  width:90%; 
  margin-left: 5%;
}
.contatos .telemovel, .contatos .redes {
  padding-left: 5%;
  padding-top: 20px;
}
.contatos .caixa2, .contatos .caixa1 {
  width: 100%;
  float: left;
 }
}