/*/////////////////////////////////
// Folha de estilo do portfolio //
// Version: 0.1                  //
// Date: 24-06-2019              //
// Author: Diogo Matos         //
/////////////////////////////////*/

/*
 $$$$$$\                               $$\ 
$$  __$$\                              $$ |
$$ /  \__| $$$$$$\   $$$$$$\  $$$$$$\  $$ |
$$ |$$$$\ $$  __$$\ $$  __$$\ \____$$\ $$ |
$$ |\_$$ |$$$$$$$$ |$$ |  \__|$$$$$$$ |$$ |
$$ |  $$ |$$   ____|$$ |     $$  __$$ |$$ |
\$$$$$$  |\$$$$$$$\ $$ |     \$$$$$$$ |$$ |
 \______/  \_______|\__|      \_______|\__|
*/
/*
$$$$$$$\                      $$\         $$\                         
$$  __$$\                     $$ |        $$ |                        
$$ |  $$ | $$$$$$\   $$$$$$$\ $$ |  $$\ $$$$$$\    $$$$$$\   $$$$$$\  
$$ |  $$ |$$  __$$\ $$  _____|$$ | $$  |\_$$  _|  $$  __$$\ $$  __$$\ 
$$ |  $$ |$$$$$$$$ |\$$$$$$\  $$$$$$  /   $$ |    $$ /  $$ |$$ /  $$ |
$$ |  $$ |$$   ____| \____$$\ $$  _$$<    $$ |$$\ $$ |  $$ |$$ |  $$ |
$$$$$$$  |\$$$$$$$\ $$$$$$$  |$$ | \$$\   \$$$$  |\$$$$$$  |$$$$$$$  |
\_______/  \_______|\_______/ \__|  \__|   \____/  \______/ $$  ____/ 
                                                            $$ |
                                                            $$ |
                                                            \__|
*/
/*
$$$$$$$$\        $$\       $$\            $$\     
\__$$  __|       $$ |      $$ |           $$ |    
   $$ | $$$$$$\  $$$$$$$\  $$ | $$$$$$\ $$$$$$\   
   $$ | \____$$\ $$  __$$\ $$ |$$  __$$\\_$$  _|  
   $$ | $$$$$$$ |$$ |  $$ |$$ |$$$$$$$$ | $$ |    
   $$ |$$  __$$ |$$ |  $$ |$$ |$$   ____| $$ |$$\ 
   $$ |\$$$$$$$ |$$$$$$$  |$$ |\$$$$$$$\  \$$$$  |
   \__| \_______|\_______/ \__| \_______|  \____/
*/

@font-face {
	font-family: 'icones';
	src:url('../includes/fonts/icones.eot?9u4w27');
	src:url('../includes/fonts/icones.eot?#iefix9u4w27') format('embedded-opentype'),
		url('../includes/fonts/icones.woff?9u4w27') format('woff'),
		url('../includes/fonts/icones.ttf?9u4w27') format('truetype'),
		url('../includes/fonts/icones.svg?9u4w27#icones') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon {
	font-family: 'icones';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
	content: "\e986";
}

.icon-apple:before {
	content: "\eabf";
}


body {
	width: 100%;
	background-color: rgb(25, 187, 106);
	font-family: Arial;
	font-size: 15px ;
	color:white;

}

a {
	color: black;
	text-decoration: none;
} 

a:hover, a:active{
	color: #D3D3D3;
}


*{
	box-sizing: border-box;
}

img {
	width: 100%;
}


.row{
	width: 100%; /*100% ou auto*/
}

.relativa {
	position: relative;
}

header {
	height: 50px;
	background-color: rgba(0,0,0,.6);
	color: white;
	position: fixed;
	z-index: 100;
}

#menuPrincipal h1 {
		color: white;
		font-size: 30px;
		line-height: 5px;
		padding-top: 25px;
		padding-left: 20px;
}

#menuPrincipal ul {
	text-align: right;
}

#menuPrincipal a {
	color: white;
}

#menuPrincipal li {
	display: inline-block;/*alinhar os elementos de uma lista na horizontal */
	width: 7%;
	text-align: center;

}

.textoInicial {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	color: rgba(6, 19, 2, 0.568);
}

.textoInicial h1 {
    margin-bottom: 25px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 50px;
}



.artigoTitulo {
	color:#000000;
	font-size: 40px;
	font-weight: 200;
	padding-top: 10px;
	margin-bottom: 10px;
	line-height: 50px;
	text-align: center;
}

.artigoConteudo {
		padding: 10px;
		text-align: center;
	}

#skills {
		display: flex;
		flex-direction: row; /* Definir que o conteudo dentro desta caixa é apresntado em colunas */
		flex-wrap: wrap;
}

#skills article {
		padding: 5px; /* Definir margens das caixas no topo e no fundo */
		width: 33.3%;
		
	}


#skills h3 {
	color:#000000;
	font-size: 20px;
	font-weight: 100;
	padding-top: 10px;
	margin-bottom: 10px;
	line-height: 25px;
	text-align: center;
}

footer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
}

#direitos {
		width: 75%;
		text-align: left;
		margin-top: 10px;
	}

#contactos {
		width: 25%;
		text-align: right;
}

footer nav {
		width: 100%;
}

#portfolio {
		display: flex;
		flex-direction: row; /* Definir que o conteudo dentro desta caixa é apresntado em colunas */
		flex-wrap: wrap;
}

#portfolio article {
		padding: 5px; /* Definir margens das caixas no topo e no fundo */
		width: 33.3%;
}		

#linha {
	border-top: 0px #aaa solid;
}


#portfolio h3 {
	color:#000000;
	font-size: 20px;
	font-weight: 100;
	padding-top: 10px;
	margin-bottom: 10px;
	line-height: 25px;
	text-align: center;
}




/*
$$\      $$\           $$\       $$\ $$\           
$$$\    $$$ |          $$ |      \__|$$ |          
$$$$\  $$$$ | $$$$$$\  $$$$$$$\  $$\ $$ | $$$$$$\  
$$\$$\$$ $$ |$$  __$$\ $$  __$$\ $$ |$$ |$$  __$$\ 
$$ \$$$  $$ |$$ /  $$ |$$ |  $$ |$$ |$$ |$$$$$$$$ |
$$ |\$  /$$ |$$ |  $$ |$$ |  $$ |$$ |$$ |$$   ____|
$$ | \_/ $$ |\$$$$$$  |$$$$$$$  |$$ |$$ |\$$$$$$$\ 
\__|     \__| \______/ \_______/ \__|\__| \_______|                                                                                                                                            
*/


@media (min-width: 1px) and (max-width: 767px){

header {
	height: 190px;
	background-color: rgba(0,0,0,.6);
	color: white;
	position: relative;
}

header nav li:hover {
	background-color: black;
	/* mudamos o background-color da li, porque esta ocupa 100% da largura */
}

#menuPrincipal h1 {
		color: white;
		font-size: 30px;
		line-height: 30px;
		padding-top: 10px;
		padding-left: 20px;
		text-align: center;
}

#menuPrincipal ul {
	text-align: center;
}


#skills {
		display: flex;
		flex-direction: column; /* Definir que o conteudo dentro desta caixa é apresntado em colunas */
		flex-wrap: wrap;
}

#skills article {
		padding: 5px; /* Definir margens das caixas no topo e no fundo */
		width: 100%;
	}

#portfolio {
		display: flex;
		flex-direction: column; /* Definir que o conteudo dentro desta caixa é apresntado em colunas */
		flex-wrap: wrap;
}

#portfolio article {
		padding: 5px; /* Definir margens das caixas no topo e no fundo */
		width: 100%;
}		

#linha {
	border-top: 1px #aaa solid;
}

#menuPrincipal ul {
	text-align: center;
}

#menuPrincipal a {
	color: white;
}

#menuPrincipal li {
	display: flex;
	flex-direction: column; ;/*alinhar os elementos de uma lista na horizontal */
	width: 100%;
	text-align: center;
	padding-top: 15px;

}

.descricao {
	display: none;
}


}