body
{
	margin:0;
	font-family	  : 'Open Sans', sans-serif;
}

.navbar {
	overflow         : hidden;
	background-color : #3F3F3F;
	position         : fixed;
	top              : 0;
	width            : 100%;
}

.navbar a
{
	float            : right;
	display          : block;
	color            : white;
	text-align       : center;
	padding          : 25px 16px;
	text-decoration  : none;
	font-size        : 17px;
}
.navbar p
{
	color            : white;
	float            : left;
}

.navbar a:hover
{
	background       : #ddd;
	color            : #3F3F3F;
}

.bloc1
{
	padding                 : 50px;
/*	height                  : 700px;*/
	background-color        : gray;
	color                   : white;
	text-align              : center;
	background-image        : url('../images/Bkg.jpg');
	width                   : 100%;
	box-sizing              : border-box;
	background-position     : center;
    -webkit-background-size : cover;
}

.bloc1 h1
{
	font-size               : 70px;
}

.bloc1 h2
{
	position                : relative;
	text-align              : center;
	color                   : #3dedd5;
	margin                  : 0px 50px 0px 0px;
}

.blabla1
{
	background-color        : #3F3F3F;
	text-align              : center;
	color                   : white;
}

.blabla1 h1
{
	font-size               : 30px;
}

.blabla1 p
{
	font-size               : 25px;
}

.blabla2
{
	display                 : grid;
	grid-template-columns   : 50% 50%;
	grid-gap                : 10px;
	grid-template-areas     : "photo info";
	margin-bottom           : 30px;
}

.bb2photo
{
	grid-area               : photo;
	background              : white;

}

.bb2photo img
{
	object-fit              : cover;
	width                   : 70%;
	display                 : block;	
	margin-left             : auto;
	margin-bottom           : 10px.
}

.bb2info
{
  grid-area                 : info;
  background                : white;
  text-align                : left;
  margin-left               : 50px;
}

.bb2info h1
{
	font-size               : 30px;
	color                   : black;
}

.bb2info p
{
	font-size               : 25px;
	color                   : gray;
}


.blabla3
{
	display                 : grid;
	grid-template-columns   : 50% 50%;
	grid-gap                : 10px;
	grid-template-areas     : "info photo";
	background-color        : #222222;
	min-height              : 400px;
}

.bb3photo
{
  grid-area                 : photo;
  background                : #222222;
}

.bb3photo img
{
  object-fit                : cover;
  width                     : 95%;
  position                  : relative;
  top                       : 50%;
  transform                 : translateY(-50%);	
}
.bb3info
{
  grid-area                 : info;
  background                : #222222;
  text-align                : left;
  margin-left               : 30%;
  margin-right              : 20px;
}

.bb3info h1
{
	font-size               : 30px;
	color                   : white;
}

.bb3info p
{
	font-size               : 20px;
	color                   : white;
}

.mentionslegales
{
	display                 : grid;
	grid-template-columns   : 65% 35%;
	grid-gap                : 10px;
	grid-template-areas     : "info photo";
	background-color        : white;
	min-height              : 400px;	
}
.mentionslegales h1
{
	font-size               : 30px;
	color                   : black;
}

.mentionslegales p
{
	font-size               : 20px;
	color                   : black;
}


button
{
	display                 : inline-block;
	background-color        : #808080;
	border-radius           : 200px;
	border                  : 2px solid #91BF33;
	color                   : white;
	text-align              : center;
	font-size               : 18px;
	padding                 : 15px 30px;
	width                   : 250px;
    -webkit-transition      : all 0.5s;
    -moz-transition         : all 0.5s;
    -o-transition           : all 0.5s;
    transition              : all 0.5s;
    cursor                  : pointer;
    margin                  : 5px;


}

button:hover
{
    background-color        : yellowgreen;
}

@media(width < 768px)
{
	button
	{
		border-radius       : 100px;
		font-size           : 13px;
		width               : 180px;
	}
	
	.navbar a
	{
	padding                 : 20px 10px;
	font-size               : 15px;
	}
	
	.bloc1
	{
	background-image        : url('../images/Bkg_500.jpg');
	}
	
	.bloc1 h1
	{
		font-size           : 25px;
		margin-top          : 50px;
	}

	.bloc1 h2
	{
		font-size           : 15px;
	}
	
	.blabla1 h1
	{
		font-size           : 25px;
	}

	.blabla1 p
	{
		font-size           : 15px;
	}
	
	.bb2info h1
	{
		font-size           : 25px;
	}

	.bb2info p
	{
		font-size           : 15px;
		margin-right        : 50px;
	}
	
	.bb3info h1
	{
		font-size           : 25px;
	}

	.bb3info p
	{
		font-size           : 15px;
	}
	
	.mentionslegales h1
	{
		font-size           : 25px;
	}

	.mentionslegales p
	{
		font-size           : 15px;
	}
}


@media(width < 390px)
{
	button
	{
		border-radius       : 100px;
		font-size           : 13px;
		width               : 180px;
	}
	
	.navbar a
	{
		padding             : 20px 10px;
		font-size           : 12px;
	}
	
	.bloc1
	{
		background-image    : url('../images/Bkg.jpg');
		background-size     : cover;
	}
	
	.bloc1 h1
	{
		font-size           : 25px;
		margin-top          : 50px;
	}

	.bloc1 h2
	{
		font-size           : 15px;
	}
	
	.blabla1 h1
	{
		font-size           : 25px;
	}

	.blabla1 p
	{
		font-size           : 15px;
		margin-left         : 15px;
		margin-right        : 15px;
	}
	
	.blabla2
	{
		display             : inline;
		margin-bottom       : 10px;
	}

	.bb2photo img
	{
		display             : block;
		margin-left         : auto;
		margin-right        : auto;
		width               : 50%;
	}
	
	.bb2info h1
	{
		font-size           : 25px;
	}

	.bb2info p
	{
		font-size           : 15px;
		margin-right        : 50px;
	}
	
	.blabla3
	{
		display             : inline;
		margin-bottom       : 10px;
	}
	
	.bb3info h1
	{
		font-size           : 25px;
		margin-left         : 10px;
	}

	.bb3info p
	{
		font-size           : 15px;
		margin-left         : 10px;
		margin-right        : 10px;
	}
	.bb3photo img
	{
		display             : block;
		margin-left         : auto;
		margin-right        : auto;
		width               : 50%;
	}
	
	.mentionslegales h1
	{
		font-size           : 25px;
	}

	.mentionslegales p
	{
		font-size           : 15px;
	}
}