/*Export des polices*/
@font-face {
  font-family: "Jeffriana JF";
  src: url("../fonts/Jeffriana_JF.ttf");
}

@font-face {
  font-family: "Comic Pro";
  src: url("../fonts/Laffayette_Comic_Pro.ttf");
}
/**/

::selection
{
	background-color: rgba(0,0,0,0);
}

body,html
{
	margin: 0;}

h1
{
	width: 100%;
	min-width: 900px;
	text-align: center;
	font-size: 80px;
	margin-top: 0;
}


#navigation_menu
{
	background: /*linear-gradient(#e6646512, #dddcf2)*/ linear-gradient(#9e9e9e7d 50%, #ffffff);
	background-repeat: no-repeat;
	height: 100%;
}
#picture_container
{
	width: 100%;
	padding-top: 42px;
}
#navigation_picture
{
	width: 900px;
	height: 500px;
	margin: 0 auto;
	background-image: url(../pics/logo.png);
	background-repeat: no-repeat;
	background-position: top 50px center;
}
#logo
{
	margin-left: 150px;
	width: 500px;
	padding-top: 50px;
	background-image: url(../pics/logo.png);
}

.navigation_text
{
	position: relative;
	width: max-content;
}

.navigation_text a
{

	margin: 0;
	padding: 10px;
	text-align: center;
	z-index: 10;
	font-family: Jeffriana JF;
	font-size: 45px;
	cursor: pointer;
	transition-property: color;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.a-noStyle
{
	text-decoration: none;
	color: #000;
}

/*Position des boutons sur la photo, tailles différentes, couleur au survol*/
#button_peinture 
{
	top: 182px;
	left: 50px;
}
#button_peinture a
{
	text-decoration: underline;
	text-decoration-color: rgba(252,197,80,0.5);
}
#button_peinture a:hover
{
	color: rgb(252,197,80);
}
/*##################################*/
#button_decoration_interieure 
{
	top: 12px;
	left: 8px;
}
#button_decoration_interieure a
{
	font-size: 36px;
	text-decoration: underline;
	text-decoration-color: rgba(251,164,87,0.5);
}
#button_decoration_interieure a:hover
{
	color: rgb(251,164,87);
}
/*##################################*/
#button_bandes_placo 
{
	top: 100px;
	left: 694px;
}
#button_bandes_placo a
{
	text-decoration: underline;
	text-decoration-color: rgba(55,159,220,0.5);
}
#button_bandes_placo a:hover
{
	color: rgb(55,159,220);
}
/*##################################*/
#button_vitrerie 
{
	top: 117px;
	left: 40px;
}
#button_vitrerie  a
{
	text-decoration: underline;
	text-decoration-color: rgba(120,188,79,0.5);
}
#button_vitrerie  a:hover
{
	color: rgb(120,188,79);
}
/*##################################*/
#button_revetement 
{
	bottom: 358px;
	left: 270px;
}
#button_revetement a
{
	text-decoration: underline;
	text-decoration-color: rgba(219,105,94,0.5);
}
#button_revetement a:hover
{
	color: rgb(219,105,94);
}
/*##################################*/
#button_cloison 
{
	bottom: 265px;
	left: 678px;
}
#button_cloison a
{
	text-decoration: underline;
	text-decoration-color: rgba(148, 93, 180, 0.5);
}
#button_cloison a:hover
{
	color: rgb(148, 93, 180);
}
/*##################################*/
#button_isolation 
{
	bottom: 440px;
	left: 646px;
}
#button_isolation a
{
	text-decoration: underline;
	text-decoration-color: rgba(202, 85, 151,0.5);
}
#button_isolation a:hover
{
	color: rgb(202, 85, 151);
}
/*##################################*/
#button_ravalement 
{
	bottom: 313px;
	left: 26px;
}
#button_ravalement a
{
	text-decoration: underline;
	text-decoration-color: rgba(245, 220, 0, 0.5);
}
#button_ravalement a:hover
{
	color: rgb(245, 220, 0);
}
/*##################################*/
#button_petite_menuiserie 
{
	bottom: 324px;
	left: 702px;
}
#button_petite_menuiserie a
{
	font-size: 38px;
	text-decoration: underline;
	text-decoration-color: rgba(41,155,255,0.5);
}
#button_petite_menuiserie a:hover
{
	color: rgb(41,155,255);
}
/**/

#title_word1
{
	font-family: Jeffriana JF;
	color: #0075ab;
}

#title_word2
{
	font-family: Comic Pro;
	color: #ff475a;
}
/*Petits écrans###################################################*/
#small-screen_menu
{
	display: none;
	background: linear-gradient(#b6b6b67d 50px, #ffffff);
}

#small-screen_picture
{
	width: 60%;
	margin-left: 20%;
	margin-top: 20px;
}

#small-screen_title
{
	text-align: center;
	width: 100%;
	font-size: 40px;
	margin-top: 15px;
}

#card_menu
{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row !important;
	padding-bottom: 40px;
	align-items: stretch;
}
#card_menu a
{
	margin: 20px 20px;
}

.presentation_card
{
	width: fit-content;
	padding: 20px 20px;
	min-width: 250px;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 11px 0px;
	transition-property: box-shadow;
	transition-duration: 0.5s;
}
.presentation_card p
{
	font-family: Jeffriana JF;
	text-align: center;
	color: #0075ab;
	font-size: 30px;
	margin: 0;
}

.presentation_card:hover
{
	box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 11px 6px;
}

#peinture_card
{
	border-bottom: 5px solid rgba(252,197,80,0.5);
}
#ravalement_card
{
	border-bottom: 5px solid rgba(245, 220, 0, 0.5);
}
#vitrerie_card
{
	border-bottom: 5px solid rgba(120,188,79,0.5);
}
#deco_interieure_card
{
	border-bottom: 5px solid rgba(251,164,87,0.5);
}
#revetement_card
{
	border-bottom: 5px solid rgba(219,105,94,0.5);
}
#isolation_card
{
	border-bottom: 5px solid rgba(202, 85, 151,0.5);
}
#cloisons_card
{
	border-bottom: 5px solid rgba(148, 93, 180, 0.5);
}
#bandes_placo_card
{
	border-bottom: 5px solid rgba(55,159,220,0.5);
}
#petite_menuiserie_card
{
	border-bottom: 5px solid rgba(41,155,255,0.5);
}

/*CSS footer*/
	footer
	{
		width: 100%;
		height: auto;
		background-color: #e9e9e9;
	}
	footer p
	{
		color: black;
		font-size: 15px;
		font-family: sans-serif;
		letter-spacing: 1px;
	}

	#facebook_link a
	{
		filter: grayscale(1);
		 transition: filter; 
		 transition-duration: 0.4s;
	}

	#facebook_link a:hover
	{
		filter: grayscale(0);
	}


/*RESPONSIVE###############################################################################*/
@media all and (max-device-width: 950px)
{
	#navigation_menu
	{
		display: none;
	}
	#small-screen_menu
	{
		display: block;
	}
	#small-screen_title
	{
		font-size: 100px;
	}
	.presentation_card p
	{
		width: 50vw;
		font-size: 6vw;
	}
}

@media all and (max-width: 950px)
{
	#navigation_menu
	{
		display: none;
	}
	#small-screen_menu
	{
		display: block;
	}
}