@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: "Pacifico";
  src: url("../font/Pacifico.ttf");
}
@font-face {
  font-family: "Quicksand-Regular";
  src: url("../font/Quicksand-Regular.ttf");
}
@font-face {
  font-family: "Quicksand-Light";
  font-style: light;
  src: url("../font/Quicksand-Light.ttf");
}
@font-face {
  font-family: "Quicksand-Bold";
  font-weight: bold;
  src: url("../font/Quicksand-Bold.ttf");
}

body{
margin: 0;
  font-family: "Quicksand-Regular";
}

a{
	text-decoration: none;
}

#menuhome{
	position: absolute;
	width: 778px;
	height:  472px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
/*    border: solid 1px black;*/
}

#btn-logo{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -55%);
}

#illustration{
	position: absolute;
	left: 220px;
	top:50px;
	text-align: right;
}

#illustration a{
	color: rgb(211, 12, 102);
}

#identite{
	position: absolute;
	left: 500px;
	top:100px;
	text-align: right;
}

#identite a{
	color: #3fab6e;
}

#digital {
	position: absolute;
	left: 150px;
	top:250px;
	width: 85px;
	text-align: left;
}

#digital a{
	color: #6d8dbf;
}

#digital img{
	position: absolute;
	right:  0px;
}

#graphisme {
	position: absolute;
	left: 500px;
	top:300px;
	text-align: right;
}

#graphisme a{
	color: #e9590c;
}

#contact {
	position: absolute;
	left: 350px;
	top:365px;
	text-align: left;
	width: 110px;
}

#contact a{
	color: #a48a7b;
}

#contact img{
	position: absolute;
	right:  0px;
}

.divmenu {
 /*   border: solid 1px black;*/
	width: 130px;
}

img{
	padding-top: 10px;
}

@media (max-width: 778px){
	
	#menuhome{
		position:relative;
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
		transform: translate(0%, 0%);
	}

	#btn-logo{
		position: relative;
		left: 20px;
		top: 10px;
		transform: translate(0%, 0%);
	}
	
	#illustration{
		position: relative;
        padding-top: 40px;
		left: 0px;
		top:0px;
		width: 100%;
		text-align: left;
	}
	
	#illustration img{
		position: absolute;
		right: 15%;
		left: auto;
		top:25px;
	}

	#identite{
		position: relative;
		left: 0px;
		top:0px;
		width: 100%;
		text-align: left;
	}


	#identite img{
		position: absolute;
		right: 15%;
		left: auto;
		top:0px;
	}

	#digital {
		position: relative;
		left: 0px;
		top:0px;
		width: 100%;
		text-align: left;
	}
	
	#digital img{
		position: absolute;
		right: 15%;
		left: auto;
		top:0px;
	}

	#graphisme {
		position: relative;
		left: 0px;
		top:0px;
		width: 100%;
		text-align: left;
	}

	#graphisme img {
		position: absolute;
		right: 15%;
		left: auto;
		top:0px;
	}

	#contact {
		position: relative;
		left: 0px;
		top:0px;
		width: 100%;
		text-align: left;
	}
	
	#contact img{
		position: absolute;
		right: 15%;
		left: auto;
		top:0px;
	}
	
	img{
		padding-top: 0px;
	}
	
	.divmenu{
		padding: 20px;
	}
	
}