﻿/*******************************************************************************
* RESET
*******************************************************************************/

html, body, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend
 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
  background: transparent;
  font-size:100%;
  font-family: Arial, Helvetica;
	} 
	
table, caption, tbody, tfoot, thead, tr, th, td
{font-family: Arial, Helvetica;}

ol, ul {
	list-style: none;
}

/*******************************************************************************
* HELPERS
*******************************************************************************/

/* background repeat in IE7 */
.min-height {min-height:5px;}

/* Clearing floats with fluid div */
.colclear {clear: both;	height: 1px;	line-height:1%;}

/*  Clearing floats using a div already present */
.clearboth {clear: both;}

/* This piece of code is for clearing the floats without structural markup Don't modify it*/
.clearfix:after {content: "."; display: block; height: 0;	clear: both;	visibility: hidden;}
.clearfix {display: inline-table;	min-height:0px;}
.clr{display: inline-table;	min-height:0px; clear: both;	visibility: hidden; height: 0;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac*/

/*************************************************************
 html
*************************************************************/
body{-webkit-text-size-adjust:none;} 

img{max-width: 100%;}
div.wrapper{width:100%; margin:0 auto; text-align:center;}
div.mainHolder{max-width:1000px; width:100%; height:569px; margin:auto; position:relative; background-image:url(/lp/images/long/sm-mainHolder-bg-2014.jpg); background-repeat:no-repeat; background-position:center top; }
div#aj-logo{background-image:url(/lp/images/long/nouvelle-tag-left.png); background-repeat:no-repeat; width:176px; height:149px; position:absolute; left:0; top:11px; z-index:550; background-position:0 0;  background-size:100% auto;}
div#sm-logo{float:left; margin:35px 0 0 23px; }
div#avec-jmc{float:left; margin:35px 0 0 0;}
div.clear{clear:both;}
div.left-bg { background-image: url(/lp/images/long/landing-michelle-left.png); background-repeat: no-repeat; position: absolute; bottom: 0; height: 100%; width: 50%; left:0; background-position: left bottom;  background-size:100% auto;}
div.left-bg.image-cohen{background-image: url(/lp/images/long/landing-cohen-left.png);}
div.left-bg.image-eating-woman{background-image: url(/lp/images/long/landing-eating-woman-left.png);}
div.left-bg.image-cohen2{background-image: url(/lp/images/long/landing-cohen-left2.png);}

div.right-bg { background-image: url(/lp/images/long/landing-text-right.png); background-repeat: no-repeat;  position: absolute; bottom: 0; right: 0; height: 100%; width: 50%; background-position: right bottom; background-size:100% auto;}
div.right-bg2 { background-image: url(/lp/images/long/landing-text-right2.png); background-repeat: no-repeat;  position: absolute; bottom: 0; right: 0; height: 100%; width: 50%; background-position: right bottom; background-size:100% auto;}

div.form{background-color:#ffffff; border-left:4px solid #ff7b00; margin:0 auto; max-width:465px; width:auto; height:auto; z-index:500; position:relative; top:210px; box-shadow:0px 0px 20px rgba(171,171,171,0.5);}
#content{max-width:1000px; margin:0 auto;}
#content h1{font: bold 30px/38px arial; padding: 20px 0px; color:#242424; text-align:center;}
fieldset{border:0; width:98%; margin:auto;}
fieldset input{border:solid 1px #9598a0;margin-left:10px;}
fieldset input.text{width:70px;font-size:18px;height:18px;width:60px; outline:transparent;}
fieldset input[type=text]{width:70px;font-size:18px;height:18px;width:60px; outline:transparent; padding:3px; text-align:right; border:1px solid #94918c; border-radius: 3px; box-shadow:inset 1px 1px 3px rgba(0,0,0,0.2);}

div.form-con{width: 100%; margin-top: 0; padding:10px 0; border-bottom:1px solid #ecebe9;}
div.form-con-1{float:left; width:51%; color:#000000; font-weight:normal; font-size:1.3em; text-align:right; font-family:'Arial'; line-height:1.2em;}
div.form-con-2{float:left; width:49%; color:#000000; font-weight:normal; font-size:1.3em; text-align:left; font-family:'Arial'; line-height:100%;}
div.form-con-2 div span{font-size:0.8em !important;font-family:'Arial';}

div.gender-con{background-image:url(/lp/images/long/gender-icon-blue.png); background-repeat:no-repeat; background-position:96% center; margin-top:10px; }
div.height-con{background-image:url(/lp/images/long/height-icon-blue.png); background-repeat:no-repeat; padding:1.3em 0; background-position:96% center;}
div.weight-con{background-image:url(/lp/images/long/weight-icon-blue.png); background-repeat:no-repeat; background-position:96% center;}
div.age-con{background-image:url(/lp/images/long/age-icon-blue.png); background-repeat:no-repeat; padding-top:1.8em !important; background-position:96% center; margin-bottom:10px; }
.submit-btn-holder{position:absolute; bottom:-80px; left:0; width:100%; height:60px; padding-top:20px; background:url(/lp/images/long/landing-formshadow-2014.png) no-repeat right top; background-size:100% auto;}



.headerHolder{position:absolute; top:0px; left:0px; width:100%; height:87px;}
.headerHolder h1{text-align:left; margin:0px auto; width:350px; height:50px; overflow:hidden; background:url(/lp/images/long/landing-sm2014-logo.png); position:absolute; top:32px; left:18%; text-indent:-9999px;}
.headerHolder .jmcPic{width:125px; height:87px; background:url(/lp/images/long/landing-jmc-header.png) no-repeat 0 0; position:absolute; bottom:0; right:0;}
.headerHolder .tagline{width:32%; height:16px; background:url(/lp/images/long/landing-header-tagline.png) no-repeat left bottom; position:absolute; top:51px; left:18%; margin-left:355px; background-size:100% auto;}


div.form-last{border:none;}

/*Formulaire 1 etape */
#form-1 .male{margin-top:0;}
#form-1 .female{margin-top:5px;}
/*#form-1 .height{margin-top:48px;} */
#form-1 .height{margin-top:0;margin-bottom:0px;}
#form-1 .height{margin-top:0\0/;margin-bottom:0px;}
#form-1 .height{margin-top:0 !ie;margin-bottom:0px;}
#form-1 .height2{margin-bottom:0px;}


a.button { background-image: url(/lp/images/long/btn-jvmi.png); background-position: center top; background-repeat: no-repeat; max-width: 480px; max-height: 59px; width: 100%; height: 100%; position: relative; display: block; margin: auto; text-align: center; text-decoration: none; background-size: contain; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; }
a.button:hover{background-image:url(/lp/images/long/btn-jvmi-over.png); background-position:center top; background-repeat:no-repeat; max-width:480px; max-height:100%; width:100%; height:100%;position:relative; display:block; margin:auto; text-align:center; text-decoration:none;background-size: contain;}
#baseline{position:relative;top:40px;font-size:12px;color:#909090;clear:both;text-align:left;}
#baseline p{padding: 10px 0px;}
#baseline a{text-decoration:none;color:#909090;}
div#lowerblock{/*width:100%;*/ margin:0; padding:10px; background: #ffffff url(https://savoirmaigrir.fr/img_aj/JMC/bp/gradient_lp.gif) top left; position:relative; text-align:left;}
div#lowerblock div.rulesblock{-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border:solid 1px #e5e1e1; background:#edecec; padding:10px;}
div#lowerblock h1{font:bold 24px arial; color:#272727; text-align:center;}
div#lowerblock h3{font:bold 16px arial; color:#272727; text-align:left;}
div#lowerblock p{font:normal 15px arial; color:#909090; line-height:22px; padding-top:10px;}
div#lowerblock p.note{margin-top:10px; font: normal 11px arial; color:#909090; text-align:left;}
div#lowerblock p.note a{font: normal 11px arial; color:#909090;text-decoration:none;}
div#lowerblock p.note a:hover{text-decoration:underline;}
div#lowerblock div.rulesblock h2{font:bold 18px arial; color:#f79b36; padding:10px 0px;}
div#lowerblock div.rulesblock p{font:normal 14px arial; color:#595757; line-height:20px;}
div#lowerblock div.rulesblock ol.decimal {list-style-type:decimal; padding:0px; font:normal 14px arial; color:#595757; line-height:20px; }
div#lowerblock div.rulesblock ol li{padding:0px 0px 10px 10px; margin-left:20px;}
div.tv-screen {height: 225px; left: 7px; position: absolute; top: 6px; width: 400px;}
div.tv {background: url('https://savoirmaigrir.fr/img_aj/sm/v2/tv.jpg') no-repeat scroll 0 0 transparent; height: 267px; margin: 0 auto; position: relative; text-align: center;width: 414px;}

div.plus-con-left{position:relative; float:left; width:45%; padding-right:20%; background:#edecec url('/lp/images/long/landing-testimonial-michelle.png') no-repeat bottom right;  border-radius: 10px; border:solid 1px #e5e1e1; background-size:30% auto;}
div.plus-con-right{position:relative; float:left; padding-left:15px;  margin:0px; width:30%; /*height:300px;*/ vertical-align:middle!important;}
div.plus-con-right ul li a{font-size:14px;}

div.video_container {width:100%; position:relative; display:block; padding: 20px 10px; border-bottom: solid 1px #cccccc;}

div.video_left {position:relative; float:left; width:530px; vertical-align:middle;}
div.video_left iframe{height: 310px; }
div.video_right {position:relative; float:left; width: 430px; vertical-align:middle; padding:20px 0px 0px 20px; text-align:left;}
div.video_right h2{font: bold 20px/24px arial; padding: 5px 0px; color:#373737;}
div.video_right p{font: normal 14px/20px arial; padding: 5px 0px; color:#4f4f4f;}
div.video_right p.title{font: italic 16px/20px arial; padding: 5px 0px; color:#888888;}
div.video_right a{font: normal 14px/20px arial; color:#ff8820; text-decoration:none;}

/* mobile ----------- */
@media only screen and (max-width: 850px) {
div.plus-con-left{position:relative; float:left; width:65%; padding-right:0; background-image:none;}

.headerHolder h1{position:relative; top:32px; left:auto !important;}
.headerHolder .tagline{display:none;}
div.left-bg{float:none; display:none;}
div.right-bg, div.right-bg2{float:none; background-size:500px auto; background-position:93% bottom; width:100%;}

div.form{margin-left:20px;}

div.video_container {width:95%; position:relative; display:block; padding: 10px; border-bottom: solid 1px #cccccc;}
div.video_left {position:relative; float:left; width:60%; vertical-align:middle;}
div.video_right {position:relative; float:left; width: 35%; vertical-align:middle; padding:0px 0px 0px 10px; text-align:left;}
div.video_right h2{font: bold 20px/24px arial; padding: 5px 0px; color:#373737;}
div.video_right p{font: normal 14px/18px arial; padding: 5px 0px; color:#4f4f4f;}
div.video_right p.title{font: italic 16px/18px arial; padding: 5px 0px; color:#888888;}
div.video_right a{font: normal 14px/20px arial; color:#ff8820; text-decoration:none;}


}

@media only screen and (max-width: 767px) {
div.wrapper{margin-top:-16px;}
div#aj-logo{width:22%;}	
.headerHolder .jmcPic{display:none;}
div.left-bg{float:none; display:none;}
div.right-bg, div.right-bg2{float:none; display:none;}
div.form{margin:0 auto; background-size: contain; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-position:center top;}  	
div.plus-con-left{width:100%; float:none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border:solid 1px #e5e1e1; background:#edecec; /*padding:10px;*/}
div.plus-con-right{width:90%; float:none; margin-top:15px;}

div.video_left {position:relative; float:none; width:100%; vertical-align:middle;}
div.video_left iframe{height: 200px; }
div.video_right {position:relative; float:none; width: 100%; vertical-align:middle; padding:0px; text-align:left;}
div.video_right h2{font: bold 20px/24px arial; padding: 5px 0px; color:#373737;}
div.video_right p{font: normal 14px/18px arial; padding: 5px 0px; color:#4f4f4f;}
div.video_right p.title{font: italic 16px/18px arial; padding: 5px 0px; color:#888888;}
div.video_right a{font: normal 14px/20px arial; color:#ff8820; text-decoration:none;}

#baseline{text-align:center;}
}

@media only screen and (max-width : 480px) {

.headerHolder h1{width:220px; background-size:100% auto; background-repeat:no-repeat; background-position:center center; right:0;}
div.mainHolder{height:350px; background-position:center top;}
div.form-con{background-image:none !important;}
div.form{top:90px;}
div#aj-logo{width:120px; top:13px;}
}

@media only screen and (max-width : 359px) {
div#aj-logo{width:90px; top:14px;}
div.form{margin:0 auto;background-position:center top;}
div.form-con{width: 100%; margin-top: 0; padding:0.8em 0;}
div.form-con-1{float:left; width:51%; font-size:1.1em; text-align:right; line-height:1.6em;}
div.form-con-2{float:left; width:49%; font-size:1.1em; text-align:left; }
div.form-con-2 div span{font-size:0.85em !important;}
div.form-last{border:none;}
div.gender-con{background-image:none;}
div.height-con{background-image:none;}
div.weight-con{background-image:none;}
div.age-con{background-image:none;}
fieldset{padding-top:10px;}
div.plus-con-left{width:100%; float:none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border:solid 1px #e5e1e1; background:#edecec; /*padding:10px;*/}
div.plus-con-right{width:90%; float:none; margin-top:15px;}
}

