@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap');

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: black;
	list-style-type: none;
}

html{
	font-size: 62.5%;
}

body {
	font-family: "Maven Pro",sans-serif;
	text-align: center;
	font-size: 1.5rem;
	z-index: 0;
}

/*HEADER*/

.entete {
	background-image: url(../img/21517175_l.jpg);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.navigation2 {
	display: none;
}

.navigation {
	position: fixed;
	top: 0;
    width: 100%;
    z-index: 1;
}

.bslogo {
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: #f0f1f5;
}

.bslogo a {
	width: 70%;
}

.bslogo a img {
	width: 100%;
}

.fa-window-close{
	display: none;
}

.bslogo i {
	font-size: 2.5rem;
	cursor: pointer;
	color: #502369;
}

.nav1 {
	background-color: #f0f1f5;
	display: none;
}

.nav1 ul li a {
	font-family: "Roboto Condensed",sans-serif;
	display: block;
	text-align: left;
    padding: 1rem;
    color: #502369;
    text-transform: uppercase;
}

.nav1 ul li a:hover {
	background-color: #502369;
    color: white;
}

.presentation {
	padding-top: 10rem;
}

.presentation article {
	background-color: #000000a1;
	color: white;
}

.presentation p {
	color: white;
	margin-bottom: 1rem;
}

.svsc {
	font-size: 2.5rem;
    text-transform: uppercase;
}

.presentation p a, .presentation p span {
	color: white;
	font-size: 3rem;
}

.coordonnees {
	width: 90%;
    margin: 0 auto 2rem auto;
    padding: 1rem;
}

.artHeader {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
}

.nousContacter {
 	width: 45%;
 	margin: 0 auto 2rem auto;
 }

.cpoint {
	cursor: pointer;
}

.nousContacter p {
	text-transform: uppercase;
    font-weight: 600;
}

.nousContacter a {
	display: block;
}

.nousContacter i {
	color: white;
    font-size: 3rem;
    margin-top: 1rem;
}

.modalHeader, .modalFooter {
	background-color: #f40c0b!important;
}

.modalHeader h2 {
	color: black;
	text-transform: uppercase;
}

.w3-display-topright {
	background-color: black;
}

.fa-times-circle {
	color: white;
}

.w3-container img {
	width: 100%;
}

.courtePresa {
	padding: 1rem;
}

.courtePresa img {
	width: 50%;
	border-radius: 1rem;
}

.courtePresaDetails {
	font-size: 1.7rem;
}

.courtePresa span {
	font-family: "Roboto Condensed",sans-serif;
	display: block;
    width: 22rem;
    margin: auto;
    padding: 1.5rem;
    background-color: #331643;
    color: #FFFFFF;
    font-size: 2.8rem;
    font-weight: 400;
    text-transform: uppercase;
}

/*MAIN*/

main section {
	background-image: url(../img/bg-page.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 6rem 1rem 3rem 1rem;
}

h1 {
	font-family: "Roboto Condensed",sans-serif;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #444d50;
    text-transform: uppercase;
    border-left: 6px solid #331643;
    margin-left: 1rem;
}

h2 {
	font-family: "Roboto Condensed",sans-serif;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
	color: #444d50;
    text-transform: uppercase;
}

article h2 {
	padding: 0 1rem;
}

h3 {
	font-style: normal;
    font-family: "Roboto Condensed",sans-serif;
    font-weight: 300;
    color: #444d50;
    font-size: 2rem;
    margin: 2rem 0;
    padding: 0 1rem;
}

main strong {	
	color: #444d50;
}

main section p {
	text-align: justify;
    margin-bottom: 1.5rem;
	color: #444d50;
}

main section p a {
	text-decoration: underline;
	color: #444d50;
}

#presentation ul {
	margin-bottom: 1.5rem;
    text-align: left;
}

#presentation ul li {
	margin-bottom: 1rem;
	color: #444d50;
}

#presentation ul li i {
	margin-right: 1rem;
	color: #444d50;
}

.intersection {
    height: 5rem;
    background-image: url(../img/intersection.png);
    background-size: contain;
}

#soins article, #prestations article {
	margin-bottom: 1.5rem;
	border: 0.1rem solid black;
	border-radius: 1rem;
}

#soins article img, #prestations article img {
	width: 100%;
}

#soins article div span, #prestations article div span {
    color: white;
}

#soins article div i, #prestations article div i {
	display: block;
    margin-top: 0.5rem;
    color: white;
}

#soins article div p, #prestations article div p {
	padding: 0 1rem;
}

.openSoinsVisage, .closeSoinsVisage, .openSoinsCorps, .closeSoinsCorps, .openSoinsMinceur, .closeSoinsMinceur, .openSpr, .closeSpr, .openMp, .closeMp, .openPr, .closePr, .openEac, .closeEac, .openEpp, .closeEpp, .openMan, .closeMan, .openSdpc, .closeSdpc, .openMpm, .closeMpm, .openRdc, .closeRdc, .openSauna, .closeSauna {
	cursor: pointer;
    background-color: #502369;
    padding-bottom: 0.5rem;
}

.descriptionVisage, .descriptionCorps, .descriptionMinceur, .descriptionSpr, .descriptionMp, .descriptionPr, .descriptionEac, .descriptionEpp, .descriptionMan, .descriptionSdpc, .descriptionMpm, .descriptionRdc, .descriptionSauna {
	display: none;
}

#epilations div img, #bmobp div img, #maquillage div img {
	width: 100%;
	margin-bottom: 1.5rem;
}

#prestations a, .plaquetteTarifs {
	display: block;
    background-color: #502369;
    color: white;
    padding: 1rem;
    border-radius: 1rem;
    width: 15rem;
    margin: 0 auto 2rem auto;
}

.logoContact {
	width: 20rem;
    display: block;
    margin: 0 auto 1rem auto;
}

.telContact {
	font-size: 2rem;
	margin-bottom: 1.5rem;
    color: #444d50;
}

#contact p {
	text-align: center;
}

.red {
	color: red;
}

form aside {	
	margin-bottom: 1.5rem;
}

form aside label {
	text-align: left;
	display: block;
	width: 70%;
	margin: auto;
	margin-bottom: 0.5rem;
}

form aside input {
	text-align: center;
	display: block;
	width: 70%;
	margin: auto;
	padding: 1rem;
	border-radius: 1rem;
	font-weight: 700;
	background-color: #502369;
  	color: white;
}

form aside input:focus, form aside textarea:focus {
	background-color: white;
 	color: #502369;
}

form aside textarea {
	text-align: center;
	display: block;
	margin: auto;
	width: 80%;
	min-height: 10rem;
	padding: 1rem;
	border-radius: 1rem;
	font-weight: 700;
	background-color: #502369;
  	color: white;
}

form button {
	display: block;
    background-color: white;
    color: #502369;
    padding: 1rem;
    border-radius: 1rem;
    width: 15rem;
    margin: 0 auto 2rem auto;
    border: 0.1rem solid #502369;
    cursor: pointer;
}

form button:hover {
	border-style: dashed;
	font-weight: 700;
}

iframe {
	width: 100%;
}

/*FOOTER*/

footer p{
	background-color: black;
	color: white;
	padding: 0.5rem 0;
}

footer p a{
	color: gold;
}

footer p a i{
	color: gold;
	margin: 0 0.5rem 0 1rem;
}

/*Ecran min 590px*/

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

	/*HEADER*/

	.bslogo a {
	    width: 40%;
	}

	.nousContacter {
	    width: 30%;
	}

	.courtePresa img {
		width: 30%;
	}

	/*MAIN*/

	#soins article, #prestations article {
		width: 60%;
		margin: 0 auto 1.5rem auto;
	}

	#epilations div img, #bmobp div img, #maquillage div img {
		width: 60%;
	}

	#tarifs p {
		text-align: center;
	}

	form aside label, form aside input {
		width: 50%;
	}

}

/*Ecran min 720px*/

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

	/*HEADER*/

	.bslogo a {
	    width: 30%;
	}

	.nousContacter {
	    width: 40%;
	}

	.courtePresa img {
	    width: 25%;
	}

	/*MAIN*/

	main section p {
		text-align: center;
	}

	#presentation ul {
		padding-left: 20%;
	}

	.flexArticle {
		display: flex;
	    justify-content: space-around;
	    flex-wrap: wrap;
	    align-items: flex-start;
	}

	#soins article, #prestations article {
		width: 30rem;
	}

	#prestations a, .plaquetteTarifs {
		width: 20rem;
	}

	form aside label, form aside input {
		width: 40%;
	}

	form aside textarea {
		width: 70%;
	}

	iframe {
		width: 80%;
	}

}

/*Ecran min 1060px*/

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

	h1 {
		border-left: none;
		margin-left: 0;
	}

	/*HEADER*/

	.navigation {
		display: none;
	}

	.navigation2 {
		display: flex;
	    justify-content: space-between;
	    align-items: center;
	    position: fixed;
	    top: 0;
	    width: 100%;
	    z-index: 1;
		background-color: #f0f1f5;
	}

	.bslogo2 {
		width: 25rem;
	}

	.bslogo2 a {
		display: block;
	}

	.bslogo2 a img {
		width: 100%;
	}

	.nav2 {
		width: 80rem;	
	}

	.nav2 ul {
		display: flex;
	    justify-content: space-around;
	    align-items: center;
	}

	.nav2 ul li a {
		font-family: "Roboto Condensed",sans-serif;
	    display: block;
	    padding: 1rem;
	    color: #502369;
	    text-transform: uppercase;
	}

	.nav2 ul li a:hover {
		background-color: #502369;
	    color: white;
	}

	.entete {
		height: 100vh;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	}

	.presentation {
		display: flex;
	    justify-content: space-around;
	    flex-wrap: wrap;
	    align-items: center;
	}

	.courtePresa img {
	    width: 30%;
	}

	/*MAIN*/

	#epilations div, #bmobp div, #maquillage div {
		display: flex;
	    justify-content: space-around;
	    flex-wrap: wrap;
	}

	#epilations div img, #bmobp div img, #maquillage div img {
		width: 40rem;
	}

	form aside label, form aside input {
		width: 30rem;
	}

	form aside textarea {
		width: 50rem;
	}

}

/*Ecran min 1200px*/

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

	/*MAIN*/

	#soins article, #prestations article {
	    width: 35rem;
	}