/* thailandais */

h2{
	font-size: 24pt;
	transition: all 0.5s;
}

p{
	text-align: justify;
	font-weight: bold;
	transition: all 0.5s;
}


@font-face {
	font-family: "CormorantGaramond";
	src: url('./fonts/CormorantGaramond-Regular.ttf');
}


.back-img{

	/*grid-column:  1 / 4;
	grid-row: 1;*/

	position: relative;

	background-image:  linear-gradient( transparent, 85%, rgb(255, 255, 255)), linear-gradient(to top, transparent, 85%, rgb(255, 255, 255)),
	url("./images/fond_massage_E.jpg");
	background-repeat:no-repeat;
	background-size: cover;

	width: 100%;
	height: 100%;

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


@keyframes shadeIN {
	from {
		opacity: 0.2;
	  
	}
  
	to {
		opacity: 1;
	  
	}
  }


.content-container
{
	height: 100vh;
}



.def-massage
{
	position: relative;

	background-color: rgb(163, 148, 148);
	opacity: 0.85;

	/*margin: 20 20 0 20px;*/
	height: 50%;
	width: 20%;

	margin : auto;

	padding: 20 20 40 20px;
	text-align: center;

	box-shadow: 8px 8px 20px #333;
	border: 2px solid rgb(163, 148, 148);
	border-radius: 15px;

	transition: all 0.5s;
	
}

.def-massage:hover
{
	height: 85% ;
	/*width: 25%;*/
	opacity: 1 !important;
	
}

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

	.def-massages
	{
		/*position: absolute;*/
		display: flex;
		flex-wrap: wrap;
		margin: 50px 0 0 0;
		height: 90%;
	}
	.def-massage
	{
		min-width: 100px;
		height: 20%;
		width: 75%;
	}

	.def-massage:hover
	{
		height: 25%;
		width: 75%;
		opacity: 1 !important;
		
	}

	.def-massage > .content-def-massage > p
	{
		font-size: 22pt;
	}

}

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

	.def-massages
	{
		/*position: absolute;*/
		display: flex;
		flex-wrap: wrap;
		margin: 50px 0 0 0;
		height: 90%;
	}
	.def-massage
	{
		min-width: 300px;
		height: 35%;
		width: 35%;
	}

	.def-massage:hover
	{
		height: 50%;
		width: 50%;
		opacity: 1 !important;
		
	}

}


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

	.def-massages
	{
		/*position: absolute;*/

		height: 100%;
		width: 100%;

		display: flex;
	}


	.def-massage:hover
	{
		height: 75% ;
		/*width: 25%;*/
		opacity: 1 !important;
		
	}
}




#def-massage1
{
	animation-duration: 0.8s;
	animation-name: slidein;

	
}

#def-massage2
{
	animation-duration: 1.2s;
	animation-name: slidein;

}

#def-massage3 > .content-def-massage > h2
{
	font-size: 16pt;

}

#def-massage3
{
	animation-duration: 1.8s;
	animation-name: slidein;

}

#def-massage4
{
	animation-duration: 2s;
	animation-name: slidein;

	
}


.det-def-massage
{
	position: absolute;
    bottom: 10px;
	width: 90%;
}


.massage-duree
{
	display: inline-block;
	text-align: left;
	width: 45%;
	font-size: 16pt;
	font-weight: bold;
	color: white;
}

.massage-prix
{
	display: inline-block;
	text-align: right;
	width: 45%;
	font-size: 16pt;
	font-weight: bold;
	color: white;
}

@keyframes slidein {
	from {
	  left: 100%;
	  
	}
  
	to {
	  left: 0%;
	  
	}
  }

  .content-def-massage
  {
	  height: 100%;
	  overflow: auto;
  }
  
  .content-def-massage::-webkit-scrollbar {
	  display: none;
	}
	
	/* Hide scrollbar for IE, Edge and Firefox */
	.content-def-massage {
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}
.content-def-massage > p
{
	font-family: "CormorantGaramond";
	font-size: 22px;
	
}

.def-massage > p
{
	font-family: "CormorantGaramond";
	font-size: 22px;
	
}