*{
  box-sizing: border-box;
}


@font-face{
	font-family: "baskervvol";
	src: url('fonts/BBBBaskervvol-Base.otf');
	font-weight: normal;
	font-style: normal;
	}

body { 
	font-family:'baskervvol';
	background-color: blue;
}




@keyframes pincemi {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


.raleway {
	font-family: 'baskervvol';
}


.paragraph {
	font-family: 'baskervvol';
}




.container  {
max-width: auto;
margin-right: auto;
margin-left: auto;
}



.topnav{
	margin-left: 0px;
	margin-right: 0px;
	display: none;
	float: right;
	
}

.topnav.show {
	display: block;
}


.topnav a{
	padding: 15px;
	display: block;
	text-decoration: none;
	color: black;
}

.current {
	background: yellow;
	width: 485px;
	height: 10px;

}

.current2 {
	background: #f6f2e6;
	width: 250px;
	height: 10px;

}


.topnav:hover, 

.topnav.active {

}


.hero {
background-color: blue;
background-position: center 100%;
padding-top: 50px;
color: black;
}

#picture {
float:left;
width: 270px;
padding-top: 10px;
vertical-align:middle;
}

.p1 {
	line-height: normal;
	text-align: justify;
	margin-right: 200px;
	margin-top : 40px;
}
	
.p2 {
	line-height: normal;
	text-align: justify;
	padding-top: 90px;
}


.opacity1 div img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.opacity1 div:hover img {
	opacity: .5;
}

  .grid {
  display : grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: max-height(300px) repeat(2, 150px);

}

.element {
  margin: 10px;
  padding : 10px;
  align-self: center;
}

	

	/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Image originale */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}
/* Texte original */
.overlay-image .text {
 color: #fff;
 font-family:'baskervvol';
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

/********* Hover image et texte *******/
/* Overlay */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
opacity: 1;
}

.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}




h2 {
	color: #d6cdb6;
}


@media only screen and (min-width: 320px) and (max-width: 991px)

{



	.overlay-image .hover {
position: none;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}

.overlay-image:hover .hover {
display: none;
}

.overlay-image .text {
 display: none;
}

}






@media (min-width: 992px) {

	body{
		font-family : 'baskervvol';
		width: auto;
		margin: 0;
		padding: 0;

}

.topnav{
display: block;
}

.topnav a{
	display: inline-block;
}




.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}


.hoverflashbis:hover {
	-webkit-animation-name: pulse;
	animation-name: pulse;
}

.opacity1 div img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.opacity1 div:hover img {
	opacity: .5;
}

.toggleNav {
	position: absolute;
	right : 5px;
	top: 0;
	background: blue;
	color : blue;
	padding: 10px;
	transform: rotate(90deg);
	cursor: pointer;
}

.logo {
	position:fixed;
	top:0px;
	left:0px;
}


.nom {
	position:fixed;
	top:+250px;
	left:0px;"
}