﻿/* CSS Document */

.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
h2 { font: normal 22px Impact, Arial; color: #393535; text-align: center; }
h3 { font: normal 20px Impact, Arial; color: #393535; text-align: center; }
p.thin { font: normal 14px Trebuchet MS, Tahoma; color: #393535; text-align: center; }

.bonus_list li { list-style: none; padding: 10px 30px 10px 40px; position: relative; font: normal 14px arial; line-height: 20px; }
.check_mark { position: absolute; left: 0px; top: -3px; display: block; }
.mobile-title { background: #feedd5; margin: 0; font: bold 18px arial; color: #333333; padding: 20px 20px 0px 20px; }

.payment-left h1{font:bold 27px Arial; line-height:30px; margin-bottom:20px; }
.payment-left fieldset{position:relative; zoom:1; min-height:90px;}
.paystep1{display:block; position:relative; border:0px none; margin-bottom:20px;}
.paystep1 p {clear:both; padding:0px 0px 0px 50px !important; margin: 0 0 15px!important;}
.paystep1 p span.note{font-size:10px; color:#6b6b6b; display:block; width:200px;}
.paystep1 p label{display:inline-block; font-weight:bold; color:#565656;}

.paystep2{display:block; position:relative; height:90px; border:0px none; margin-bottom:1px; border-bottom:1px dotted #cfcfcf; text-shadow:0px 1px 0px #ffffff;}
.paystep2 .offer-radio{position:absolute; left:10px; top:40%; height:16px; width:16px;}
.paystep2.selected{background:url(/img/2014/offer-selected-bg.gif) repeat-x left center; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.paystep2 label{position:relative; top:0px; display:inline-block; padding-left:40px;}

.paystep2 label span.line1{font:bold 22px Arial; color:#5e5d5d;}
.paystep2 label span.line2{font:bold 16px Arial; color:#565656;}
.paystep2 label p{color:#7b7b7b;}

.img-offer{position:absolute; right:5px; top:3px;}

.selected {border:2px solid rgb(240, 105, 12) !important;}

.tableObForm{width:100%; font:normal 14px Arial; line-height:20px; color:#5e5d5d; margin:0;}
.tableObForm td{padding:5px 8px;height:25px;}
.tableObForm td.dotted{border-bottom:1px dashed #5e5d5d; padding-bottom:10px;}

.tableObForm td.c1{width:35%;}
.tableObForm td.c2{width:65%;}
.tableObForm td span.break{margin-right:10px; vertical-align:middle;}
.tableObForm .ifields{font:normal 14px Arial; border:1px solid #bdc7d8; padding:3px; width:20%;}
.ifields.sel{width:22%;}
.ifields.full{width:70%;} 

.sldr-frame{ border-radius:10px; width:100%; margin:0px auto 15px auto;}
.sldr-frame .sldr3{display:inline-block; text-align:center; width:32%; font-weight:bold; color:#000000; padding:5px 0;}
.sldr-frame .sldr4{display:inline-block; text-align:center; width:24%; font-weight:bold; color:#000000; padding:5px 0;}

.divide2{float:left; width:50%;}


#pSelect{padding:5px; margin:5px 0 0 25px; background-color:#f2f2f3; display:none;}
#pSelectb{padding:5px; margin:5px 0 0 25px; background-color:#f2f2f3; display:none;}

.ctr{text-align:center; margin:0 auto;}


.img-offer-small { display: none; }



.payment-sidebox{position:relative; margin:20px 0; padding:10px; background-color:#FAF6EA; border-radius:10px; border:1px solid #DFDFDF ;}

.payment-sidebox.bda{background:#FAF6EA url(http://savoir-maigrir.aujourdhui.com/img/payment/sm-payment-support_01.jpg) no-repeat right bottom;  background-size:90% auto;}
.mobtab{position:relative; min-height:115px; margin-bottom:5px; background:#FAF6EA url(http://savoir-maigrir.aujourdhui.com/img/payment/mobile-payment-box-bg.jpg) no-repeat right top; background-size:80% auto;}
.mobtab ul{padding-left: 10px; margin: 0px; list-style:none;}
.mobtab ul li{padding-bottom: 3px; line-height: 13px; font: normal 12px arial;}
h2.sideB{font:bold 20px Arial; color:#FF9900; text-align:center; margin-bottom:15px;}
h2.sideB strong{font-size:28px; color:#FF9900; display:block;}



.main_promo{background: url('https://savoir-maigrir.aujourdhui.com/img_aj/jmc/payment/main_promo_2017.jpg') no-repeat top left; height:369px;}
.main_promo h1{padding:120px 0 20px 320px; font:bold condensed 34px arial; color:#1e1e1e;}

.paystep2 label p{font-size:14px;}


/*select plan*/
ul.selectplan {margin:0; padding:0;}
ul.selectplan li{list-style:none; padding:0 5px 5px 15px; margin:5px 0; position:relative; display:block;vertical-align:middle; }
ul.selectplan li.spacer{margin: 0 30px 20px 30px; border-bottom: solid 1px #c4c4c4; height: 1px; padding-top:0;}
ul.selectplan li img{vertical-align:middle; margin:-20px 10px 10px 10px;}
ul.selectplan li span.dealtitle{font: bold 30px arial; color:#626262;}
ul.selectplan li span.dealsubtitle{font: bold 18px arial; color:#000;}
ul.selectplan li span.dealinfo{font: bold 16px arial;color:#58585a;}
ul.selectplan li span.dealinfo a {font: bold 16px arial;color:#28a168;}
ul.selectplan li span.dealprice{font: normal 14px arial; color:#58585a;}
ul.selectplan li label{margin:15px 0 5px 0; width:100%;}
ul.selectplan li span.dealinfo a{text-decoration:underline;}

.greenttext{color:#91df4e!important;}
.orangetext{color:#FF9900!important;}
.offer-radio { height: 16px; left: 10px; position: absolute; top: 40%; width: 16px; }
.tableObForm{width:100%; font:normal 14px Arial; line-height:20px; color:#5e5d5d; margin:0;}
.tableObForm td{padding:5px 8px;height:25px;}
.tableObForm td.dotted{border-bottom:1px dashed #5e5d5d; padding-bottom:10px;}

.disclaimer2 {color: #999999; font: normal 10px Arial; text-decoration: none; display: block;}

.paychoice{min-height:40px;}

h2.lefttitle{

background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 13%, rgba(240,240,240,1) 20%, rgba(254,254,254,1) 71%, rgba(254,254,254,1) 89%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(13%, rgba(247,247,247,1)), color-stop(20%, rgba(240,240,240,1)), color-stop(71%, rgba(254,254,254,1)), color-stop(89%, rgba(254,254,254,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 13%, rgba(240,240,240,1) 20%, rgba(254,254,254,1) 71%, rgba(254,254,254,1) 89%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 13%, rgba(240,240,240,1) 20%, rgba(254,254,254,1) 71%, rgba(254,254,254,1) 89%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 13%, rgba(240,240,240,1) 20%, rgba(254,254,254,1) 71%, rgba(254,254,254,1) 89%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 13%, rgba(240,240,240,1) 20%, rgba(254,254,254,1) 71%, rgba(254,254,254,1) 89%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fefefe', GradientType=0 );

font:bold 20px arial;padding: 6px 15px !important;text-shadow:0px 1px 0px #ffffff;
color:#252525 !important;
border-top: 1px solid #c4c4c4;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin:15px 0;
}
/*footer*/

#footer3{color:#9e9e9e; padding:30px 0;font: normal 14px arial; background:#565656;}
.footer_links {background:#f7f7f7; padding:30px 0;color:#636363; font:normal 14px/20px arial; }
.footer_links a{font: normal 14px arial; color:#636363; text-decoration:none; padding:0 10px;}
.footer_links a:hover{color:#3e3e3f; text-decoration:underline;}
p.note{font: normal 12px arial; color:#9e9e9e;}


h2.testipblock { font: bold condensed 24px arial; text-align: center; }
.testimonial_block h2 { border: none; background: none; font: bold 30px arial; color: #FF0000 !important; text-shadow: none; text-align: center; margin: 10px 0; padding: 0; }
.testimonial_block h3 { font: bold 20px arial; color: #626262; text-align: center; margin: 10px 0; padding: 0; }
.testimonial_block p.value { font: bold 30px arial; color: #FF0000; text-align: center; }
.testimonial_block p { font: normal 14px arial; }
    .testimonial_block p strong { font: bold 14px arial; }
    .testimonial_block p strong { font: bold 14px arial; }
        .testimonial_block p strong.red { font: bold 14px arial; color: #FF0000; }
    .testimonial_block p.value small { font: bold 20px arial; }
.testimonial_block img { margin: 0 0 5px 5px; }
hr { background: #ccc; margin-top: 20px; margin-bottom: 20px; border: 0; border-top-width: 0px; border: none; box-sizing: content-box; width: auto; height: 1px; color: #ccc; }

    hr.dark { border-top: none; color: #ccc; }
div.pull-right { position: relative; float: right; }
.payment_block2 ul { margin-left: 25px; font: normal 14px arial; color: #333; }

@media (min-width:1200px) {
.table-responsive { min-height: .01%; overflow-x: auto; }
 }



@media (max-width:1028px) {
    .payment-sidebox.bda{background-size:291px auto;}
    .mobtab{background-size:290px auto;}
    .jmc-left-img{position:absolute; left:-50px;}
    .jmc-left-img img{max-width:220px;}
}

@media (max-width:991px) {

}

@media (max-width:768px) {
    h3 { font: bold 14px Tahoma, Arial; color: #393535; text-align: center; }
}

@media (max-width:767px) {
.table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; }
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th { white-space: nowrap; }
.table-responsive > .table-bordered { border: 0; }
.table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > thead > tr > th:first-child { border-left: 0; }
.table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > thead > tr > th:last-child { border-right: 0; }
.table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > th { border-bottom: 0; }
.mobile-cheat { margin-top: 0; }

.mobile-title { background: #feedd5; margin: 0; font: bold 18px arial; color: #333333; padding: 20px 20px 0px 20px; }
.img-offer-special { position: absolute; max-width: 120px; top: -22px; left: 30%; }
.payment_block h2 { margin: 0 0 30px 0; }

  .img-offer-small { display: block; position: absolute; top: 5px; right: 5px; }
.paystep_special { min-height: 0; height: auto; }


    .main_promo{background: none; height:auto;}
.main_promo h1{padding:0; font:bold condensed 30px arial; color:#1e1e1e;}

h2{font: normal 22px 'Anton', sans-serif;}
.bonus_list {margin:0;padding:0 0 0 10px;;}
.bonus_list li {padding: 10px 10px 10px 40px;}
}

@media (max-width:480px) {
    .payment_block{margin:20px 0; background:#f6f6f6 url('https://savoir-maigrir.aujourdhui.com/img_aj/jmc/payment/payment_choose_titlebg.png') no-repeat top center; border-radius: 10px; padding: 10px 20px; background-size:100% auto;}
    .payment_block h2{font: bold 20px arial; color:#fff; text-shadow: 2px 2px 2px #3b3b3b; text-align:center; margin:0 0 50px 0;}
    h2.lefttitle { font: bold 18px arial; }
    ul.selectplan li img{vertical-align:middle; margin:0;}
    .payment_block2 { margin: 10px 0; background: #f6f6f6 url('https://savoir-maigrir.aujourdhui.com/img_aj/jmc/payment/payment_choose_titlebg_gray.png') no-repeat top center; border-radius: 10px; padding: 0; background-size: 100% auto; }
                                .payment_block2 h2 { font: bold 20px arial; color: #fff; text-shadow: 2px 2px 2px #3b3b3b; text-align: center; margin: 0 0 50px 0; }
                            .testimonial_block h2 { font: bold 22px arial; color: #FF0000; text-shadow: none; text-align: center; margin: 10px 0; padding: 0; }
                            .testimonial_block p.value { font: bold 20px arial; color: #FF0000; text-align: center; }
                                .testimonial_block p.value small { font: bold 16px arial; }
}

@media (max-width:420px) {
    .payment_block { margin: 20px 0; background: #f6f6f6 url('https://savoir-maigrir.aujourdhui.com/img_aj/jmc/payment/payment_choose_titlebg.png') no-repeat top center; border-radius: 10px; padding: 10px 20px; background-size: 500px auto; }
        .payment_block h2 { font: bold 20px arial; color: #fff; text-shadow: 2px 2px 2px #3b3b3b; text-align: center; margin: 0 0 50px 0; }
    h2.lefttitle { font: bold 18px arial; }
    .payment_block2 { margin: 10px 0; background: #f6f6f6 url('https://savoir-maigrir.aujourdhui.com/img_aj/jmc/payment/payment_choose_titlebg_gray.png') no-repeat top center; border-radius: 10px; padding: 0; background-size: 500px auto; }
        .payment_block2 h2 { font: bold 20px arial; color: #fff; text-shadow: 2px 2px 2px #3b3b3b; text-align: center; margin: 0 0 50px 0; }
    .testimonial_block h2 { font: bold 22px arial; color: #FF0000; text-shadow: none; text-align: center; margin: 10px 0; padding: 0; }
    h2.lefttitle { font: bold 18px arial; }
    .testimonial_block p.value { font: bold 20px arial; color: #FF0000; text-align: center; }
        .testimonial_block p.value small { font: bold 16px arial; }
}

@media handheld, only screen and (max-width: 414px) {
    .img-offer-small { width: 37px; height: 37px; }
    .paystep2 label span.line1 { font: bold 14px arial; }

}

@media handheld, only screen and (max-width: 360px) {
    .img-offer-small { width: 37px; height: 37px; }
    .paystep2 label span.line1 { font: bold 14px arial; }

}

@media handheld, only screen and (max-width: 320px) {
    .img-offer-small { width: 37px; height: 37px; }

    .visible-320 { display: block; }
}


