/***** Reglages generaux *****/
* {
	margin : 0;
	padding : 0;
	box-sizing: border-box;
	color : white;
}

html, body {
	height : 100%;
}

body {
	background-color: #0077b3;
}

body>div>* {
	background-color: #262626;
	margin : auto;
}

@media screen and (min-width: 768px) {
    #navbar-nav{
        background-color: #3d6fb5;
    }
}

/*Pour adapter la position des liens a la taille du menu*/
html {
  scroll-padding-top: 30px; /* taille du sticky header */
}

/*Polices*/
@font-face {
	font-family: "TGL";
	src: url('../fonts/TGL.ttf');
}

h1{
	padding : 15px;
	text-align : center;
	margin-top : 20px;
	font : 4rem "TGL", "Segoe UI", sans-serif;
	color : #00aeef;
}

h2{
	font : 3rem "TGL";
}

h3{
	font-weight : 100;
	color : #00aeef;
	font-family : "TGL", "Segoe UI", sans-serif;
	margin-top : 30px;
}

section a {
	color : #00aeef;
	font : 1.4rem "TGL", "Segoe UI", sans-serif;
}

hr{
	background-color : white;
	height : 1px;
}

/***** Header - Barre de navigation *****/
#general-header {
	position : sticky;
	top : 0;
	z-index : 3;
}

.navbar-brand {
	height : 40px;
	width : auto;
	margin : -5px;
}

@media screen and (min-width: 768px) {
	.navbar-brand {
		height : 60px;
		width : auto;
	}
}

.nav-link{
	color : white;
	transition : color 1s;
}

.nav-item a.active{
	text-decoration : underline;
	text-underline-offset : 6px;
}

.nav-link:hover, .nav-link span:hover{
	color : #00aeef;
	transition : color 1s;
}

.dropdown-menu{
	background-color: #262626;
	margin-top : -5px;
}

.dropdown-item, .dropdown-item span{
	color : white;
}

.dropdown-item.active, .dropdown-item span.active {
	background-color: transparent;
}

.dropdown-item span:hover {
	color: #16181b;
}

.switch-lang {
	padding : 10px 0 10px 10px;
}


/***** Footer *****/
.general-footer ul{
	list-style-type : none;
}

.general-footer li a {
	color : white;
	opacity : 0.7;
	transition : opacity 0.5s;
}

.general-footer a:hover{
	opacity : 1;
	transition : opacity 0.5s;
	text-decoration : none;
}

.fa{
	margin-right : 5px;
}

/***** Boutons *****/
.btn-primary {
	border-color : #056DA2;
	border-width : 2px;
	background-color : transparent;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	border-color : #00aeef;
	background-color : #00aeef;
}

/***** Partie Accueil *****/
#home{
	height : 90vh;
	text-align : center;
	background : center url("../img/fond_accueil.jpg");
	background-size : cover;
	padding : 5%;
}

@media screen and (max-width: 355px) {
	#home{
		display : none;
	}
}

#home h1{
	color : white;
	margin-top : 0;
}

#home hr{
	width : 20%;
	margin : auto;
	margin-bottom: 20px;
}

#texte-accueil{
	display : inline-block;
	background-color: rgba(43,43,42,0.9);
	padding : 20px;
	margin : 25vh auto 0 auto;
	position : relative;
	border : 1px solid white;
	outline : 3px solid white;
	outline-offset : 10px;
	transition : background-color 2s;
}

#texte-accueil:hover{
	background-color: rgba(0,119,179,0.8);
	transition : background-color 2s;
}

/***** Partie à propos *****/
#about-me #presentation{
	text-align : justify;
	padding : 50px;
}

#about-me #presentation ul{
	padding-left : 30px;
}

#about-me #presentation ul li{
	padding-bottom : 5px;
}

#about-me #photo{
	background : url("../img/photo.jpg") center;
	background-size: cover;
	min-height : 500px;
}


/***** Partie Réalisations *****/
#works {
	position : relative;
}

/*Détails*/
#details article{
	display : none;
	margin : 20px 20px 60px 20px;
	border : 1px solid white;
	outline : 3px solid white;
	outline-offset : 10px;
	padding : 20px;
}

#details article h2{
	text-align : center;
}

#details article.show{
	display : block;
}

section span {
	font : 1.4rem "TGL", "Segoe UI", sans-serif;
	color : #056DA2;
}

#details article a:hover {
	text-decoration : none;
	color : white;
}

#details ul {
	list-style-type: none;
}

#details li {
	display : inline-block;
	margin-right : 30px;
	vertical-align : middle;
}

#details li p {
	display : inline-block;
	margin : 0;
	vertical-align : middle;
}

#details li img {
	display : inline-block;
	margin-right : 5px;
	width : auto;
}

#details img.img-fluid{
	width : 100%;
	height : auto;
	margin-bottom : 20px;
}

#details .btn-primary{
	margin-right : 10px;
	font-size : 1.2rem;
	min-width : 200px;
}

/*Filtres*/
section#works .portfolio-filter {
	text-transform: uppercase;
}

section#works .portfolio-filter a {
	text-decoration: none;
	color: white;
	padding: 0 15px;
}

section#works .portfolio-filter a.active {
	color: #00aeef;
}

.grid-item {
	padding: 2px;
	position: relative;
	overflow: hidden;
}

.grid-item img {
	width : 100%;
	height : auto;
}

/* Masque */
.grid-item .hover-mask {
	color: #fff;
	margin: 2px;
	text-align: center;
	background: #000000;
	visibility : hidden;
	position : absolute;
	padding : 5%;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	opacity : 0.75;
}

.grid-item:hover .hover-mask {
	visibility : visible;
	transition : visibility 1s; /*Empêche un bug du masque*/
}

/* Translation et opacité des textes du hover mask et transition */
.grid-item .hover-mask .project-title {
	margin: 25% 0 0 0;
	transform : translateY(100px);
	opacity : 0;
	transition : transform 1s, opacity 1s;
}
.grid-item:hover .hover-mask .project-title {
	transform : translateY(0px);
	opacity : 1;
	transition : transform 1s, opacity 1s;
}
.grid-item .hover-mask p {
	margin: 10px 0 0;
	transform : translateY(100px);
	opacity : 0;
	transition : transform 1s, opacity 1s;
}
.grid-item:hover .hover-mask p {
	transform : translateY(0px);
	opacity : 1;
	transition : transform 1s, opacity 1s;
	transition-delay : 0.5s;
}


/***** Formulaire de contact *****/
section#contact table{
	margin : auto;
	table-layout: fixed;
	border-collapse: collapse;
}

section#contact td:nth-child(odd) {
	width : 30%;
	padding : 8px 10px 10px 10px;
}

section#contact td:nth-child(even) {
	padding : 5px 10px 10px 0;
}

section#contact input,section#contact textarea{
	color: black;
	width : 100%;
	padding : 0 3px;
}