@charset "UTF-8";
/* CSS Document */


@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.woff2') format('woff2'),
         url('fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/*
dark pink cf6161
dark green 2c3a30
grey e5e5e5
light pink e4a1a1
logo green 87a264
*/

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

a {
	text-decoration:none;
	}
	
a:link {
	color:#cf6161;
	
	}
	
a:visited {
	color:#cf6161;
	
	}
a:hover {
	color:#87a264;
	
	}			
#malemfooterlink a:link {
	color:#000;
	
	}
	
#malemfooterlink a:visited {
	color:#000;
	
	}
#malemfooterlink a:hover {
	color:#87a264;
	
	}

	
	  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

body {
background-color:#fff;
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
	}
	


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  z-index:3000;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 30px;
  font-weight: normal;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
  




/* MOBI 

.malemSliderContainer{ display:none;}*/

#malemnav1 {height:31px;background-color:#2c3a30;width:100%;color:#fff;font-family:'Montserrat';font-size:calc(12px + 0.6vw);text-align:center; line-height:30px;padding-top:1px;padding-bottom:1px;position:absolute;z-index:10;
  }
#malemnav1 a:link {color:#FFF }
#malemnav1 a:visited {color:#FFF }
#malemnav1 a:hover {color:#cf6161 }
.malemheaderlanguage {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.malemburgermenu {display:none;}
.malemburgermenuMOBI {margin-left:5px; margin-right:5px;display:inline;}
.malemTopFacebook {display:none;}

#malemnav2 {display:none;}
#malemnav2 a:link {color:#cf6161 }
#malemnav2 a:visited {color:#cf6161 }
#malemnav2 a:hover {color:#2c3a30 }
#malemnav2 ul li {display:block;margin-right:1.5%;position:relative;top:-10px}
.malemmobi {display:block;visibility:visible;}
.malemNotmobi {display:none;visitiliby:hidden;}

#malemnav2Mobi {display:block;height:300px;background-color:#e5e5e5;width:100%;color:#cf6161;font-family:Arial, Helvetica, sans-serif;
font-size:calc(12px + 0.6vw);text-align:center; line-height: 30px;padding-top:1px;padding-bottom:1px;border-top:3px solid #fff; position:absolute;top:-300px;z-index:5;transition:all 0.5s linear;}
#malemnav2Mobi a:link {color:#cf6161 }
#malemnav2Mobi a:visited {color:#cf6161 }
#malemnav2Mobi a:hover {color:#2c3a30 }
#malemnav2Mobi ul li {display:block;margin-right:1.5%;position:relative;top:-10px}


#malemnav3 {height:200px;width:100%;margin-right:0%;margin-left:0%;padding-top:20px;background-color:#fff;color:#cf6161;font-family:Arial, Helvetica, sans-serif;
font-size:calc(12px + 0.6vw);text-align:center; position:absolute;top:-250px;z-index:6;transition:all 0.5s linear;}
#malemnav3 a:link {color:#87a264 }
#malemnav3 a:visited {color:#87a264 }
#malemnav3 a:hover {color:#cf6161 }


.malemvisualnav {width:15%;max-width:170px;float:left;margin-left:10%;}
.malemSubPicture1 {
	padding-bottom:10px;
	width:61%;
	max-width:170px;
	margin:auto;
	}
	
	.MalemSubMenuDiv1 {
		width:30%;
		float:left;
		color:#666;
		font-family:Arial, Helvetica, sans-serif;
		font-size:calc(9px + 0.6vw);
		text-align:center;
		}

.MalemSubMenuDiv1 a {color:#666;}	
.MalemSubMenuDiv1 a:visited {color:#666;}	
.MalemSubMenuDiv1 a:hover {color:#cf6161;}	

/* content */
#malemLogo {width:80%;margin-right:auto;margin-left:auto;padding-top:40px;text-align:center;position:relative;height:auto;z-index:-5;}
#malemLogo img  {width:40%;max-width:120px;}

/* home specific */
.malemSliderTopShade {display:block;margin-top:20px;z-index:4;width:100%;position: absolute;}
.malemSliderContainer{display:none;!important;}
.malemSliderContainerMobi{ display:block;margin-top:20px;margin-bottom:70px;border-bottom:8px solid #cf6161;}

.malemNarrowDivContainer {width:80%;margin-right:10%;margin-left:10%;margin-bottom:50px;text-align:center;}
.malemPromoLeft {width:100%;margin-right:0;border:1px solid #000;float:none;margin-bottom:70px;}
.malemPromoRight {width:100%;margin-left:0;border:1px solid #000;position:relative;float:none;}

.malemBlogPromoTextBox {height:35px;line-height:35px;background-color:#666;color:#fff;Font-family:Arial, Helvetica, sans-serif;font-size:calc(13px + 0.6vw);font-style:italic;position:relative;bottom:0px;overflow:hidden;}

.MalemNatDivContainer {width:100%;min-height:280px;background-image:url(../_img/nathalie-massage-soinsbg.jpg);background-position:bottom left;background-size:100%;background-repeat:no-repeat;font-family:Arial, Helvetica, sans-serif;font-size:calc(11px + 0.6vw);position:relative;}
.MalemNatDivContainer h1 {font-family:'Montserrat';color:#87a264;font-size:20px;}
.MalemNatHomeText {width:70%;float:left;padding-left:20%;margin-top:5px;margin-right:10%;margin-left:0px;position:relative;bottom:20px;}
.MalemRV {float:right;width:20%;min-width:128px;margin-bottom:50px;px;}
.MalemRV img {width:95%;max-width:220px;min-width:128px;float:right}

.malemFooterContainer {border-bottom:1px solid #cf6161;background-color:#e5e5e5;background-image:url(../_img/butterfly-wings-soins-corps-horaire.png);background-size:15%;background-position: bottom left;background-repeat:no-repeat;border-top:1px solid #000;padding-left:10%;padding-right:10%;width:80%;padding-top:15px;padding-bottom:15px;font-size:calc(11px + 0.6vw);}
.malemFooterAdresseBlock {border-left:0;width:45%;float:left;margin-left:0;padding-left:0;height:90px;}
.malemFooterContactBlock {border-right:0;width:45%;float:left;padding-left:5px;padding-right:0;padding-bottom:10px;height:90px;}

.malemContactIcon {margin-top:5px;margin-right:5px;margin-bottom:5px;width:15%;height:auto;min-width:22px;max-width:30px;}
.malemCopy {background-color:#cf6161;width:100%;height:20px;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff;text-align:center;line-height:20px;}

  /*  @@@@@@@@@@@@@@@@NEW */


/* generic page specific */
.malemTotalWidthContainerHeader {display:none;}
.malemTotalWidthContainerHeaderMOBI {display:block;margin-top:20px;width:100%;height:auto;margin-bottom:40px;z-index:0;position:relative;border-bottom:2px solid #e5e5e5;}

.malemTotalWidthContainer {width:100%;height:auto;}
.malemPageTitle {font-size:20px;color:#87a264;padding-bottom:25px;}

.malemDivContainerLEFT100 {width:90%;margin-right:5%;margin-left:5%;margin-bottom:110px;text-align:left;}
.malemDivContainerLEFT100 h2 {font-size:23px;font-weight:normal; margin-top:0px;color:#cf6161;padding-bottom:0px;}
.malemBigGreenTitle {font-size:23px;font-weight:normal; margin-top:0px;color:#87a264;padding-bottom:0px;}

.malemBlackTitle {font-size:21px;font-weight:normal; margin-top:0px;color:#000;padding-bottom:0px;}
.malemBlackBigText {font-size:18px;font-weight:normal; margin-top:0px;color:#000;padding-bottom:0px;}
.malemdigit {vertical-align:middle;margin-right:20px;margin-bottom:20px}
.malemGreenBigTitle {font-size:23px;font-weight:normal; margin-top:0px;color:#87a264;padding-bottom:0px;}


.malemPinkOutlineBox {border:1px solid #cf6161;padding:25px;margin-top:50px;margin-bottom:50px}
.malemGreenOutlineBox {border:1px solid #87a264;padding:25px;margin-top:50px;margin-bottom:50px}

.malem3BoxContainer{display: block;}
.malem3Box1 {width:100%;margin-right:0;border:1px solid #c5c5c5;float:left;margin-bottom:70px;background-color:#fff}
.malem3Box2 {width:100%;margin-right:0;border:1px solid #c5c5c5;float:left;margin-bottom:70px;background-color:#fff}
.malem3BoxGreenTibleBand {width:96%;display:block;background-color:#87a264;color:#FFF;padding:2%;text-align:center;}
 
.malem3Box1 ul {
  list-style: none;
}

.malem3Box1 ul li::before {
  content: "\2022";
  color: #87a264;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

.malem3BoxV2 {width:100%;margin-right:0;border:1px solid #c5c5c5;float:left;margin-bottom:30px;align-items:stretch;background-color:#fff;text-align:center}

.malem3BoxV3 {width:100%;margin-right:0;border:1px solid #c5c5c5;float:left;margin-bottom:30px;align-items:stretch;background-color:#fff;text-align:center}
.malem3BoxV3 ul {
   list-style: outside url(../_img/wingbullet.png);
   text-align:left;
}

/* soins corps*/
.malemsubtitlepink {font-size:20px;font-weight:normal;color:#cf6161;padding-bottom:0px;}
.malemsubtitlegreen {font-size:20px;font-weight:normal;color:#87a264;padding-bottom:0px;}

.malemSoinsTitleBoxPink {width:98%;display:block;background-color:#cf6161;color:#FFF;padding:1%;text-align:center;font-size:23px;}
.malemSoinsTitleBoxGreen {width:98%;display:block;background-color:#87a264;color:#FFF;padding:1%;text-align:center;font-size:23px;}
.malemRoseBath {background-color:#f5dfdf;color:#cf6161;padding:5px;border:1px solid #cf6161;font-size:18px;margin-bottom:15px; }
.malemGreenBath {background-color:#e7ece0;color:#87a264;padding:5px;border:1px solid #87a264;font-size:18px;margin-bottom:15px; }


.malemSoinsBoxFooterPink {width:99.25%;padding:0.5%;background-color:#f5dfdf; color:#cf6161;display:block;text-align:center;font-size:23px;}
.malemSoinsBoxFooterGreen {width:99.25%;padding:0.5%;background-color:#e7ece0; color:#87a264;display:block;text-align:center;font-size:23px;}

.malemBoxRight50 {width:49%;margin-right:2%;float:left;margin-bottom:0px;}
.malemBoxLeft50 {width:49%;float:left;}



/* content containers with footer image*/
/* soins chalet*/
 .malemNarrowDivContainerChalet {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/chalet-massage-soinscorps-facialFooter.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}
/* soins du corps*/
 .malemNarrowDivContainerSoinsCorps {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/soins-du-corps-footer.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}
/*massage*/
 .malemNarrowDivContainerMassages {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/massage-footer.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}

/*facial */
 .malemNarrowDivContainerFacial {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/facial-footer.jpg);background-position:center bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}
.malemBodyFacial {background-image:url(../_img/facial-footer.jpg);background-position:center bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}

/*a propos du loft*/
 .malemNarrowDivContainerLoft {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/leloftfooter.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}







/* STORE page specific */
.malemSectionTitlesContainer {width:98%;margin-left:1%;margin-right:1%}
.MalemSectionContainer {width:30%;text-align:center;float:left;margin-right:3%;margin-bottom:15px;}
.malemStoreSectionTitle a:link {font-size:16px;color:#87a264;margin-top:25px;}
.malemStoreSectionTitle a:visited {color:#87a264;}
.malemStoreSectionTitle a:hover {color:#e4a1a1;}


.malemStorePageTitle {font-size:20px;font-weight:normal; margin-top:50px;color:#87a264;padding-bottom:25px;}


.MalemProductContainer {width:100%;border:1px solid #e5e5e5;text-align:center;float:left;margin-left:0;margin-bottom:35px;position:relative;}
.malemStoreImage {width:100%;margin-bottom:25px;}/*this one aslo triggers JS for modal enlargement */
.malemSectionImage {width:100%;margin-bottom:25px;} 
.malemStoreTitle {font-size:20px;color:#87a264;}
.malemProductInfos {width:90%;margin-left:5%;margin-right:5%}
.malemPrice {font-size:20px;color:#999;float:left; }
.malemCart {vertical-align: middle;float:right;margin-left:20px;margin-bottom:20px}
.malemView {vertical-align: middle;float:right;margin-right:5px;margin-bottom:20px}
  
  
  /*  STORE DESCRIPTION BOX the tooltip START */

.malemtooltip {
  position: absolute;
  top:0;
  left:0;
  display: inline-block;
}
 /*
.malemtooltip .malemtooltiptext2 {
  visibility: hidden;
  width:25vw;
  background-color: white;
  color: #000;
  text-align: left;border:1px solid #87a264;
  border-radius: 6px;
  padding: 10px;
  
  /* Position the tooltip */     /*
  position: absolute;
  z-index: 1;
  bottom:-300px;
  left: -15px;
  margin-left: 0px;
}
 */
.malemDesView .malemtooltiptext {
  visibility: hidden; /* Hidden by default */
  display:inline-block;
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding: 10px; 
  left: 0;
  top: 0;
  width: 90%; /* Full width */
  background-color:#fff;
   text-align: left;
   border:1px solid #87a264;
  border-radius: 6px;
} 
 /*  STORE DESCRIPTION BOX the tooltip START */
 
 .malemStoreSectionBannerSmall {width:95%;margin-left:2.5%;margin-right:2.5%;border-top:4px solid #e4a1a1;padding-top:25px;}


 /*  BLOG */
 .malemBlogContentContainer {width:100%;}
 .malemBlogContentContainer H2 {font-size:18px;font-weight:normal; color:#cf6161;padding-bottom:0px;padding-top:10px;}
 .malemBlogLogo {text-align:center;width:100%;margin-top:30px;margin-bottom:30px;}
 .malemBlogLogo img {width:35%;min-width:60px;}
 /*.malemBlogMenuContainer {width:13%;margin-right:2%;float:left;height:100%;}*/
 .malemBlogArticleContainer {width:90%;float:none;margin-left:5%;margin-right:5%;}
 .malemBlogTopImage {width:100%;margin-bottom:15px;}
 .malemBlogPageTitle {font-size:26px;font-weight:normal; margin-top:50px;color:#cf6161;padding-bottom:25px;}
 /*  menu styles */
 
.malemBlogMenuContainer {display:none;}


.malemBlogMenuContainerMOBI {display:block;clear:both;}
.malemBlogMenuContainerMOBI UL {  list-style-type: none;margin:0;padding:0 ;}

.malemBlogMenuContainerMOBI li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
 
}

/* Change the link color on hover */
.malemBlogMenuContainerMOBI li a:hover {
  color: #cf6161;
}
.malemBlogMenuContainerMOBI li a.active {
 background-color:#a1b088;color:#000;}
 
 
.malemBlogMenuContainerMOBI li a:hover:not(.active) {
  color: #cf6161;
}

.malemBlogPhotoContainer {width:48%;margin-right:2%;margin-top:40px;float:left;}
.malemBlogTopVideoContainer {width:100%;margin-right:0;margin-top:15px;float:left;}

.malemBlogBottomImage {width:100%;margin-bottom:15px;}
.malemCaption {font-size:16px; margin-bottom:40px;margin-top:10px;display:block;clear:both;}

.malemBlogVideoContainer {
    position: relative;
    padding-bottom: 56.10%;
    height: 0;
    overflow: hidden;
}
 /* youtube video container */
.malemBlogVideoContainer iframe,
.malemBlogVideoContainer object,
.malemBlogVideoContainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* START contact page */	
	
.malemContactContent input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
   border: 1px solid #353535;
    background-color: #f8f8f8;
}

.malemContactContent textarea {
  width: 100%;
  height: 175px;
  padding: 12px 20px;
  margin-top:5px;
  box-sizing: border-box;
  border: 1px solid #353535;
  background-color: #f8f8f8;
  font-size: 16px;
}

.MalemSubmitButton {
	padding:10px;border:1px solid #000;font-size:18px;color:#000;background-color:#ccc; float:right;margin-top:25px;
	}
		
.malemContactContent input:hover[type="submit"] {
background-color:#cf6161;
	color:#fff;	
}

.malemContactFormContainer {width:100%;float:left;margin-bottom:25px;margin-top:30px;text-align:left;}
.MalemContactMessageContainer {float:left;width:100%;font-size:16px;margin-left:0px;font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#87a264;}
.MalemContactFormInputContainer {float:left;width:100%;margin-right:0px;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#87a264;}
#malemFORMSUCCESScontainer {width:100%;margin-right:0;margin-left:0;font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#000;position:relative;z-index:-200;}

/* END contact page */


/* Massage page START */
.malemMassageTextBox {padding:3%;width:94%;float:left;background-color:#fff;}
.malemMassagePhotoBox {width:100%;float:right;}
.malemMassagePhotoBox img {height:auto;width:100%;position:relative;}
/* Massage page END */

/* FACIAL page END */
.malemFacialProductContainer {display:none;}
.malemFacialProductContainerMOBI {display:block;z-index:4000;}



/* Tablet Layout: 481px to 850px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.malemSliderContainer{ display:none;}.malemSliderContainerMobi{ display:block;}

.malemvisualnav {width:15%;max-width:170px;float:left;margin-left:10%;}
.malemSubPicture1 {
	padding-bottom:10px;
	width:61%;
	max-width:170px;
	margin:auto;
	}
	
	#malemnav3 {height:250px;width:100%;margin-right:0%;margin-left:0%;padding-top:20px;background-color:#fff;color:#cf6161;font-family:Arial, Helvetica, sans-serif;
font-size:calc(12px + 0.6vw);text-align:center; position:absolute;top:-250px;z-index:6;transition:all 0.5s linear;}
	
	.MalemSubMenuDiv1 {
		width:25%;
		float:left;
		color:#666;
		font-family:Arial, Helvetica, sans-serif;
		font-size:calc(9px + 0.6vw);
		text-align:center;
		}
		
.MalemNatDivContainer {width:100%;min-height:280px;background-image:url(../_img/nathalie-massage-soinsbg.jpg);background-position:bottom left;background-size:100%;background-repeat:no-repeat;font-family:Arial, Helvetica, sans-serif;font-size:calc(11px + 0.6vw);position:relative;}
.MalemNatDivContainer h1 {font-family:'Montserrat';color:#87a264;font-size:20px;}
.MalemNatHomeText {width:70%;float:left;padding-left:20%;margin-top:5px;margin-right:10%;margin-left:0px;position:relative;bottom:20px;}
.MalemRV {float:right;width:20%;min-width:128px;margin-bottom:50px;px;}
.MalemRV img {width:95%;max-width:220px;min-width:128px;float:right}

/* STore */
/* .MalemProductContainer {width:46%;border:1px solid #e5e5e5;text-align:center;float:left;margin-left:3%;margin-bottom:35px;position:relative;}  */

}




/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

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


#malemnav1 {height:31px;background-color:#2c3a30;width:100%;color:#fff;font-family:'Montserrat';font-size:22px;text-align:center; line-height: 30px;padding-top:1px;padding-bottom:1px;position:absolute;z-index:10;
  }
#malemnav1 a:link {color:#FFF }
#malemnav1 a:visited {color:#FFF }
#malemnav1 a:hover {color:#cf6161 }
.malemheaderlanguage {font-family:Arial, Helvetica, sans-serif;font-size:19px;}
.malemburgermenu {margin-left:12px; margin-right:45px;display:inline;}
.malemburgermenuMOBI {display:none;}
.malemTopFacebook {display:inline-block;}

#malemnav2 {display:block;height:31px;background-color:#e5e5e5;width:100%;color:#cf6161;font-family:Arial, Helvetica, sans-serif;
font-size:calc(9px + 0.6vw);text-align:center; line-height:30px;padding-top:1px;padding-bottom:1px;border-top:3px solid #fff; position:absolute;top:-20px;z-index:5;transition:all 0.5s linear;}
#malemnav2 a:link {color:#cf6161 }
#malemnav2 a:visited {color:#cf6161 }
#malemnav2 a:hover {color:#2c3a30 }
#malemnav2 ul li {display:inline-block;margin-right:1.5%;position:relative;left:-15px;top:-18px}
.malemmobi {display:none;visitiliby:hidden;}
.malemNotmobi{display:block;visitiliby:visible;}
#malemnav2Mobi {display:none;}

#malemnav3 {height:150px;width:80%;margin-right:10%;margin-left:10%;padding-top:5px;background-color:#fff;color:#cf6161;font-family:Arial, Helvetica, sans-serif;
font-size:calc(9px + 0.6vw);text-align:center; position:absolute;top:-150px;z-index:0;transition:all 0.5s linear;}
#malemnav3 a:link {color:#87a264 }
#malemnav3 a:visited {color:#87a264 }
#malemnav3 a:hover {color:#cf6161 }


.malemvisualnav {width:15%;max-width:170px;float:left;margin-left:10%;}
.malemSubPicture1 {
	padding-bottom:10px;
	width:61%;
	max-width:170px;
	margin:auto;
	}
	
	.MalemSubMenuDiv1 {
		width:19%;
		float:left;
		color:#666;
		font-family:Arial, Helvetica, sans-serif;
		font-size:calc(9px + 0.6vw);
		text-align:center;
		}

.MalemSubMenuDiv1 a {color:#666;}	
.MalemSubMenuDiv1 a:visited {color:#666;}	
.MalemSubMenuDiv1 a:hover {color:#cf6161;}	

/* content */
#malemLogo {width:80%;margin-right:auto;margin-left:auto;padding-top:85px;text-align:center;position:relative;height:125px;z-index:-5;}
#malemLogo img  {width:15%;max-width:160px;}

/* home specific */
.malemSliderTopShade {display:block;margin-top:20px;z-index:10;width:100%;position: absolute;}
.malemSliderContainer{ display:block;margin-top:20px;margin-bottom:130px;border-bottom:8px solid #cf6161;}
.malemSliderContainerMobi{ display:none;margin-top:20px;margin-bottom:70px;border-bottom:8px solid #cf6161;}


.malemNarrowDivContainer {width:80%;margin-right:10%;margin-left:10%;margin-bottom:110px;text-align:center;}
.malemPromoLeft {width:45%;margin-right:5%;border:1px solid #000;position:relative;float:left;margin-bottom:0px;}
.malemPromoRight {width:45%;margin-left:4%;border:1px solid #000;position:relative;float:left;}

.malemBlogPromoTextBox {height:35px;line-height:35px;background-color:#666;color:#fff;Font-family:Arial, Helvetica, sans-serif;font-size:calc(8px + 0.6vw);font-style:italic;position:relative;bottom:0px;}

.MalemNatDivContainer {width:100%;min-height:18vw;background-image:url(../_img/nathalie-massage-soinsbg.jpg);background-position:bottom left;background-size:100%;background-repeat:no-repeat;font-family:Arial, Helvetica, sans-serif;font-size:calc(9px + 0.6vw);position:relative;}
.MalemNatDivContainer h1 {font-family:'Montserrat';color:#87a264;font-size:20px;}
.MalemNatHomeText {width:70%;float:left;padding-left:20%;margin-top:5px;margin-right:10%;margin-left:0px;position:absolute;bottom:20px;}
.MalemRV {float:right;width:20%;margin-bottom:50px;px;}
.MalemRV img {width:95%;max-width:220px;min-width:128px;float:right}

.malemFooterContainer {border-bottom:1px solid #cf6161;background-color:#e5e5e5;background-image:url(../_img/butterfly-wings-soins-corps-horaire.png);background-size:10%;background-position: bottom left;background-repeat:no-repeat;border-top:1px solid #000;padding-left:10%;padding-right:10%;width:80%;padding-top:15px;padding-bottom:15px;font-size:calc(8px + 0.6vw);}
.malemFooterAdresseBlock {border-left:1px solid #87a264;width:14%;float:left;margin-left:3%;padding-left:25px;height:140px;}
.malemFooterContactBlock {border-right:1px solid #87a264;width:13%;float:left;padding-left:40px;padding-right:5px;padding-bottom:0px;height:140px;}

.malemContactIcon {margin-top:5px;margin-right:5px;margin-bottom:5px;width:15%;height:auto;min-width:22px;max-width:30px;}
.malemCopy {background-color:#cf6161;width:100%;height:25px;font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#fff;text-align:center;line-height:25px;}


/* generic page specific */
.malemTotalWidthContainerHeader {display:block;margin-top:20px;width:100%;height:auto;margin-bottom:75px;z-index:0;position:relative;border-bottom:8px solid #e5e5e5;}
.malemTotalWidthContainerHeaderMOBI {display:none;}

.malemTotalWidthContainer {width:100%;height:auto;}
.malemPageTitle {font-size:26px;color:#87a264;padding-bottom:25px;}
.malemDivContainerLEFT100 {width:80%;margin-right:10%;margin-left:10%;margin-bottom:110px;text-align:left;}
.malemDivContainerLEFT100 h2 {font-size:23px;font-weight:normal; margin-top:0px;color:#cf6161;padding-bottom:0px;}
.malemBigGreenTitle {font-size:23px;font-weight:normal; margin-top:0px;color:#87a264;padding-bottom:0px;}

.malemBlackTitle {font-size:21px;font-weight:normal; margin-top:0px;color:#000;padding-bottom:0px;}
.malemBlackBigText {font-size:18px;font-weight:normal; margin-top:0px;color:#000;padding-bottom:0px;}
.malemdigit {vertical-align:middle;margin-right:0px;margin-bottom:10px}
.malemGreenBigTitle {font-size:23px;font-weight:normal; margin-top:0px;color:#87a264;padding-bottom:0px;}


.malemPinkOutlineBox {border:1px solid #cf6161;padding:25px;margin-top:50px;margin-bottom:50px}
.malemGreenOutlineBox {border:1px solid #87a264;padding:25px;margin-top:50px;margin-bottom:50px}

.malem3BoxContainer{display: -ms-flex; display: -webkit-flex; display: flex;}
.malem3Box1 {width:32%;margin-right:1.5%;border:1px solid #c5c5c5;float:left;margin-bottom:70px;align-items: stretch;background-color:#fff}
.malem3Box2 {width:32%;margin-right:0px;border:1px solid #c5c5c5;float:left;margin-bottom:70px;align-items: stretch;background-color:#fff}
.malem3BoxGreenTibleBand {width:96%;display:block;background-color:#87a264;color:#FFF;padding:2%;text-align:center;}
 
.malem3Box1 ul {
  list-style: none;
}

.malem3Box1 ul li::before {
  content: "\2022";
  color: #87a264;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

.malem3BoxV2 {width:32%;margin-right:1.5%;border:1px solid #c5c5c5;float:left;margin-bottom:70px;align-items:stretch;background-color:#fff;text-align:center}

.malem3BoxV3 {width:32%;margin-right:1.5%;border:1px solid #c5c5c5;float:left;margin-bottom:70px;align-items:stretch;background-color:#fff;text-align:center}
/* butterfly dot standard*/
.malem3BoxV3 ul {
   list-style: outside url(../_img/wingbullet.png);
}

/* soins corps*/
.malemsubtitlepink {font-size:20px;font-weight:normal;color:#cf6161;padding-bottom:0px;}
.malemsubtitlegreen {font-size:20px;font-weight:normal;color:#87a264;padding-bottom:0px;}

.malemSoinsTitleBoxPink {width:98%;display:block;background-color:#cf6161;color:#FFF;padding:1%;text-align:center;font-size:23px;}
.malemSoinsTitleBoxGreen {width:98%;display:block;background-color:#87a264;color:#FFF;padding:1%;text-align:center;font-size:23px;}
.malemRoseBath {background-color:#f5dfdf;color:#cf6161;padding:5px;border:1px solid #cf6161;font-size:18px;margin-bottom:15px; }
.malemGreenBath {background-color:#e7ece0;color:#87a264;padding:5px;border:1px solid #87a264;font-size:18px;margin-bottom:15px; }


.malemSoinsBoxFooterPink {width:99.25%;padding:0.5%;background-color:#f5dfdf; color:#cf6161;display:block;text-align:center;font-size:23px;}
.malemSoinsBoxFooterGreen {width:99.25%;padding:0.5%;background-color:#e7ece0; color:#87a264;display:block;text-align:center;font-size:23px;}

.malemBoxRight50 {width:49%;margin-right:2%;float:left;margin-bottom:0px;}
.malemBoxLeft50 {width:49%;float:left;}

/* content containers with footer image*/
/* soins chalet*/
 .malemNarrowDivContainerChalet {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/chalet-massage-soinscorps-facialFooter.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}
/* soins du corps*/
 .malemNarrowDivContainerSoinsCorps {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/soins-du-corps-footer.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}
/*massage*/
 .malemNarrowDivContainerMassages {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/massage-footer.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}
/*facial */
 .malemNarrowDivContainerFacial {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/facial-footer.jpg);background-position:center bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}
.malemBodyFacial {background-image:url(../_img/facial-footer.jpg);background-position:center bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}

/*a propos le loft */
.malemNarrowDivContainerLoft {width:80%;padding-right:10%;padding-left:10%;padding-bottom:50px;background-image:url(../_img/leloftfooter.jpg);background-position:center bottom;background-repeat:no-repeat;background-size:100%;text-align:center;}





/* STORE page specific */
.malemSectionTitlesContainer {width:98%;margin-left:1%;margin-right:1%}
.MalemSectionContainer {width:30%;text-align:center;float:left;margin-right:3%;margin-bottom:50px;}
.malemStoreSectionTitle a:link {font-size:24px;color:#87a264;margin-top:25px;}
.malemStoreSectionTitle a:visited {color:#87a264;}
.malemStoreSectionTitle a:hover {color:#e4a1a1;}


.malemStorePageTitle {font-size:26px;font-weight:normal; margin-top:50px;color:#87a264;padding-bottom:25px;}


.MalemProductContainer {width:30%;border:1px solid #e5e5e5;text-align:center;float:left;margin-left:1.5%;margin-right:1.5%;margin-bottom:50px;position:relative;}
.malemStoreImage {width:100%;margin-bottom:25px;}/*this one aslo triggers JS for modal enlargement */
.malemSectionImage {width:100%;margin-bottom:25px;} 
.malemStoreTitle {font-size:20px;color:#87a264;}
.malemProductInfos {width:90%;margin-left:5%;margin-right:5%}
.malemPrice {font-size:20px;color:#999;float:left; }
.malemCart {vertical-align: middle;float:right;margin-left:20px;margin-bottom:20px}
.malemView {vertical-align: middle;float:right;margin-right:5px;margin-bottom:20px}
  
  
  /*  STORE DESCRIPTION BOX the tooltip START */

.malemtooltip {
  position: absolute;
  top:0;
  left:0;
  display: inline-block;
}
 /*
.malemtooltip .malemtooltiptext2 {
  visibility: hidden;
  width:25vw;
  background-color: white;
  color: #000;
  text-align: left;border:1px solid #87a264;
  border-radius: 6px;
  padding: 10px;
  
  /* Position the tooltip */     /*
  position: absolute;
  z-index: 1;
  bottom:-300px;
  left: -15px;
  margin-left: 0px;
}
 */
.malemDesView .malemtooltiptext {
  visibility: hidden; /* Hidden by default */
  display:inline-block;
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding: 10px; 
  left: 0;
  top: 0;
  width: 110%; /* Full width */
  background-color:#fff;
   text-align: left;
   border:1px solid #87a264;
  border-radius: 6px;
} 
 /*  STORE DESCRIPTION BOX the tooltip START */
 
 .malemStoreSectionBannerSmall {width:60%;margin-left:20%;margin-right:20%;border-top:4px solid #e4a1a1;padding-top:25px;}
 
 /*  BLOG */
 .malemBlogContentContainer {width:100%;}
 .malemBlogContentContainer H2 {font-size:18px;font-weight:normal; color:#cf6161;padding-bottom:0px;padding-top:10px;}
 .malemBlogLogo {text-align:center;width:100%;margin-top:50px;margin-bottom:50px;}
  .malemBlogLogo img {width:auto;}
.malemBlogMenuContainer {width:13%;margin-right:2%;float:left;height:100%;}
 .malemBlogArticleContainer {width:70%;float:left;margin-left:0;margin-right:0;}
 .malemBlogTopImage {width:100%;margin-bottom:15px;}
 .malemBlogPageTitle {font-size:26px;font-weight:normal; margin-top:50px;color:#cf6161;padding-bottom:25px;}
 /*  menu styles */
 
.malemBlogMenuContainerMOBI {display:none;} 

.malemBlogMenuContainer {display:block;height:90vh;overflow:auto} 

.malemBlogMenuContainer UL {  list-style-type: none;margin:0;padding:0 ;}

.malemBlogMenuContainer li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
 
}

/* Change the link color on hover */
.malemBlogMenuContainer li a:hover {
  color: #cf6161;
}
.malemBlogMenuContainer li a.active {
 background-color:#a1b088;color:#000;}
 
 
.malemBlogMenuContainer li a:hover:not(.active) {
  color: #cf6161;
}

.malemBlogPhotoContainer {width:48%;margin-right:2%;margin-top:40px;float:left;}
.malemBlogTopVideoContainer {width:48%;margin-right:2%;margin-top:40px;float:left;}

.malemBlogBottomImage {width:100%;margin-bottom:0px;}
.malemCaption {font-size:16px; margin-bottom:40px;margin-top:15px;display:block;clear:both;}

.malemBlogVideoContainer {
    position: relative;
    padding-bottom: 56.10%;
    height: 0;
    overflow: hidden;
}
 /* youtube video container */
.malemBlogVideoContainer iframe,
.malemBlogVideoContainer object,
.malemBlogVideoContainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* contact page */
#malemmap {height:50%; min-height:400px;max-height:600px;}



.malemContactImg {float:left;width:33%;}
.malemContactContent {width:100%;margin-left:0;font-family:Arial, Helvetica, sans-serif;text-align:left;}
.malemContactSubTit {font-family:Arial, Helvetica, sans-serif;color:#87a264;font-size:24px;margin-bottom:35px;text-align:center;}
.malemContactAddressDiv {float:left;width:20%; font-size:14px;min-width:170px;margin-bottom:25px;margin-right:1%;padding-right:5px;border:1px solid #000;overflow:hidden;background-color:#fff;padding-bottom:10px; }
.malemContactAddressDivTitle {font-weight:bold;display:block;width:100%;background-color:#353535;color:#FFF;text-align:center;padding:5px;}
.malemContactAddressDivText {padding:10px;display:block;min-width:175px}
.malemContactAddressDivText a {color:#cf6161;}
.malemContactAddressDivText a:visited {color:#cf6161;}
.malemContactAddressDivText a:hover {color:#353535;}
.malemContactMailDiv {float:left;width:auto; font-size:14px;min-width:170px;margin-bottom:25px;border:1px solid #000;overflow:hidden; }
.malemContactMailDivTitle {font-weight:bold;display:block;width:100%;background-color:#353535;color:#FFF;text-align:left;padding:5px;}
.malemContactMailDivText {padding:5px;display:block;}
.malemContactMailDivText a {color:#cf6161;}
.malemContactMailDivText a:visited {color:#cf6161;}
.malemContactMailDivText a:hover {color:#353535;}
.malemContactMailDivContainer {float:none;clear:both;margin-top:25px;width:80%;}

.MalemPageContIconDiv {height:20px;float:left;}
.MalemPageContIcon {margin-top:1px;margin-right:5px;float:left;}
.MalemPageContText {margin-top:0px;margin-bottom:5px;float:left;width:auto;}


.malemContactContent input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
   border: 1px solid #353535;
    background-color: #f8f8f8;
}

.malemContactContent textarea {
  width: 100%;
  height: 175px;
  padding: 12px 20px;
  margin-top:5px;
  box-sizing: border-box;
  border: 1px solid #353535;
  background-color: #f8f8f8;
  font-size: 16px;
}

.MalemSubmitButton {
	padding:10px;border:1px solid #000;font-size:18px;color:#000;background-color:#ccc; float:right;margin-top:25px;
	}
		
.malemContactContent input:hover[type="submit"] {
background-color:#cf6161;
	color:#fff;	
}

.malemContactFormContainer {width:80%;float:left;margin-bottom:25px;margin-top:0px;}
.MalemContactMessageContainer {float:left;width:100%;font-size:16px;margin-left:0px;font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#87a264;}
.MalemContactFormInputContainer {float:left;width:100%;margin-right:0px;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#87a264;}

#malemFORMSUCCESScontainer {width:100%;margin-right:0;margin-left:0;font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#000;position:relative;z-index:-200;}
/* contact page END */

/* Massage page START */
.malemMassageTextBox {padding:25px;width:40%;float:left;background-color:#fff;}
.malemMassagePhotoBox {width:50%;float:right;}
.malemMassagePhotoBox img {height:auto;width:100%;position:relative;}
/* Massage page END */

/* FACIAL page END */
.malemFacialProductContainer {display:block;}
.malemFacialProductContainerMOBI {display:none;}