body{
	margin: 0;
	font-family: 'Fredoka One', cursive;
	position: absolute;
}

#menu{
	background-color: #333333;
	color: #fff;
	display: flex;
    justify-content: space-between;
    height: 50px;
    position: fixed;
    top:0;
    z-index: 99999;
    min-width: 400px;
    right: 0;
    left: 0;
}

li#burger i{
	display: none;
	padding-right: 15px;
	cursor: pointer;
}

#logo{
	padding-left: 20px;
	padding-top: 0px;
	font-size: 32px;
}

#logo a{
	text-decoration: none;
	color:#fff;
}

#logo a span::first-letter{
	color:#920909;
}



ul#nav {
	position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 999999;
  
}

ul#nav li {
  float: left;
}

ul#nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

ul#nav li a:not(.active):hover {
  color: #ad3400;
}

ul#nav li a.active {
  color: #ad0000;
}



@media screen and (max-width: 720px) {
  	li#burger i{
  		display: block;
  		font-size: 47px;
  	}

  	ul#nav{
  		position: absolute;
  		right: 0;
  		background-color: #333333;
  		font-size: 20px;
  	}

  	ul#nav li {
 		float: none;
	}

	ul#nav li:not(#burger){
		display: none;
	}

	ul#nav:hover li:not(#burger), ul#nav:active li:not(#burger){
		display: list-item;
	}
}


#acceuil{
	position: relative;
	margin-top: 50px;
	background-color: #000;
	height: calc(100vh - 50px);
	text-align: center;
	width: 100%;

	background-image: url("/image/header.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	filter: grayscale(70%);
	height: 100vh;
	z-index: -1000;
}

#acceuilTexte{
	position: relative;
    top: 45%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 3em;

}

#acceuilTexte h1{
	margin: 0;
}

#realisations{
	position: relative;
	width: 100%;
	height: auto;
}

.real{
	position: relative;
	display:inline-block;
	width: 25%;
	height:500px;
	margin: 0;
	filter: grayscale(100%);
	background-repeat: no-repeat;
	background-position: center; 
	background-size: cover;
	min-width: 305px;
}

@media screen and (max-width: 1250px) {
  	.real{ 
    	width: 33.3%;
  	}

	.real:nth-child(2), .real:nth-child(1) {
		width: 50%;
	}
}

@media screen and (max-width: 950px) {
  	.real{ 
    	width: 50%;
  	}
}


@media screen and (max-width: 620px) {
  	.real{ 
    	width: 100%;
  	}

  	.real:nth-child(2), .real:nth-child(1) {
		width: 100%;
	}
}





.real:hover{
	filter: grayscale(0%);
}


.reaTitre{
	text-align: center;
	position: relative;
	text-shadow: 2px 2px 1px black;
    color: #fff;
    font-size: 2em; 
    top: 50%;
    transform: translateY(-50%);

    transition: top 1s;
}

.description{
	position: absolute;
	bottom : 10%;
	width: 70%;
	left: 15%;
	padding: 20px;
	background-color: #fff;
	font-weight: lighter;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
	visibility: hidden;
	opacity: 0; 
	border: 1px solid #C0C0BE;
	border-radius: 10px;
	box-shadow: 1px 1px 1px black;

	transition: visibility 0s, opacity 1s ;
}

.real:hover .reaTitre{
	text-shadow: 3px 3px 2px black;
	top:10%;

	transition: all 1s;
}

.real:hover .description{
	visibility: visible;
	opacity: 1;

	transition: all 1s;
}

.deco{
	color:#920909;
}

#competences{
	position: relative;
	background-color: #000;
	text-align: center;
	color:#fff;
	padding-top: 50px;
	padding-bottom: 150px;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#competences-boxcontainer{
	position: relative;
	margin: auto;
    margin-top: 80px;
    width: 75%;
    padding: 5px;

    background: linear-gradient(270deg, #f00606, #f0d606, #00f735, #001bf7);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
  
}

#competences-container{
	position: relative;
    padding: 15px;
    width: 100%;
    height:100%;
    box-sizing: border-box;
    background-color: black;
}

#competences-container img{
	height: 80px;
	padding: 30px;
}

#contact{
	position: relative;
	background-color: #000;
	text-align: center;
	color:#fff;
	padding-top: 50px;
	padding-bottom: 150px;
	background-image: url("/image/fond_competence.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	min-height: 100vh;
}

#contact h1{
	text-shadow: 2px 2px 1px black;
}

#contact-container{
	position: relative;
	margin: auto;
    width: 75%;
    padding-top: 50px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 60px;
    background-color: #e6e6e6;
    border-radius: 10px;
    max-width: 1100px;
    min-width: 440px;

}

#nom-container, #contact_-container{
	width: 50%;
}

#endForm{
	display: flex;
    justify-content: space-between;
}

.g-recaptcha{
	position: relative;
	width: 305px;
}

#contact form button{
	position: relative;
}

.input-field > label{
	color: #000;
	font-weight: 200px;
}

#scrollTop{
	position: fixed;
	bottom:30px;
	right: 30px;
	display: none;
	cursor: pointer;
}


/**** Fixe bug materialise ***/
*, ::before, ::after {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

::placeholder{
	color: #000;
}