/*--------------------------------------------*/

.MyContent #MyHeader .green {
	color: #be0f34;
	font-family: ClarinsRegular,Clarins;
	font-size:20px;
}

.MyContent #MyHeader::after{
	display:none;
}

/*-----------------------------------------*/
@media only screen and (max-width:761px) {
.MyContent #MyContentInsideBox .InlineBlock img{
	max-width:95%;
}	
}

/*-----------------------------------------*/

.MyContent #MyGreenArguments .green-block {
  background-color: #FFF;
  border:5px solid;
  min-height:300px;
}

.MyContent #MyGreenArguments #red-box-picto{
	border-color:#fc4237;
	color:#fc4237;
}
.MyContent #MyGreenArguments #yellow-box-picto{
		border-color:#fcdd00;
		color:#fcdd00;
}
.MyContent #MyGreenArguments #orange-box-picto{
	border-color:#fd6b0d;
	color:#fd6b0d;
}

.MyContent #MyGreenArguments .green-block p.text {
	color: #000;
	text-align: left;
	font-size: 14px;
}

.MyContent #MyGreenArguments #red-box-picto .picto img{
	background-color:#fc4237;
	border-radius:24px;
	
}
.MyContent #MyGreenArguments #yellow-box-picto .picto img{
	background-color:#fcdd00;
	border-radius:24px;
}
.MyContent #MyGreenArguments #orange-box-picto .picto img{
	background-color:#fd6b0d;
	border-radius:24px;
}
.MyContent #MyGreenArguments #red-box-picto  p.text span::before{
	content:"• ";
	color:#fc4237;
}
.MyContent #MyGreenArguments #yellow-box-picto  p.text span::before{
	content:"• ";
	color:#fcdd00;
}
.MyContent #MyGreenArguments #orange-box-picto  p.text span::before{
	content:"• ";
	color:#fd6b0d;
}

/*-----------------------------------------*/
.MyContent #MyCurrentBox p{
	font-size:14px;
	max-width:950px;
}
@media only screen and (max-width:761px) {
.MyContent #MyCurrentBox {
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 0;
  width: calc(100% - 20px);
}
}
.MyContent #MyCurrentBox p.formula {
	padding: 0;
	margin-top: 30px;
	font-size:0px;
	color: #fd6b0d;
	vertical-align: middle;
	line-height:auto;
}
.MyContent #MyCurrentBox p.formula span.num {
  	border-radius:70px;
 	border: #fd6b0d 1px solid;
	width:140px;
	height:140px;
	line-height:140px;
	font-size:74px;
	display:inline-block;
	vertical-align:middle;
	padding-left:0;
	padding-right:0;
}
@media only screen and (max-width:761px) {
.MyContent #MyCurrentBox p.formula span.num {
  border: 1px solid #fd6b0d;
  border-radius: 55px;
  display: inline-block;
  font-size: 54px;
  height: 110px;
  line-height: 110px;
  padding-left: 0;
  padding-right: 0;
  vertical-align: middle;
  width: 110px;
}
}
.MyContent #MyCurrentBox p.formula span.text  {
	font-size: 14px;
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	line-height: 20px;
	padding-top: 0px;
	margin-left: 15px;
	color: #000;
	
	left:auto;
    right:auto;
	top:auto;
	position:relative;
	width:auto;
	 max-width: 300px;
}
@media only screen and (max-width:761px) {
.MyContent #MyCurrentBox p.formula span.text:last-child{
	margin-top:20px;
	text-align:center;
	display:block;
	margin-left:0;
	
	
}
}



.MyContent #MyCurrentBox p.formula span.text a {
		font-size: 11px!important;
	line-height: 14px!important;
	color: #000!important;
	font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid #EAEAEA;
	display: inline;
	line-height: 20px!important;

}
.MyContent #MyCurrentBox p.formula span.text a:hover {
	color: #be0f34!important;
	border-bottom: 1px solid #be0f34;
}
.MyContent #MyCurrentBox p.formula span.text  .orange{
	color: #fd6b0d;
}
.MyContent #MyCurrentBox p.formula span.num span.text {
  color: #fd6b0d;
  margin-left: 5px;
  margin-top: -15px;
  text-align:left;
  	display:inline-block;
}
@media only screen and (max-width:761px) {
.MyContent #MyCurrentBox p.formula span.num span.text {
  color: #fd6b0d;
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  margin-left: 0;
  margin-top: -10px;
  text-align: left;
}
}
.MyContent #MyCurrentBox p.formula span.black {
	padding-top: 0px;
	font-size: 55px;
	display: inline-block;
	vertical-align: top;
	color: #000;
	line-height: 140px;
	margin-left:10px;
	margin-right:10px;
}
@media only screen and (max-width:761px) {
.MyContent #MyCurrentBox p.formula span.black {
	line-height: 110px;
}
}
/*-----------------------------------------*/
.MyContent #MyContentInsideBox {
  background-color:#FFF;
  background-image: none!important;
  background-position: center top;
  margin-left: -375px;
  margin-top: 30px;
  padding-bottom:0px!important;
  padding-top:0px!important;
  text-align: center;
  width: 2000px;
  background-repeat:repeat;
}

@media only screen and (max-width:1249px) {
	.MyContent #MyContentInsideBox {
  margin-left: 0;
  width: 100%;
}
}
@media only screen and (max-width:1023px) {
	.MyContent #MyContentInsideBox {
		  background-image: none!important;
		  margin-left: 0;
		  padding-bottom: 30px;
		  padding-top: 30px;
		  width: 100%;
	}
}

@media only screen and (max-width:1023px) {
.MyContent #MyContentInsideBox {
  background-image: none;
  margin-left: 0;
  margin-top: 0;
  padding-bottom: 30px;
  padding-top: 0;
  width: 100%;
}
}

.MyContent #MyContentInsideBox .picto {
  float: right;
  margin-left: 10px;
  position: absolute;
}
.MyContent #MyContentInsideBox .InlineBlock {
	display: inline-block;
	max-width: 470px;
	width: calc(50% - 20px);
	margin: 10px;
	vertical-align: middle;
}
@media only screen and (max-width:1023px) {
	.MyContent #MyContentInsideBox .InlineBlock {
	  	background-image: none;
		width: calc(100% - 20px);
		margin: 10px;
	}
}

.MyContent #MyContentInsideBox h2 {
	color: #000;
}
.MyContent #MyContentInsideBox h2 span{
	display:inline-block;
}
.MyContent #MyContentInsideBox strong {
	color:#fd6b0d;
}

.MyContent #MyContentInsideBox ul li {
	margin-right:50px;
}
@media only screen and (max-width:1023px) {
	.MyContent #MyContentInsideBox ul li {
	margin-right:0px;
}
}
/*-----------------------------------------*/
.MyContent #MyClarinsBoxOwner {

}

/*-----------------------------------------*/
/*-----------------------------------------*/

.MyContent #MyInfosBlock {
  margin-top: -60px;
  padding-top: 120px;
}

@media only screen and (max-width:761px) {
.MyContent #MyInfosBlock {
 margin-top: 0px;
	padding:10px;
  	padding-top: 60px;
	width:calc(100% - 20px);
}
}
.MyContent  #MyInfosBlock h2 {
	color: #000;
	margin: 0;
	padding: 0;
	font-family: ClarinsRegular, Clarins;
	font-size: 40px;
	font-weight: normal;
	line-height: 1em;
	position: relative;
	display: inline-block;
	padding-bottom:15px;
	
}
@media only screen and (max-width:761px) {
.MyContent #MyInfosBlock  h2{
	padding-left:10px;
	padding-right:10px;
		font-size:40px;
}
}

.MyContent #MyInfosBlock p.text {
	font-size: 14px;
	display:block;
	padding:30px;
	margin-left: auto;
	margin-right: auto;
	max-width:600px;
}


/*-----------------------------------------*/
.MyContent #MyLaBonneEtoileBlock {
	 margin-top:60px;
  	text-align:right;
	max-width:1170px;
}
@media only screen and (max-width:1023px) {
	.MyContent #MyLaBonneEtoileBlock {
	 margin-top:0px;
}
}
.MyContent #MyLaBonneEtoileBlock img{
	width:60%;
	  max-width: 702px;
}
@media only screen and (max-width:1023px) {
.MyContent #MyLaBonneEtoileBlock img{
	width:100%;
	  margin-left: auto;
  margin-right: auto;
  display:block;
}
}

@media only screen and (max-width:761px) {
.MyContent #MyLaBonneEtoileBlock img {
  display: block;
  margin-left: -25%;
  margin-right: auto;
  width: 125%;
}
}
.MyContent #MyLaBonneEtoileBlock .FloatingBox{
	 left:40px;
	 top:50%;
	 -webkit-transform:translateY(-50%);
	 transform:translateY(-50%);
	 max-width:470px;
	 padding:40px;
	 width:calc(60% - 80px);
	 text-align:left;
	 
	 
}
@media only screen and (max-width:1023px) {
	.MyContent #MyLaBonneEtoileBlock .FloatingBox {
  left: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 920px;
  padding: 40px;
  position: relative;
  top: auto;
  transform: none;
  width: calc(100% - 100px);
}
}
@media only screen and (max-width:761px) {
.MyContent #MyLaBonneEtoileBlock .FloatingBox {
  left: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 920px;
  padding: 10px;
  position: relative;
  top: auto;
  transform: none;
  width: calc(100% - 40px);
  padding-bottom:40px;
}
}
.MyContent #MyLaBonneEtoileBlock .FloatingBox .citation{
	 font-family:ClarinsRegular, Clarins;
	 color:#fd6b0d;
	 font-size:35px;
	 line-height:35px;
	 padding-left:15px;
}
@media only screen and (max-width:761px) {
.MyContent #MyLaBonneEtoileBlock .FloatingBox .citation {
  font-size: 25px;
  line-height: 25px;
  padding-top: 50px;
}
}
.MyContent #MyLaBonneEtoileBlock .FloatingBox .citation::before {
  color: #fd6b0d;
  content: "“";
  font-size: 200px;
  height: 200px;
  line-height: 200px;
  opacity: 0.5;
  position: absolute;
  right: calc(100% - 20px);
  text-align: right;
  top: -50px;
}

@media only screen and (max-width:761px) {
.MyContent #MyLaBonneEtoileBlock .FloatingBox .citation::before {
  right: calc(100% - 60px);
}
}
.MyContent #MyLaBonneEtoileBlock .FloatingBox .citation .author{
	 font-family:ClarinsRegular, Clarins;
	 color:#000;
	 font-size:16px;
	 line-height:16px;
	 display:block;
	 padding-top:15px;
}
.MyContent #MyLaBonneEtoileBlock .FloatingBox .text{
	font-size:14px;
	 text-align:left;
	 line-height:20px;
}

/*-----------------------------------------*/
.MyContent #MyPrixClarinsBlock {
  background-image: url("img/la-bonne-etoile-fond.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  border-bottom: 2px solid #fd6b0d;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  max-width: 1170px;
  position: relative;
 
}

@media only screen and (max-width:761px) {
.MyContent #MyPrixClarinsBlock {
  background-position: left -8% bottom;
  background-size: 200% auto;
  padding-bottom: 35px;
}

.MyContent #MyGreenArguments .green-block{
	min-height: 350px;
}
}
.MyContent #MyPrixClarinsBlock img {
  display: block;
  margin: 20px auto;
}
@media only screen and (max-width:761px) {
.MyContent #MyPrixClarinsBlock img {
  display: block;
  margin: 20px auto;
  width: 90px;
}
}
.MyContent #MyPrixClarinsBlock a {
	font-size: 11px!important;
	line-height: 14px!important;
	color: #000!important;
	font-family: "Gotham SSm medium A", "Gotham SSm medium B", Gotham, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid #EAEAEA;
	display: inline;
}
.MyContent #MyPrixClarinsBlock .text-link {
	  display: block;
  margin: 0px auto;
  margin-bottom:20px;
}
.MyContent #MyPrixClarinsBlock a:hover {
	color: #be0f34!important;
	border-bottom: 1px solid #be0f34;
}

@media only screen and (max-width:1024px) {
	.MyContent #MyGreenArguments .green-block {
		min-height: 350px;
	}
}