﻿ /*new header 2014*/
body{background:url('https://savoir-maigrir.aujourdhui.com/img/payment/body_bg-118.gif') repeat-x top left; text-align:left; margin:0px; padding:0px; font:normal 13px arial; color:#1e1e1e; line-height:18px;}
body, h1, h2, h3, h4, h5, h6, p, form, fieldset {
    margin: 0;
    padding: 0;
}
.container { width: 100%; }
.wrap945{width:945px; padding:0px; margin:0px auto;}    
div.header2014r{width:945px; height:96px; padding:0px; margin:0px; text-align:left;}
div.header2014 {
    background: url("https://savoir-maigrir.aujourdhui.com/img/payment/sm-header-2015-v2.jpg") no-repeat scroll left top rgba(0, 0, 0, 0);
    height: 96px;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 945px;
}
.header-web{display:block;}
.header-mobile{display:none;}

div.col_left{width:62%; position:relative; float:left; padding-right:10px; border-right: solid 1px #eeeeee;}
div.col_right{width:33%; position:relative; float:left; padding-left:10px;}
div.col_left h1{font: bold 38px arial; padding: 0 0 10px 0; color:#000000;}
div.col_left p{padding: 10px 0; color:#565656; font: normal 14px/18px arial;}
p.main_img {text-align:center; margin:0 auto; padding:10px 0; border-top: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee;}
div.col_left img, div.col_right img{width:100%}
div.col_left p.teaser{font: bold 16px arial; color:#000000;}
div.col_left a.slant {font: italic 17px arial; color:#0088c3;}
.ctr{text-align:center; margin:0 auto!important;}
h2.sub{font: bold 18px arial; color:#000000;}
h3.subtitle{background:#242424; font: bold 11px arial; color:#ffffff; padding: 5px; display:inline-block;}
h3.divider{background: #242424; height:1px; display:block; width:100%}
div.col_right hr{margin:10px 0; border:solid 1px #eeeeee; height:1px;}
div.otherarticle_container{width:100%; padding:10px 0;}
div.otherarticle{width:18%; min-height:200px; position:relative; float:left; background:#f6f6f6; padding-right: 5px; border-right: solid 1px #e8e8e8;}
div.otherarticle img{width:100%;}
div.otherarticle p{padding: 5px; font: bold 11px arial; }
div.otherarticle a{font: bold 11px arial; text-decoration:none; color:#565656;}
div.otherarticle a:hover{text-decoration:underline;} 
.padding_left {padding-left:5px;}
.last {border:none!important;}

#features{margin-top:25px; position:relative;}
ul.flexifeatures{list-style:none; margin:0; padding:0; }
ul.flexifeatures li{float:left; width:15%; text-align:center; margin-right:1%;}
ul.flexifeatures li.plus{width:4%; padding:30px 0px; background:transparent url(https://www.savoirmaigrir.fr/img_aj/jmc/2014/feature-plus.png) no-repeat center 50%; }

.yellowbg{background-color: #ffecc4}
.linebg{background-color: #ffffff;border:1px solid #d4d4d4; box-shadow:0px 2px 0px #b2b2b2;}
.offside{padding:15px; margin:0;}
.radius-all{border-radius:8px;}

div.flexbox{position:relative;}
div.flexbox .thb{margin-bottom:10px;}
div.flexbox .thb img{display:block; width:100%;}
div.flexbox .desc{margin:0;}
div.footer{background:#565656; padding:10px 0;}
div.footercontent { font: normal 10px arial; color:#999999;}

/*added styles for video*/
.minisite-vid-l2 { margin: 0; position: relative; text-align: center; }
.minisite-vid-l2 .vid-shaper { display: block; width: 100%; }
.minisite-vid-l2 .l2-vids { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; }
/*added styles for video*/

@media handheld, only screen and (max-width: 945px) {
    .wrap945 { width: 100%; padding: 0px; margin: 0px auto; }
    div.header2014r{width:100%; height:auto; padding:0px; margin:0px; text-align:left;}
     .header-web {width:100%;}
}

@media handheld, only screen and (max-width:900px) {
div.col_left{width:52%; position:relative; float:left; padding-right:10px; padding-left:10px;border-right: solid 1px #eeeeee;}
div.col_right{width:43%; position:relative; float:left; padding-left:10px;}
div.otherarticle { background: none repeat scroll 0 0 #f6f6f6; border-right: 1px solid #e8e8e8; float: left; min-height: 200px; padding-right: 5px; position: relative; width: 44%; }
div.otherarticle img{ width:60%; margin:0 18%; text-align:center;}
div.col_left h1{margin:0 10px;}
    div.footer{background:#565656; padding:10px!important;}
}


@media handheld, only screen and (max-width: 768px) {  
    div.header2014r{width:100%; height:auto; padding:0px; margin:0px; text-align:left;}
    div.header2014r img{width:100%; height:auto;}
    div.col_left img, div.col_right img{width:100%}
    div.otherarticle { background: none repeat scroll 0 0 #f6f6f6; border-right: 1px solid #e8e8e8; float: left; min-height: 100px; padding-right: 5px; position: relative; width: 100%; }
        div.otherarticle a { color: #565656; float: left; font: bold 11px arial; position: relative; text-decoration: none; width: 100px; padding-right:20px;}
        div.otherarticle p { float: left; font: bold 11px arial; padding: 5px; position: relative; width: 200px; }
        div.otherarticle p a { width: 200px; }
    div.col_left h1 { font: bold 30px/32px arial; }
}

@media handheld, only screen and (max-width: 640px) {
         .header-web{display:none;}
    .header-mobile{display:block; width:445px!important}

}

@media handheld, only screen and (max-width: 639px) {
     .header-web{display:none;}
    .header-mobile{display:block; width:100%!important;}
    div.col_left{width:90%; position:relative; float:none; padding: 0 5%; border-right: none;}
div.col_right{width:90%; position:relative; float:none; padding: 0 5%; }
        div.otherarticle a { color: #565656; float: left; font: bold 12px arial; position: relative; text-decoration: none; width: 100px; }
        div.otherarticle p a { width: 300px; }
}

@media handheld, only screen and (max-width: 480px) {
     .header-web{display:none;}
    .header-mobile{display:block; width:100%!important;}
    div.col_left{width:90%; position:relative; float:none; padding: 0 5%; border-right: none;}
div.col_right{width:90%; position:relative; float:none; padding: 0 5%; }
        div.otherarticle a { color: #565656; float: left; font: bold 12px arial; position: relative; text-decoration: none; width: 100px; }
        div.otherarticle p a { width: 300px; }
}
@media handheld, only screen and (max-width: 479px) {
    div.otherarticle {min-height:50px;}    
    div.otherarticle a { color: #565656; float: left; font: bold 12px arial; position: relative; text-decoration: none; width: 100px; }
        div.otherarticle p a { width: 200px; }
        body{background:none!important;}

}
@media handheld, only screen and (max-width: 360px) {
    div.otherarticle {min-height:50px;}    
    div.otherarticle a { color: #565656; float: left; font: bold 12px arial; position: relative; text-decoration: none; width: 100px; }
      div.otherarticle p { width: 180px; }
        div.otherarticle p a { width: 180px; }
        body{background:none!important;}

}


@media handheld, only screen and (max-width: 320px) {
    div.otherarticle p { float: left; font: bold 11px arial; padding: 5px; position: relative; width: 150px; }
    div.otherarticle p a { width: 150px; }

}