/*DEFINITION PREMIERE BANNER*/



@keyframes HUGE {
	from {
	  font-size: 120px;
	}
  
	to {
	  font-size: 60px;
	}
  }


  p{
	  /*font-size: 20px;*/
  }


.main-container {
	width: 100%;	
	 position: relative;
	 z-index: 3001;
	 /*padding-top: 25px;*/
}



.parallaxe-img-1
{
    margin : 0 0 0 0px;
	max-width: 100%;
    /*height: 80%;*/
	width: 100%; /* ie8 */

	text-align: center;
	vertical-align: middle;

	background-image: linear-gradient(to top,transparent, 80%, rgb(255, 255, 255)), linear-gradient( transparent, 80%, rgb(255, 255, 255)),
	url("././images/fond_massage_C.jpg");

	
	/* Set a specific height */
	height: 75%;
  
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

    animation-duration: 3s;
	animation-name: slideupshrink;

}



@keyframes slideupshrink {
	from {
	  /*margin-top: 20%;*/
	  height: 100%
	}
  
	to {
	  /*margin-top: 0%;*/
	  height: 75%
	}
  }

.parallaxe-img-2
{
    margin : 0 0 0 0px;
	max-width: 100%;
    /*height: 80%;*/
	width: 100%; /* ie8 */

	text-align: center;
	background-image: linear-gradient(to top,transparent, 80%, rgb(255, 255, 255)), linear-gradient( transparent, 80%, rgb(255, 255, 255)),
	url("./images/fond_massage_D.jpg");

	
	/* Set a specific height */
	height: 70%;
  
	box-shadow: 1px 1px 12px inset #555;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}

.parallaxe-img-3
{
    margin : 0 0 0 0px;
	max-width: 100%;
    /*height: 80%;*/
	width: 100%; /* ie8 */

	text-align: center;
	background-image: linear-gradient(to top,transparent, 80%, rgb(255, 255, 255)), linear-gradient( transparent, 80%, rgb(255, 255, 255)),
	url("./images/fond_massage_B.jpg");

	
	/* Set a specific height */
	height: 70%;

	box-shadow: 1px 1px 12px inset #555;
  
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}

/*DEFINITION 1ERE BANNIERE*/

.banner
{
	width: 100%;
	/*height: 25%;*/
	background-color: rgb(163, 148, 148);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/*grid-auto-rows: repeat(1, 1fr);*/
    box-shadow: 1px 1px 12px #333;
    
    /*animation-duration: 2s;
	animation-name: slideup;*/
}

#portait-container{
	grid-column: 1;
	  grid-row: 1;
	  margin: auto;
	/*padding: 40 0 80 80px;*/
}

#portait-img{
	height: 150px;
	width: 150px;
}



#text-container-acceuil {
	/*padding: 30px 30px 30px 30px;*/
	grid-column: 2 / 5;
  	grid-row: 1;
	 text-align: center;
	 font-family: "CormorantGaramond";
	 font-size: 26px;

	 
}

.text-type-mass
{
	font-size: 26px;
}

  .title-img{
	display: inline-block;
	margin-top: 275px;
	width: 90%;
    color: #000000;
    font-size: 60px;
	letter-spacing: 10px;
	padding: 10px;

	font-family: "AmaticSC";

	animation-duration: 2s;
	animation-name: HUGE;
}

#picto-rdv-container
{
	grid-column: 5;
	grid-row: 1;
	  /*padding: 40 0 0 0px;*/
	margin : auto;
	padding: 35px 0 0 0;
	display: grid;
	transition: all 1s;
}

#picto-rdv-container > span
{
	margin: auto;
	color: rgb(163, 148, 148);
	transition: all 1s;
	padding: 10px 0 0 0;
	font-size: 16pt;
}

#picto-rdv-container > a
{
	margin: auto;
}

#picto-rdv-img
{
	margin: auto;
	border-radius: 50px;
	background-color: white;
	box-shadow: 1px 1px 12px #333;	
	height: 140px;
	width: 140px;
	cursor: pointer;
	transition: all 0.5s;
}


#picto-rdv-img:hover
{
	height: 155px;
	width: 155px;
	transform: translateY(-20px);
}

#picto-rdv-container:hover > span
{
	color: white;
	transform: translateY(-20px);
}

#text-rdv-container
{
	grid-column: 5;
	grid-row: 1;
	text-align: center;
	padding: 70px 0 0 0;
	color: white;
	font-family: "LibreBaskerville";
}

@keyframes slideup {
	from {
	  margin-top: 20%;
	  
	}
  
	to {
	  margin-top: 0%;
	  
	}
  }



  .menu-container{
    animation-duration: 1s;
	animation-name: slidedown;
  }

  @keyframes slidedown {
	from {
	  margin-top: -20%;
	}
  
	to {
	  margin-top: 0%;
	}
  }

#text-container-A
{
	float : left;
    width: 25%;
	 position: absolute;
	 margin: 60 0 0 60px;
	 text-align: center;
}

#text-container-B
{
	float : left;
    width: 25%;
	 position: absolute;
	 margin: 60 0 0 200px;
	 text-align: center;
}


/*DEFINITION 2EME BANNIERE*/

.banner-B
{
	width: 100%;
	/*height: 25%;*/
	background-color: rgb(163, 148, 148);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(25%, auto);
	box-shadow: 1px 1px 12px #333;
}

@media screen and (max-device-width : 640px) { 

	h2{
		text-align: center;
	}

	h3{
		text-align: center;
	}

	p{
		text-align: center;
	}

	.banner-B { 
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows:  minmax(13%, auto);
	} 

	#banner-B-picto-container-1
	{
		grid-column: 1;
		grid-row: 1;
		margin: auto;
	}

	#banner-B-text-container-1
	{
		grid-column: 1;
		grid-row: 2;
		text-align: left;
		padding: 0 0 0 0px;
	}

	#banner-B-picto-container-2
	{
		grid-column: 1;
		grid-row: 3;
		margin: auto;
	}
	#banner-B-text-container-2
	{
		grid-column: 1;
		grid-row: 4;
		text-align: left;
		padding: 0 0 0 0px;
	}

	#banner-B-picto-container-3
	{
		grid-column: 1;
		grid-row: 5;
		margin: auto;
	}

	#banner-B-text-container-3
	{
		grid-column: 1;
		grid-row: 6;
		text-align: left;
		padding: 0 0 0 0px;
	}

	.banner-C
	{
		width: 100%;
		/*height: 25%;*/
		background-color: rgb(163, 148, 148);
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr , 1fr, 1fr, 1fr, 1fr, 1fr;
		box-shadow: 1px 1px 12px  #333;
	}

	.banner-C-picto
	{
		border-style: solid;
		border-radius: 50px;
		background-color: transparent;
		height: 125px;
		width: 125px;
		box-shadow: 1px 1px 12px #333;
		border-width: 0px;
	}

	#banner-C-picto-container-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}

	#banner-C-text-container-1
	{
		grid-column: 1;
		grid-row: 2;
		text-align: left;
		/*margin: auto;*/
		padding: 15px;
		padding-top : 0px;
		font-size: 16pt;
	}

	#banner-C-picto-container-2
	{
		grid-column: 1;
		grid-row: 3;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}
	#banner-C-text-container-2
	{
		grid-column: 1;
		grid-row: 4;
		text-align: left;
		/*margin: auto;*/
		padding: 25px;
		padding-top : 0px;
		font-size: 16pt;
	}

	#banner-C-picto-container-3
	{
		grid-column: 1;
		grid-row: 5;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}

	#banner-C-text-container-3
	{
		grid-column: 1;
		grid-row: 6;
		text-align: left;
		/*margin: auto;*/
		padding: 25px;
		padding-top : 0px;
		font-size: 16pt;
	}

  } 

  @media screen and (min-device-width : 640px) and (max-device-width : 1280px) { 

	h2{
		text-align: center;
	}

	h3{
		text-align: center;
	}

	p{
		text-align: center;
	}

	.banner-B-picto{
		height: 140px;
		width: 140px;
		margin: 15px;
	}
	.banner-B { 
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows:  repeat(3, 1fr);
	} 

	#banner-B-picto-container-1
	{
		grid-column: 1;
		grid-row: 1;
		margin: auto;
	}

	#banner-B-text-container-1
	{
		grid-column: 1;
		grid-row: 2;
		text-align: left;
		padding: 0 0 0 0px;
	}

	#banner-B-picto-container-2
	{
		grid-column: 2;
		grid-row: 1;
		margin: auto;
	}
	#banner-B-text-container-2
	{
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		padding: 0 0 0 0px;
	}

	#banner-B-picto-container-3
	{
		grid-column: 3;
		grid-row: 1;
		margin: auto;
	}

	#banner-B-text-container-3
	{
		grid-column: 3;
		grid-row: 2;
		text-align: left;
		padding: 0 0 0 0px;
	}

	.banner-C
	{
		width: 100%;
		/*height: 25%;*/
		background-color: rgb(163, 148, 148);
		display: grid;
		grid-template-columns: 1fr, 1fr, 1fr;
		grid-auto-rows: 150px, 200px;
		box-shadow: 1px 1px 12px  #333;
	}

	.banner-C-picto
	{
		border-style: solid;
		border-radius: 50px;
		background-color: transparent;
		height: 125px;
		width: 125px;
		box-shadow: 1px 1px 12px #333;
		border-width: 0px;
	}

	#banner-C-picto-container-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}

	#banner-C-text-container-1
	{
		grid-column: 1;
		grid-row: 2;
		text-align: left;
		/*margin: auto;*/
		padding: 15px;
		padding-top : 0px;
		font-size: 16pt;
	}

	#banner-C-picto-container-2
	{
		grid-column: 2;
		grid-row: 1;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}
	#banner-C-text-container-2
	{
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		/*margin: auto;*/
		padding: 25px;
		padding-top : 0px;
		font-size: 16pt;
	}

	#banner-C-picto-container-3
	{
		grid-column: 3;
		grid-row: 1;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}

	#banner-C-text-container-3
	{
		grid-column: 3;
		grid-row: 2;
		text-align: left;
		/*margin: auto;*/
		padding: 25px;
		padding-top : 0px;
		font-size: 16pt;
	}

  }

  @media screen and (min-device-width : 1280px) { 
	.banner-B { 
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows:  minmax(25%, auto);
	} 

	#banner-B-picto-container-1
	{
		grid-column: 1;
		grid-row: 1;
		margin: auto;
	}

	#banner-B-text-container-1
	{
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		padding: 0 0 0 0px;
	}

	#banner-B-picto-container-2
	{
		grid-column: 3;
		grid-row: 1;
		margin: auto;
	}
	#banner-B-text-container-2
	{
		grid-column: 4;
		grid-row: 1;
		text-align: left;
		padding: 0 0 0 0px;
	}

	#banner-B-picto-container-3
	{
		grid-column: 5;
		grid-row: 1;
		margin: auto;
	}

	#banner-B-text-container-3
	{
		grid-column: 6;
		grid-row: 1;
		text-align: left;
		padding: 0 0 0 0px;
	}


	.banner-C
	{
		width: 100%;
		/*height: 25%;*/
		background-color: rgb(163, 148, 148);
		display: grid;
		grid-template-columns: 1fr, 1.5fr, 1fr, 1.5fr, 1fr, 1.5fr;
		grid-auto-rows: minmax(200px, auto);
		box-shadow: 1px 1px 12px  #333;
	}

	.banner-C-picto
	{
		border-style: solid;
		border-radius: 50px;
		background-color: transparent;
		height: 125px;
		width: 125px;
		box-shadow: 1px 1px 12px #333;
		border-width: 0px;
	}

	#banner-C-picto-container-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}

	#banner-C-text-container-1
	{
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		margin: auto;
		padding: 15px;
		font-size: 16pt;
	}

	#banner-C-picto-container-2
	{
		grid-column: 3;
		grid-row: 1;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}
	#banner-C-text-container-2
	{
		grid-column: 4;
		grid-row: 1;
		text-align: left;
		margin: auto;
		padding: 25px;
		font-size: 16pt;
	}

	#banner-C-picto-container-3
	{
		grid-column: 5;
		grid-row: 1;
		text-align: justify;
		margin: auto;
		padding: 25px;
	}

	#banner-C-text-container-3
	{
		grid-column: 6;
		grid-row: 1;
		text-align: left;
		margin: auto;
		padding: 25px;
		font-size: 16pt;
	}
  } 


.banner-B-picto
{
	/*border-style: solid;*/
	border-radius: 50px;
	background-color: white;
	height: 190px;
	width: 190px;
	box-shadow: 1px 1px 12px #333;
	/*border-width: 2px;*/

	transition: all 0.5s;
}



.banner-B-picto:hover
{
	/*border-style: solid;*/
	box-shadow: none;
	opacity: 0.75;
}


.banner-B h2{
	font-size: 24pt;
}


/*DEFINITION 3EME BANNIERE*/



/*ANIMATION MENU */


#menu-item-2
{
	animation-duration: 1.25s;
	animation-name: slide-menu-item-2;
}

@keyframes slide-menu-item-2 {
	0% {
		  top: -200px;
		  /*transform: rotate(180deg)*/
	}
  
	100% {
		top: 0px;
		/*transform: rotate(0deg)*/
	}
  }

  #menu-item-3
{
	animation-duration: 1.5s;
	animation-name: slide-menu-item-3;
}

@keyframes slide-menu-item-3 {
	0% {
		top: -200px;
		/*transform: rotate(180deg)*/
	}
  
	100% {
		top: 0px;
		/*transform: rotate(0deg)*/
	}
  }

  #menu-item-4
{
	animation-duration: 1.75s;
	animation-name: slide-menu-item-4;
}

@keyframes slide-menu-item-4 {
	0% {
		top: -200px;
		/*transform: rotate(180deg)*/
	}
  
	100% {
		top: 0px;
		/*transform: rotate(0deg)*/
	}
  }

  #menu-item-5
{
	animation-duration: 2s;
	animation-name: slide-menu-item-5;
}

@keyframes slide-menu-item-5 {
	0% {
		top: -200px;
		/*transform: rotate(180deg)*/
	}
  
	100% {
		top: 0px;
		/*transform: rotate(0deg)*/
	}
  }

  #menu-item-6
{
	animation-duration: 2.25s;
	animation-name: slide-menu-item-6;
}

@keyframes slide-menu-item-6 {
	0% {
		top: -200px;
		/*transform: rotate(180deg)*/
	}
  
	100% {
		top: 0px;
		/*transform: rotate(0deg)*/
	}
  }

  #menu-item-7
{
	animation-duration: 2.5s;
	animation-name: slide-menu-item-7;
}

@keyframes slide-menu-item-7 {
	0% {
		top: -200px;
		/*transform: rotate(180deg)*/
	}
  
	100% {
		top: 0px;
		/*transform: rotate(0deg)*/
	}
  }

  #menu-item-8
{
	animation-duration: 2.45s;
	animation-name: slide-menu-item-8;
}

@keyframes slide-menu-item-8 {
	0% {
		top: -200px;
		/*transform: rotate(180deg)*/
	}
  
	100% {
		top: 0px;
		/*transform: rotate(0deg)*/
	}
  }