/*------------------------------------------------------------------------------
Rest CSS
------------------------------------------------------------------------------*/

#area-to-watch {
    height: 800px;
    overflow: auto;
}

.container a:focus, .container a:active, .container a:hover {
    text-decoration: none;
}

.container * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
  Desktop css
----------------------------------------------------------------------------- */

.intro-box {
    padding: 115px 122px 30px 102px;
    color: #ffffff;
}

.intro-box h1 {
    font-size: 62px;
    margin: 20px 0px 0px 0px;
    opacity: 0;
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
    text-transform: uppercase;
}

.header-content span.sec-1, .header-content p.sec-1, .header-content h1.sec-1 {}

.intro-box.inview h1 {
    opacity: 0;
    animation: slideInDown 2s 0.5s forwards;
}

.intro-box p {
    margin-bottom: 0px;
}

.intro-box p.fnt_type_book {
    opacity: 0;
    font-size: 22px;
    line-height: 24px;
    margin: 16px 0px 31px 0px;
    animation: slideInDown 2s 1s forwards;
}

.intro-box p.fnt_type_bold {
    font-size: 24px;
    opacity: 0;
    animation: slideInDown 2s 1.5s forwards;
}

.intro-box.inview p.sec-1 {}

.circle-text-box {
    display: inline-block;
    background: #fff;
    border-radius: 20px;
    padding: 5px 15px;
    color: #2099e8;
    font-size: 15px;
}

.intro-box.inview .circle-text-box {
    opacity: 0;
    animation: slideInDown 2s 0s forwards;
}


/**/

.question-box {
    background: #fff 100% no-repeat;
    height: auto;
    padding: 80px;
    padding-top: 50px;
    position: relative;
}

.question-box {
    display: inline-block;
    width: 100%;
}

.question-box .circular {
    width: 203px;
    height: 202px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background: url(../images/visuel_question.png) no-repeat;
    box-shadow: 0 0 8px rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 1);
}

.border_blue {
    padding: 13px;
    float: left;
    margin: 70px 0px 0px 0px;
    display: inline-block;
    border-radius: 50%;
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    opacity: 0;
}

.border_blue .view {
    -webkit-animation: fadeIn 6.5s 2s;
    animation: fadeIn 6.5 2s;
    opacity: 1;
}

.question-box h2 {
    opacity: 0;
    color: #209ce9;
    font-size: 48px;
    line-height: 62px;
    text-align: left;
    padding-left: 24px;
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    opacity: 0;
}

.question-box h2.view {
    animation: slideInDown 2s ;
    opacity: 1;
}

.question-box p {
    display: inline-block;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    width: 100%;
    /*! padding: 120px 0px 0px 310px; */
    opacity: 0;
}

.question-box p.view {
    animation: slideInDownB 1s 1s forwards;
    opacity: 0;
    width: 936px;
}

.question-box .inner-wrapper {
    width: 1031px;
    margin: 25px;
    position: relative;
}

.visuel_question {
    position: absolute;
    top: 224px;
    left: 200px;
    border-radius: 50%;
    -webkit-box-shadow: 1px 1px 10px 3px rgba(204, 204, 204, 1);
    -moz-box-shadow: 1px 1px 10px 3px rgba(204, 204, 204, 1);
    box-shadow: 1px 1px 10px 3px rgba(204, 204, 204, 1);
    opacity: 0;
}

.view .visuel_question {
    -webkit-animation: fadeIn 6.5s 1s forwards;
    animation: fadeIn 6.5s 1s forwards;
    opacity: 0;
}


.modal-assu-invest {
    width: 90%;
    height: auto;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 89px;
}

.constituer-capital{
  width: 347px;
  height: 198px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-arbitrage-ponctuel.png); 
  display: inline-block;
  padding: 67px 50px 50px 101px;
}


.titre-vignette {
    width: 144px;
    position: absolute;
    /*left: 17%;
    top: 50%;*/
    text-align: center;
    /*transform: translate(-17%, -50%);*/
}


.titre-vignette p {
    width: 176px;
    color: #fff;
}

/*.titre-vignette img:hover {
  width: 34px;
  height: 34px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  cursor: pointer;
}*/



/*.titre-vignette img {
  width: 34px;
  height: 34px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png);
}

.titre-vignette img:hover {
  width: 34px;
  height: 34px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
}*/



.btn-container{
 width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -101px;
  margin-top: -67px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 153px;
  cursor: pointer;
}

.btn-container:hover{
  width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -101px;
  margin-top: -67px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 153px;
  cursor: pointer;
}



.btn-container-2{
 width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -90px;
  margin-top: -67px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 159px;
  cursor: pointer;
}

.btn-container-2:hover{
  width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -90px;
  margin-top: -67px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 159px;
  cursor: pointer;
}



.btn-container-3{
 width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -56px;
  margin-top: -68px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 153px;
  cursor: pointer;
}

.btn-container-3:hover{
  width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -56px;
  margin-top: -68px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 153px;
  cursor: pointer;
}



.btn-container-4{
 width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -47px;
  margin-top: -68px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 153px;
  cursor: pointer;
}

.btn-container-4:hover{
  width: 347px;
  height: 198px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  margin-left: -47px;
  margin-top: -68px;
  margin-right: 0px;
  padding-top: 92px;
  padding-left: 153px;
  cursor: pointer;
}







.contenu-popin {
    width: 100%;
    height: 228px;
    padding-top: 30px;
    padding-left: 16px;
    text-align: left;
}

.contenu-popin h3 {
   margin-bottom: 13px; 
   font-size: 17px;
   color: #209ce9;
}

.contenu-popin span {
    /*width: 49%;
    display: inline-block;*/
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

.contenu-popin img {
   margin-right: 25px;
   margin-top: 0px; 
}



.valoriser-capital{
  width: 347px;
  height: 198px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-arbitrage-progressif.png); 
  display: inline-block;
  padding: 67px 50px 50px 91px;
}


.titre-vignette-2 {
    width: 144px;
    position: absolute;
    /*left: 17%;
    top: 50%;*/
    text-align: center;
    /*transform: translate(-17%, -50%);*/
}



.titre-vignette-2 p {
color: rgb(255, 255, 255);
width: 174px;
}

.titre-vignette-2 img:hover {
  width: 34px;
  height: 34px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  cursor: pointer;
}


.contenu-popin-2 {
    width: 100%;
    height: 228px;
    padding-top: 30px;
    padding-left: 16px;
    text-align: left;
}

.contenu-popin-2 h3 {
   margin-bottom: 13px; 
   font-size: 17px;
   color: #209ce9;
}

.contenu-popin-2 span {
    /*width: 53%;
    display: inline-block;*/
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

.contenu-popin-2 img {
   margin-right: 25px;
   margin-top: 0px; 
   /*vertical-align: middle;*/
}


.completer-revenus{
  width: 347px;
  height: 198px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-repartition-constante.png); 
  display: inline-block;
  padding: 67px 50px 50px 55px;
}


.titre-vignette-3 {
    width: 242px;
    position: absolute;
    /*left: 17%;
    top: 50%;*/
    text-align: center;
    /*transform: translate(-17%, -50%);*/
}


.titre-vignette-3 p {
color: rgb(255, 255, 255);
width: 242px !important;;
text-align: center;
margin-left: 27px !important;
}


.titre-vignette-3 img:hover {
  width: 34px;
  height: 34px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  cursor: pointer;
}



.contenu-popin-3 {
    width: 100%;
    height: 228px;
    padding-top: 30px;
    padding-left: 16px;
    text-align: left;
}

.contenu-popin-3 h3 {
   margin-bottom: 13px; 
   font-size: 17px;
   color: #209ce9;
}

.contenu-popin-3 span {
    /*width: 53%;
    display: inline-block;*/
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

.contenu-popin-3 img {
   margin-right: 25px;
   margin-top: 0px; 
   /*vertical-align: middle;*/
}



.cadre-fiscal{
  width: 347px;
  height: 198px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-capitalisation-dynamique.png); 
  display: inline-block;
  padding: 67px 50px 50px 55px;
}


.titre-vignette-4 {
    width: 242px;
    position: absolute;
    /*left: 17%;
    top: 50%;*/
    text-align: center;
    /*transform: translate(-17%, -50%);*/
}


.titre-vignette-4 p {
color: rgb(255, 255, 255);
width: 242px !important;;
text-align: center !important;;
}


.titre-vignette-4 img:hover {
  width: 34px;
  height: 34px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  cursor: pointer;
}



.contenu-popin-4 {
    width: 100%;
    height: 228px;
    padding-top: 30px;
    padding-left: 16px;
    text-align: left;
}

.contenu-popin-4 h3 {
   margin-bottom: 13px; 
   font-size: 17px;
   color: #209ce9;
}

.contenu-popin-4 span {
    /*width: 53%;
    display: inline-block;*/
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

.contenu-popin-4 img {
   margin-right: 25px;
   margin-top: 0px; 
   /*vertical-align: middle;*/
}



.transmettre-capital{
  width: 347px;
  height: 198px;
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/image-transmettre-votre-capital.png);
  display: inline-block;  
 padding: 68px 50px 50px 67px;
}


.titre-vignette-5 {
    width: 211px;
    position: absolute;
    /*left: 17%;
    top: 50%;*/
    text-align: center;
    /*transform: translate(-17%, -50%);*/
}


.titre-vignette-5 p {
    color: rgb(255, 255, 255);
    width: 176px;
}


.contenu-popin-5 {
    width: 608px;
    height: 196px;
    padding-top: 30px;
    padding-left: 39px;
}

.contenu-popin-5 h3 {
   margin-bottom: 13px; 
   font-size: 17px;
   color: #209ce9;
}

.contenu-popin-5 span {
    width: 53%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

.contenu-popin-5 img {
   margin-right: 25px;
   margin-top: 0px; 
   vertical-align: middle;
}





.advantages-box {
    padding: 94px 95px 8px 95px;
    background-color: #f7fbfc;
    background-size: 100% 100%;
}

.advantages-box h2 {
    opacity: 0;
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}

.advantages-box.view h2 {
    animation: fadeInUp 1s 2s;
    opacity: 1;
}

.advantages-box h2 {
    text-align: left;
    font-size: 48px;
    line-height: 62px;
    color: #209ce9;
    margin-bottom: 25px;
    padding-left: 10px;
}


.advantages-box p {
    display: inline-block;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    margin-left: 11px;
}


.image-euro-1{
width: 52px;
height: 52px;
background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/picto-euro-1-black.png);
display: inline-block;
vertical-align: middle;
margin-top: 5px;
}


.image-euro-2 {
width: 82px;
height: 52px;
background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/picto-euro-2-noir.png);
display: inline-block;
vertical-align: middle;
margin-top: 5px;
}

.lien-fonds{
 padding-top: 0px !important;
 padding-bottom: 0px !important;  
}

.lien-unites{
 padding-top: 0px !important;
 padding-bottom: 0px !important;  
}



.adv_box {
    text-align: center;
    border: 2px solid #ffffff;
    border-radius: 2px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.adv_box .adv_box_white_ecran {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.adv_box.first_box {
    opacity: 0;
    z-index: 100;
}

.adv_box.second_box {
    opacity: 0;
}

.adv_box.third_box {
    opacity: 0;
    z-index: 100;
}

.adv_box.view.first_box {
    opacity: 1;
    -webkit-animation: fadeInUp 2s;
    animation: fadeInUp 2s;
}

.adv_box.view.second_box {
    opacity: 1;
    -webkit-animation: fadeInUp 2s;
    animation: fadeInUp 2s;
}

.adv_box.view.third_box {
    opacity: 1;
    -webkit-animation: fadeInUp 2s;
    animation: fadeInUp 2s;
}

.adv_box:last-child {
    /*margin-bottom: 0px;*/
}

.adv_box h3 {
    font-size: 24px;
    line-height: 30px;
    color: #ffffff;
    padding: 20px 0px 29px;
    z-index: 100;
    position: relative;
}

.adv_box .box-hidden-content {
    display: none;
    color: #000000;
    padding: 0px 20px 35px 20px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    z-index: 100;
    position: relative;
}

.adv_box .graph-ico, .adv_box .cal-ico, .adv_box .tick-ico {
    display: inline-block;
    z-index: 100;
    position: relative;
}

.adv_box .plus-ico {
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

.opened_box {
    background: #ffffff;
}

.opened_box h3 {
    color: #2491ee;
}

.x-icon {
    color: #000000;
    border-color: #000000;
}

.plans-box {
    padding: 50px 139px 50px 85px;
    background-color: #ffffff;
    background-size: 100% 100%;
    overflow: hidden;
    text-align: center;
}

.plans-box h3 {
    text-align: center;
    color: #209ce9;
    font-size: 48px;
    line-height: 62px;
    margin-bottom: 40px;
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    opacity: 0;
}

.plans-box.view h3 {
    animation: fadeInUp 2s;
    opacity: 1;
}

.plans-box .vert-box-container {
    width: 276px;
    border: 2px solid #1fbbef;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    padding: 60px 10px 35px 10px;
    background: rgba(30, 192, 240, 0.05);
    border-radius: 2px;
    float: left;
}

.plans-box .vert-box-container.first_col h4, .plans-box .vert-box-container.second_col h4, .plans-box .vert-box-container.third_col h4 {
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    opacity: 0;
}

.plans-box .vert-box-container.view.first_col h4, .plans-box .vert-box-container.view.second_col h4, .plans-box .vert-box-container.view.third_col h4 {
    animation: fadeInUp 1s 2s;
    opacity: 1;
}

.vert-box-container p.first_p, .vert-box-container .second_col p.first_p, .vert-box-container .third_col p.first_p {
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
    opacity: 0;
}

.vert-box-container.view p.first_p, .vert-box-container.view .second_col p.first_p, .vert-box-container.view .third_col p.first_p {
    animation: fadeInUp 1s 3s;
    opacity: 1;
}

.vert-box-container p.second_p, .vert-box-container.second_col p.second_p, .vert-box-container.third_col p.second_p {
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 4s;
    transition-delay: 4s;
    opacity: 0;
}

.vert-box-container.view p.second_p, .vert-box-container.view.second_col p.second_p, .vert-box-container.view.third_col p.second_p {
    animation: fadeInUp 1s 4s;
    opacity: 1;
}

.vert-box-container a.btn_1, .vert-box-container.second_col a.btn_2, .vert-box-container.third_col a.btn_3 {
    transition: all ease-in-out .5s;
    -webkit-transition-delay: 5s;
    transition-delay: 5s;
    opacity: 0;
}

.vert-box-container.view a.btn_1, .vert-box-container.view.second_col a.btn_2, .vert-box-container.view.third_col a.btn_3 {
    animation: fadeInUp 3s 5s;
    opacity: 1;
}

.plans-box .vert-box-container:last-child {
    margin-right: 0px;
}

.btn-blue {
    background: #3498db;
}

.btn-blue.btn-embossed {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #1686e7;
    border-bottom: 3px solid #1686e7;
    color: #ffffff;
    font-size: 16px;
    line-height: 22px;
    padding: 17px 41px;
    text-decoration: none;
    display: inline-block;
    margin-top: 39px;
}

.btn-blue.btn_2 {
    margin-top: 33px;
}

.btn-blue.btn_3 {
    margin-top: 30px;
}

.sep {
    display: inline-block;
    height: 1px;
    width: 70px;
    background-color: #b4e8f9;
    margin: 12px 0px;
}

.vert-box-container h4 {
    color: #1ec0f0;
    font-size: 22px;
    line-height: 24px;
    padding-bottom: 40px;
}

.vert-box-container p {
    color: #999999;
    font-size: 16px;
    line-height: 18px;
}

.vert-box-container p sup {
    font-size: 7px;
}

.tabslist-box {
    padding: 50px 95px 70px 110px;
    background-color: #2199e8;
    background-image: url(../images/grad.png);
    background-size: 100% 100%;
    text-align: left;
    position: relative;
}

.tabslist-box h3 {
    color: #ffffff;
    font-size: 48px;
    line-height: 62px;
    margin-bottom: 30px;
}


.disposer-capital-container{
width: 100%;
display: inline-block;
height: auto;
margin-left: 0px;
}

.optimiser-rachat{
width: 47%;
height: auto;
display: inline-block;
background-color: rgb(247, 251, 252);
margin-right: 33px;
text-align: left;
padding: 25px 64px 86px 46px;
}

.optimiser-rachat img{
margin-bottom: 25px;
}

.optimiser-avances {
    width: 45%;
    height: auto;
    display: inline-block;
    background-color: rgb(247, 251, 252);
    text-align: left;
    padding: 25px 64px 86px 46px;
}

.optimiser-avances img {
margin-bottom: 25px;
}

.en-savoir-plus {
color: rgb(255, 255, 255);
text-align: left;
display: inline-block;
width: 100%;
} 

.savoir-plus-gauche {
width: 40%;
display: inline-block;
margin-right: 60px;
height: auto;
vertical-align: middle;
}

.hr-savoir-plus{
 display: inline-block;
border-right: 1px solid rgb(220, 223, 224);
width: 1px;
height: 300px;
vertical-align: middle;
margin-right: 90px;   
}

.savoir-plus-droite{
 width: 40%;
display: inline-block;
height: 286px;
vertical-align: middle;   
}


.hr-savoir-plus-mobile{
display: none;
}

.text-mention-pub {
    font-size: 15px !important;
    text-align: right;
}




/*tabs*/


/* Tabs Start */

.container-tabs {
    width: 100%;
    margin: 0 auto;
}

.tabs {
    background: #fff;
    position: relative;
    margin-bottom: 0px;
}

.tab-btns>input, .tab-btns>span {
    width: 368px;
    height: 76px;
    line-height: 76px;
    margin-right: 10px;
    position: absolute;
    top: 0;
    font-size: 24px;
}

.tab-btns>input {
    cursor: pointer;
    filter: alpha(opacity=0);
    opacity: 0;
    position: absolute;
    z-index: 99;
}

.tab-btns>span {
    background: #f0f0f0;
    text-align: center;
    overflow: hidden;
}

.tab-btns>input:checked+span {
    background: #fff;
}

.tab-btns>input:checked+span, .tab-btns>input:hover+span {
    color: #3498DB;
}

#tab-1, #tab-1+span {
    left: 0;
    top: 0vh;
}

#tab-2, #tab-2+span {
    left: 378px;
    top: 0vh;
}

.tab-content {
    padding: 0px 20px 20px;
    width: 100%;
    min-height: 140px;
}

.tab-content section {
    width: 100%;
    display: none;
}

.tab-content section h1 {
    margin-top: 15px;
    font-size: 100px;
    font-weight: 100;
    text-align: center;
}


/*.push-fond-invest {
    width: 1060px;
    height: 200px;
    background-color: #ffffff;
    position: absolute;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.04);
    padding: 25px;
}*/


.push-fond-invest {
    width: 80%;
    height: auto;
    background-color: #ffffff;
    position: absolute;
    box-shadow: 6px -6px 21px 2px rgba(0,0,0,0.04);
    padding: 25px;
    transform: translate(3%, 0%);
    margin-top: 25px;
}


.text-push-invest p {
 width: 100%;
display: inline-block;
margin-top: 14px;
margin-left: 0px;
margin-bottom: 17px;   
}




.btn-push-invest {
  margin-left: 70px;
  color: #ffffff;
font-size: 16px;
line-height: 20px;
padding: 15px 0px;
text-decoration: none;
display: inline-block;
width: 30%; 
border-radius: 5px;
border-bottom: 4px solid #1686e7;
background-color: #309aec;
text-align: center;
}



.etapes-bourse{
  width: 100%;
  padding: 78px;
  display: inline-block;
}

.etapes-gauche{
 display: inline-block;
 vertical-align: middle;  
 width: 28%;
}

.titre-etape-1 {
    font-size: 35pt;
    width: 90px;
    /*display: inline-block;*/
}


.titre-etape-2 {
    font-size: 35pt;
    width: 90px;
    margin-top: -27px;
    /*display: inline-block;*/
}


.titre-etape-3 {
    font-size: 35pt;
    width: 90px;
    margin-top: -39px;
    /*display: inline-block;*/
}


.titre-etape-4 {
    font-size: 35pt;
    width: 90px;
    margin-top: -27px;
    /*display: inline-block;*/
}




.etapes-gauche h1 {
    font-size: 33pt;
    /*line-height: 174px;*/
}


.hr-etape {  
    border-right: 1px solid rgb(220, 223, 224);
    width: 1px;
    height: 586px;
    padding-left: 40px;
    padding-right: 0px;
    /*margin-right: 40px;*/
    position: absolute;
    left: 23%;
    /*! top: 310%; */
    margin-top: 66px;
}


.rond-etape-1 {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: rgb(30, 188, 239);
    margin-left: -7px;
}

.rond-etape-2 {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: rgb(30, 188, 239);
    margin-left: -7px;
    margin-top: 131px;
}


.rond-etape-3 {
   width: 16px;
   height: 16px;
   border-radius: 50px;
   background-color: rgb(30, 188, 239);
   margin-left: -7px;
   margin-top: 180px;  
}


.rond-etape-4 {
   width: 16px;
   height: 16px;
   border-radius: 50px;
   background-color: rgb(30, 188, 239);
   margin-left: -7px;
   margin-top: 211px; 
}


.etapes-droite {
 display: inline-block;
vertical-align: middle;
width: 100%;
}



.contenu-etapes{
    width: 100%;
    height: 100%;
    background-color: #f7fbfc;
    margin-bottom: 35px;
    text-align: left !important;
    padding: 25px 25px 25px 36px;
    border: solid 1px rgba(32, 156, 233, .1);
}


.picto-etape-1 {
background-image: url("/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/contrat-assu.png");
height: 64px;
display: inline-block;
width: 21%;
background-repeat: no-repeat;
}


.description-etape-1 {
    text-align: left !important;
    display: inline-block;
    width: 78%;
}


.picto-etape-2 {
background-image: url("/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/versement-ponctuel.png");
height: 64px;
display: inline-block;
width: 10%;
background-repeat: no-repeat;
margin-right: 20px;
}


.description-etape-2 {
    text-align: left !important;
    display: inline-block;
    width: 83%;
}


.description-etape-2 p {
    width: 100% !important;
}



.picto-etape-3 {
background-image: url("/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/versement-programme.png");
height: 64px;
display: inline-block;
width: 10%;
background-repeat: no-repeat;
margin-right: 20px;
}


.description-etape-3  {
    text-align: left !important;
    display: inline-block;
    width: 78%;
    vertical-align: middle;
}

.picto-etape-4 {
background-image: url("/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/beneficiares.png");
height: 64px;
display: inline-block;
width: 21%;
background-repeat: no-repeat;
vertical-align: middle;
}


.description-etape-4 {
    text-align: left !important;
    display: inline-block;
    width: 78%;
    vertical-align: middle;
}







/* --------------------------------------------------------------
  CONTAINER OBJECTS
------------------------------------------------------------- */

.o-container {
    margin: 0 auto;
    padding: 0 12px;
    max-width: 960px;
}

@media all and (min-width: 480px) {
    .o-container {
        padding: 0 24px;
    }
}

@media all and (min-width: 720px) {
    .o-container {
        padding: 0 48px;
    }
}

.o-section {
    margin-bottom: 24px;
}

.o-section:last-child {
    margin-bottom: 0;
}

@media all and (min-width: 720px) {
    .o-section {
        margin-bottom: 48px;
    }
}


/**
 * Tabs navigation
 */

.c-tabs-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 748px;
    margin: 0 auto;
    margin-bottom: 38px;
    background-color: rgb(255, 255, 255);
    border-radius: 50px;
    margin-top: 38px;
    background-image: url('/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/ombre-assu-vie.png');
}

.c-tabs-nav__link {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 4px;
    color: #0c0b0b;
    /*! background: rgba(76, 195, 241, 0.2); */
    text-align: center;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    /*! border: 2px solid #ffffff; */
    border-bottom: 0px;
    padding: 25px 30px 25px 30px;
    text-decoration: none;
    border-radius: 50px;
}

.c-tabs-nav__link:last-child {
    margin-right: 0;
}

.c-tabs-nav__link:hover {
    background-color: none;
    color: none;
}

.c-tabs-nav__link.is-active {
    color: #ffffff; 
     background-color: #209ce9; 
    text-decoration: none;
}

.c-tabs-nav__link i, .c-tabs-nav__link span {
    margin: 0;
    padding: 0;
    line-height: 1;
}


.c-tabs-nav__link_first.is-active img {
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/picto-euro-1.png);
}

.c-tabs-nav__link_second.is-active img {
  background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/picto-euro-2.png);
}


.c-tabs-nav__link span {
    display: inline-block;
    font-size: 24px;
    padding-top: 4px;
    vertical-align: middle;
}


/**
 * Tab
 */

.c-tab {
    display: none;
    background-color: transparent;
    border-radius: 4px;
    overflow: hidden;
}

.c-tab.is-active {
    display: block;
}

.col_list {
    float: left;
    list-style: none;
    text-align: left;
}

.col_list li {
    margin-bottom: 55px;
}

.col_list li svg {
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.col_list li p {
    display: block;
    font-size: 16px;
    line-height: 25px;
    color: #323232;
    margin-top: 12px;
}

.col_list li p a {
    color: #1fbbef;
    text-decoration: none;
}

.col_list li .p-wrapper {
    float: left;
    width: 80%;
}

.col_list li svg {
    float: left;
    margin-right: 20px;
}

.first_tab {
    padding: 30px 45px 70px 45px;
}

.c-tabs-nav__link_second.movetop {
    /*position: absolute;*/
    bottom: 30px;
    width: 94%;
}
.movetop .c-tabs-nav .c-tabs-nav__link.c-tabs-nav__link_first{
    margin-bottom: 0;
}

.tabslist-box.movetop {
    padding-bottom: 130px;
}

.second_tab {
    padding: 30px 45px 70px 45px;
}

.col_list li.row-1 {
    margin-bottom: 55px;
}

.half_full_width_tab {
    width: 50%;
}

.full_width_tab {
    width: 100%;
}


/*btns*/

.buttons-box {
    /*background: #ffffff;*/
    padding: 50px 90px 0px 0px;
    text-align: center;
}


.buttons-box-2 {
    /*background: #ffffff;*/
    padding: 50px 90px 0px 0px;
    text-align: center;
    margin-top: 24px;
}


@media screen and (min--moz-device-pixel-ratio:0) { 
      .buttons-box-2 {
            margin-top: 48px;
      }
}





.btn_box_btn_left {
    display: inline-block;
    text-align: center;
    padding: 13px 0px;
    background: #f0f0f0;
    border-radius: 100px;
    border-color: #e4e7eb;
    border-width: 1px;
    font-size: 15px;
    line-height: 20px;
    margin-right: 15px;
    width: 330px;
    color: #32a0ed;
    text-decoration: none;
    border-bottom: 4px solid #e5e8eb;
}

.btn_box_btn_right {
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    border-bottom: 4px solid #1686e7;
    color: #ffffff;
    font-size: 15px;
    line-height: 20px;
    padding: 13px 0px;
    text-decoration: none;
    display: inline-block;
    background-color: #309aec;
    width: 330px;
    text-align: center;
}


/*legal*/

.legal_textes {
    padding: 70px 50px;
    color: #999999;
    font-size: 12px;
    line-height: 14px;
}

.legal_textes p {
    float: left;
}

.legal_textes li>p {
    margin-right: 10px;
}

.legal_textes li>p+p {
    margin-right: 0px;
}


.legal_textes ul {
    list-style: outside none none;
}

.legal_textes li {
    overflow: hidden;
}

.btm_legal_txt {
    padding: 35px 0px;
}

.view svg.rond {
    animation: fillCircle 6s linear forwards;
}

@keyframes fillCircle {
    to {
        stroke-dashoffset: 0;
        fill:#fff;
    }
}

@-webkit-keyframes fillCircle {
    to {
        stroke-dashoffset: 0;
        fill:#fff;
    }
}

svg.rond {
    fill: transparent;
    stroke: #1fbbef;
    stroke-width: 2px;
    opacity: 1;
    stroke-dasharray: 1290;
    stroke-dashoffset: 1290;
    position: absolute;
    left: 300px;
    transform: translate3d(-50%, 0, 0) rotate(-90deg);
    top: 206px;
}

svg:not(:root) {
    overflow: hidden;
}

.c-tab__content svg.num_1, .c-tab__content svg.num_2, .c-tab__content svg.num_3, .c-tab__content svg.num_4, .c-tab__content svg.num_5 {
    opacity: 0;
}

.c-tab__content svg.num_1 {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    opacity: 0;
    margin-top: -12px;
}

.c-tab__content.view.anime .num_1 {
    opacity: 1;
    animation: fadeIn 1s;
}

.c-tab__content svg.num_2 {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
    opacity: 0;
}

.c-tab__content.view.anime .num_2 {
    opacity: 1;
    animation: fadeIn 1s 1s;
}

.c-tab__content svg.num_3 {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    opacity: 0;
}

.c-tab__content.view.anime .num_3 {
    opacity: 1;
    animation: fadeIn 1s 2s;
}

.c-tab__content svg.num_4 {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
    opacity: 0;
}

.c-tab__content.view.anime .num_4 {
    opacity: 1;
    animation: fadeIn 1s 3s;
}

.c-tab__content svg.num_5 {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 4s;
    transition-delay: 4s;
    opacity: 0;
}

.c-tab__content.view.anime .num_5 {
    opacity: 1;
    animation: fadeIn 1s 4s;
}

.c-tab__content p.num_1_txt {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
    opacity: 0;
}

.c-tab__content.view.anime p.num_1_txt {
    opacity: 1;
    animation: fadeIn 1s 1s;
}

.c-tab__content p.num_2_txt {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    opacity: 0;
}

.c-tab__content.view.anime p.num_2_txt {
    opacity: 1;
    animation: fadeIn 1s 2s;
}

.c-tab__content p.num_3_txt {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
    opacity: 0;
}

.c-tab__content.view.anime p.num_3_txt {
    opacity: 1;
    animation: fadeIn 1s 3s;
}

.c-tab__content p.num_4_txt {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 4s;
    transition-delay: 4s;
    opacity: 0;
}

.c-tab__content.view.anime p.num_4_txt {
    opacity: 1;
    animation: fadeIn 1s 4s;
}

.c-tab__content p.num_5_txt {
    transition: all ease-in-out 0.5s;
    -webkit-transition-delay: 5s;
    transition-delay: 5s;
    opacity: 0;
}

.c-tab__content.view.anime p.num_5_txt {
    opacity: 1;
    animation: fadeIn 1s 5s;
}

@media (min-width: 1200px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}


/* -----------------------------------------------------------------------------
Mobile styles
----------------------------------------------------------------------------- */
@media (max-width: 1350px) {
    .vert-box-container.first_col {
        margin-left: 10%;
    }
}

@media (max-width: 1199px) {
    .plans-box .vert-box-container {
        width: 32%;
    }
}

@media (max-width: 1024px) {
    svg.rond {
        fill: transparent;
        stroke: #1fbbef;
        stroke-width: 2px;
        opacity: 1;
        stroke-dasharray: 1290;
        stroke-dashoffset: 1290;
        position: relative;
        left: 50%;
        transform: translate3d(-50%, 0, 0) rotate(-90deg);
        top: 30%;
    }
    .container {
        width: 100%;
        margin: 0 auto;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    body {
        font-size: 1rem;
    }
    .intro-box {
        padding: 11.23046875% 12.5% 6.521739130434783% 9.9609375%;
        height: 100%;
    }
    .intro-box h1 {
        /*font-size: 3.125rem;
        line-height: 3.125rem;*/
        font-size: 40px;
        line-height: 40px;
    }
    .circle-text-box {
        font-size: 0.9375rem;
        padding: 0.3125rem 0.9375rem;
    }
    .intro-box p.fnt_type_book {
        font-size: 0.9375rem;
        line-height: 1.25rem;
        /*margin: 1.938rem 0;*/
    }
    .intro-box p.fnt_type_bold {
        font-size: 0.9375rem;
        line-height: 0.9375rem;
    }
    .question-box {
        height: 100%;
        padding: 11.35508637236084%;
        background: #fff url(../images/circle_shadow_m.jpg) center no-repeat;
        background-size: 100%;
    }
    .question-box h2 {
        font-size: 2.375rem;
        line-height: 2.375rem;
        margin-bottom: 5%;
    }
    .question-box .inner-wrapper {
        width: 100%;
        margin: 0 auto;
    }
    .img-wrapper {
        position: relative;
    }
    .visuel_question {
        position: absolute;
        left: 1%;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 7%;
    }
    .border_blue {
        padding: 0.8125rem;
        margin: 2.7rem auto;
        display: block;
        border-radius: 50%;
        float: none;
        position: relative;
        left: 26.6%;
    }
    .question-box p {
        display: inline-block;
        font-size: 1rem;
        line-height: 1.375rem;
        text-align: left;
        width: 100%;
        padding: 5% 0px 0px 0px;
        text-align: center;
    }
    .question-box p.view {
        width: 100%;
    }
    .advantages-box h2 {
        margin-bottom: 0.938rem;
        font-size: 2.375rem;
        line-height: 2.375rem;
    }
    .advantages-box {
        padding: 4.675572519083969% 6.25% 40px 6.25%;
        /*background-color: #2199e8;*/
    }
    .adv_box h3 {
        font-size: 1.1rem;
        line-height: 1.2rem;
        padding: 1.25rem 0px 1.813rem;
        font-weight: normal;
    }
    .box-hidden-content {
        display: none;
        color: #000000;
        padding: 0px 20px 35px 20px;
        font-size: 15px;
        line-height: 22px;
    }
    .box-hidden-content sup {
        font-size: 7px;
    }
    .adv_box {
        margin-bottom: 20px;
        padding: 6.25%;
    }
    .adv_box.show {
        border:none;
    }
    .plans-box h3 {
        text-align: center;
        color: #1ec0f0;
        font-size: 38px;
        line-height: 38px;
        margin-bottom: 30px;
        font-weight: normal;
    }
/*    .plans-box {
        padding: 48px 20px 30px 20px;
    }*/
    .plans-box .vert-box-container {
        width: 100%;
        border: 2px solid #1fbbef;
        display: inline-block;
        text-align: center;
        padding: 40px 45px 20px 45px;
        background: rgba(30, 192, 240, 0.05);
        border-radius: 2px;
        margin-bottom: 20px;
        height: 100%;
    }
    .vert-box-container p {
        color: #999999;
        font-size: 15px;
        line-height: 18px;
    }
    .hide {
        display: none;
    }
    .btn-blue.btn-embossed {
        --webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #1686e7;
        border-bottom: 3px solid #1686e7;
        color: #ffffff;
        font-size: 16px;
        line-height: 22px;
        padding: 15px 36px;
        text-decoration: none;
        display: inline-block;
        margin-top: 39px;
    }
    .vert-box-container h4 {
        color: #1ec0f0;
        font-size: 20px;
        line-height: 22px;
        padding-bottom: 20px;
        font-weight: normal;
    }
    .tabslist-box {
        padding: 50px 20px 100px 0px;
    }
    .tabslist-box h3 {
        color: #ffffff;
        font-size: 38px;
        line-height: 38px;
        margin-bottom: 30px;
        font-weight: normal;
        padding: 0px 20px;
    }
    #tabs .c-tabs-nav {
        width: 100%;
        /*display: block;*/
    }
    .c-tabs-nav__link.is-active:first-child, .c-tabs-nav .c-tabs-nav__link.c-tabs-nav__link_first {
        /*margin-bottom: 20px;*/
    }
    .c-tabs-nav .c-tabs-nav__link {
        margin-bottom: 0px;
        border-radius: 4px;
        /*border-bottom: 2px solid #ffffff;*/
        padding: 25px 30px 25px 30px;
    }
    .col_list li {
        float: left;
    }
    .c-tabs-nav__link .c-tabs-nav__link_second {
        margin-top: 20px;
    }
    .c-tabs-nav .c-tabs-nav__link .c-tabs-nav__link_second {
        margin-bottom: 1px;
    }
    .half_full_width_tab {
        width: 100%;
    }
    .half_full_width_tab:first-child {
        margin-bottom: 3%;
    }
    .half_full_width_tab:nth-child(2) .col_list li.row-1 {
        margin-bottom: 5%;
    }
    .c-tabs-nav__link {
        padding: 0px;
        width: 100%;
        display: block;
    }
    .c-tab__content p.num_5_txt {
        float: left;
        width: 71%;
    }
    #tabs .c-tabs-nav {
        /*width: 100%;
        display: block;*/
    }
    #tabs .first_tab, #tabs .second_tab {
        padding: 30px 30px 30px 30px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top: 1px solid #bbeafa;
    }
    .half_full_width_tab {
        width: 100%;
    }
    .col_list li.row-1.m_fix {
        padding-bottom: 0rem;
    }
    #tabs .c-tab__content {
        padding: 0;
    }
    .buttons-box {
        padding: 30px 20px 30px 0px;
    }

    .buttons-box-2 {
        padding: 30px 20px 30px 0px;
    }


    .btn_box_btn_left {
        padding: 15px 0px;
        width: 100%;
        margin-bottom: 20px;
    }
    .btn_box_btn_right {
        color: #ffffff;
        font-size: 16px;
        line-height: 20px;
        padding: 15px 0px;
        text-decoration: none;
        display: inline-block;
        width: 100%;
    }
    .legal_textes {
        padding: 30px 20px;
        background-color: #f5f5f5;
    }
    .container {
        background-color: #f5f5f5;
    }
    .btm_legal_txt {
        padding: 20px 0px;
    }
    .legal_textes li>p {
        margin-right: 0px;
        display: inline;
        float: none;
    }
    .c-tab.is-active {
        display: none;
    }
    .c-tabs-nav__link.is-active {
        border-radius: 50px;
    }

    .col_list li.row-1 {
        padding-bottom: 0rem;
    }
}

@media (max-width: 640px) {
    .col_list li svg {
        height: 3rem;
    }
    .hidden-mobile{
        display: none;
    }
    #tabs .first_tab, #tabs .second_tab {
        padding: 30px 20px 30px 20px;
    }
    .col_list li p {
        display: block;
        font-size: 16px;
        line-height: 25px;
        color: #323232;
        margin-top: 0px;
    }

}

@media screen and (max-width: 700px) {
    .c-tabs-nav__link_second.movetop {
        width: 92%;
    }
    .col_list svg, .row-1.m_fix svg{
        width: 14px;
    }
    .row-1 svg{
        width: 9px;
    }
    .col_list svg.num_1{
        width: 9px;
        padding-top: 19px;
        margin-bottom: 30px;

    }

}

@media screen and (max-width: 400px) {
    .c-tabs-nav__link_second.movetop {
        width: 89.5%;
    }
}

@media screen and (max-width: 350px) {
    .c-tab__content p.num_1_txt, .c-tab__content p.num_5_txt {
        display: inline-block;
        width: 82%;
        float: left;
    }
    .col_list li .p-wrapper {
        float: left;
    }
    .c-tabs-nav__link_second.movetop {
        width: 86.5%;
    }
    .question-box h2 {
        font-size: 1.9rem;
        line-height: 2.375rem;
        margin-bottom: 5%;
    }
    .question-box{
        padding:10% 4% 50% 4%;
    }
    .plans-box h3{
        font-size:35px;
    }
    .plans-box .vert-box-container{
        padding: 40px 20px 20px 20px;
    }
    .btn-blue.btn-embossed{
        padding:8px 36px;
        margin-top:30px;
    }
    .c-tabs-nav__link span {
        font-size: 18px;
        text-align: left;
        width: 88px;
        margin-top: 7px;
    }
    .c-tabs-nav .c-tabs-nav__link{
        padding: 15px 30px 15px 30px
    }

    .btn_box_btn_left{
        padding:7px 0;
    }
    .btn_box_btn_right{
        padding:10px 0;
    }
    .vert-box-container .second_p{
        margin-top: -10px;
    }


}

body {
    background: #f6f6f6;
    font-family: 'bnpp_sansregular', sans-serif;
    margin:0;
}

.container {
    max-width: 100vw;
    overflow: hidden;
}

header {
    height: 460px;
    max-height: 460px;
    background-color: #2199e8;
    background-image: url(../images/grad.png);
    padding: 0;
    margin: 0;
    background-size: 100% 100%;
}


/* -----------------------------------------------------------------------------
  HELPER CLASSES
----------------------------------------------------------------------------- */

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

.adv_box.show h3 {
    color: #2491ee;
}

.image-wrapper {
    position: relative;
}

/* -----------------------------------------------------------------------------
  MOBILE-2
----------------------------------------------------------------------------- */


@media (min-width: 321px) and (max-width: 768px) {
 .c-tabs-nav__link_second.movetop   {
    /*position: relative;*/
    bottom: 30px;
      }

 .image-euro-1 {
    display: none;
 }
 .image-euro-2 {
    display: none;
 }
 

.contenu-popin {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin span {
    width: 81%;
}


.contenu-popin-2 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-2 span {
    width: 81%;
}


.contenu-popin-3 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-3 span {
    width: 81%;
}

.contenu-popin-4 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-4 span {
    width: 81%;
}


.contenu-popin-5 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-5 span {
    width: 81%;
}


 }






 @media (width: 320px) {

.modal-assu-invest {
margin-left: -13px;
}

/*-----------Modal-1--------------*/

.constituer-capital {
    width: 320px;
    height: 88px;
    background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-arbitrage-ponctuel-mobile.png);
    background-repeat: no-repeat;
    padding: 25px 50px 22px 0px;
} 


.titre-vignette {
margin-left: -14px;
width: 334px;
}

.titre-vignette p {
    color: rgb(255, 255, 255) !important;
    margin-right: 86px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    width: 174px !important;
    padding-top: 0px !important;
}

.titre-vignette img {
    vertical-align: middle !important;
    margin-top: 0px !important;
    margin-left: 0px;
}



.btn-container{
 width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
 margin-top: -27px;
 padding-top: 25px;
 padding-left: 268px;
 margin-left: 0px;
}

.btn-container:hover{
  width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
  margin-top: -27px;
  padding-top: 25px;
  padding-left: 268px;
  margin-left: 0px;
}




.btn-container-2{
 width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
 margin-top: -27px;
 padding-top: 25px;
 padding-left: 268px;
 margin-left: 0px;
}

.btn-container-2:hover{
  width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
  margin-top: -27px;
  padding-top: 25px;
  padding-left: 268px;
  margin-left: 0px;
}




.btn-container-3{
 width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
 margin-top: -27px;
 padding-top: 25px;
 padding-left: 268px;
 margin-left: 0px;
}

.btn-container-3:hover{
  width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
  margin-top: -27px;
  padding-top: 25px;
  padding-left: 268px;
  margin-left: 0px;
}



.btn-container-4{
 width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico.png); 
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
 margin-top: -27px;
 padding-top: 25px;
 padding-left: 268px;
 margin-left: 0px;
}

.btn-container-4:hover{
  width: 320px;
  height: 88px; 
  background: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/plus_ico_hover.png);
  background-repeat: no-repeat;
  padding:35px;
  background-origin: content-box;
  cursor: pointer;
  margin-top: -27px;
  padding-top: 25px;
  padding-left: 268px;
  margin-left: 0px;
}







.contenu-popin {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin span {
    width: 270px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

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



/*-----------Modal-2--------------*/

.valoriser-capital {
    width: 320px;
    height: 88px;
    background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-arbitrage-progressif-mobile.png);
    background-repeat: no-repeat;
    padding: 25px 50px 22px 0px;
} 


.titre-vignette-2 {
margin-left: -151px;
width: 334px;
}

.titre-vignette-2 p {
    color: rgb(255, 255, 255) !important;
    margin-right: 0px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    width: 148px !important;
    padding-top: 0px !important;
    position: absolute;
    margin-left: -5px; 
    margin-top: 5px;
}

.titre-vignette-2 img {
    vertical-align: middle !important;
    margin-top: 0px !important;
    margin-left: 265px;
}


.contenu-popin-2 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-2 span {
    width: 270px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}


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



/*-----------Modal-3--------------*/

.completer-revenus {
    width: 320px;
    height: 88px;
    background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-repartition-constante-mobile.png);
    background-repeat: no-repeat;
    padding: 25px 50px 22px 0px;
} 


.titre-vignette-3 {
margin-left: -156px;
width: 334px;
}

.titre-vignette-3 p {
    color: rgb(255, 255, 255) !important;
    margin-right: 0px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    width: 171px !important;
    padding-top: 0px !important;
    text-align: left !important;
    position: absolute;
    margin-top: 5px !important;
    margin-left: 16px !important; 
}

.titre-vignette-3 img {
    vertical-align: middle !important;
    margin-top: 0px !important;
    margin-left: 264px !important;
}


.contenu-popin-3 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-3 span {
    width: 270px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}


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



/*-----------Modal-4--------------*/

.cadre-fiscal {
    width: 320px;
    height: 88px;
    background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/optimiser-mon-contrat/images/image-capitalisation-dynamique-mobile.png);
    background-repeat: no-repeat;
    padding: 25px 50px 22px 0px;
} 


.titre-vignette-4 {
margin-left: -162px;
width: 334px;
}

.titre-vignette-4 p {
    color: rgb(255, 255, 255) !important;
    margin-right: 0px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    width: 197px !important;
    padding-top: 0px !important;
    position: absolute;
    text-align: left !important;
    margin-left: 17px !important;
    margin-top: 4px;
}

.titre-vignette-4 img {
    vertical-align: middle !important;
    margin-top: 0px !important;
    margin-left: 265px !important;
}


.contenu-popin-4 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-4 span {
    width: 270px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}



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




/*-----------Modal-5--------------*/

.transmettre-capital {
    width: 320px;
    height: 88px;
    background-image: url(/rsc/contrib/html/particuliers/infographies/bourse/pourquoi-et-comment-investir-dans-un-contrat-assurance-vie/images/image-mobile-transmettre-votre-capital.png);
    background-repeat: no-repeat;
    padding: 25px 50px 22px 0px;
} 


.titre-vignette-5 {
margin-left: -14px;
width: 334px;
}

.titre-vignette-5 p {
    color: rgb(255, 255, 255) !important;
    margin-right: 0px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    width: 177px !important;
    padding-top: 0px !important;
    position: absolute;
    text-align: left !important;
    margin-left: 18px !important; 
    margin-top: 6px !important;
}

.titre-vignette-5 img {
    vertical-align: middle !important;
    margin-top: 0px !important;
    margin-left: 265px !important;
}


.contenu-popin-5 {
    width: 320px;
    height: 196px;
    padding-top: 30px;
    padding-left: 9px;
    margin-right: 0px;
    margin-left: 0px;
}

.contenu-popin-5 span {
    width: 270px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}



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

 .image-euro-1 {
    display: none;
 }
 .image-euro-2 {
    display: none;
 }

.contenu-etapes {
width: 95%;
margin-left: 7px;
}

.etapes-bourse {
 padding-bottom: 0px;   
}


  
}



@media (min-width: 600px) and (max-width: 768px) {

.hr-etape {
    border-right: 1px solid rgb(220, 223, 224);
    width: 1px;
    height: 901px;
    padding-left: 40px;
    padding-right: 0px;
    /*margin-right: 40px;*/
    position: absolute;
    left: 23%;
    /*top: 310%;*/
    margin-top: 124px;
}

.rond-etape-1 {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: rgb(30, 188, 239);
    margin-left: -7px;
}

.rond-etape-2 {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: rgb(30, 188, 239);
    margin-left: -7px;
    margin-top: 221px;
}


.rond-etape-3 {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: rgb(30, 188, 239);
    margin-left: -7px;
    margin-top: 288px;
}

.rond-etape-4 {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background-color: rgb(30, 188, 239);
    margin-left: -7px;
    margin-top: 342px;
}


.picto-etape-1 {
 width: 40%;   
}

.picto-etape-2 {
 width: 40%;   
}

.picto-etape-3 {
 width: 50%;   
}

.picto-etape-4 {
 width: 43%;   
}


.plans-box {
    padding: 387px 0px 80px 0px;
}

.text-push-invest p {
    width: 80%;
}

.btn-push-invest {
margin-left: 52px;
width: 44%;
}


 }



 @media (min-width: 320px) and (max-width: 590px) {

.push-fond-invest {
    width: 80%;
    height: auto;
    background-color: #ffffff;
    position: absolute;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.04);
    padding: 25px;
    transform: translate(3%, 0%);
    margin-top: 0px;
    margin-left: 10px;
}



.push-fond-invest img {
margin-left: 71px;
margin-bottom: 11px;
}


.advantages-box {
 padding: 220px 6.25% 40px 6.25%;   
}



.advantages-box p {
 margin-left: 10px;
}


.text-push-invest p {
    width: 89%;
    display: inline-block;
    vertical-align: middle;
    margin-top: 14px;
    margin-left: 0;
    margin-bottom: 17px;
    text-align: left;
}


.btn-push-invest {
    margin-left: 0;
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    padding: 16px 1px;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    border-radius: 5px;
    border-bottom: 4px solid #1686e7;
    background-color: #309aec;
    text-align: center;
}






.etapes-bourse {
 padding-left: 0px;
 padding-right: 0px;

}

.hr-etape {
   border-right: 0px solid rgb(220, 223, 224); 
}

.rond-etape-1 {
 margin-top: -44px;
margin-left: -59px;   
}


.rond-etape-2 {
margin-left: -59px;
margin-top: 279px;  
}


.rond-etape-3 {
margin-left: -59px;
margin-top: 252px; 
}

.rond-etape-4 {
margin-left: -59px;
margin-top: 419px;  
}


.etapes-droite {
 width: auto;   
}


.picto-etape-1 {
 margin-left: 58px;
 width: 60%;   
}

.picto-etape-2 {
 margin-left: 53px;
 width: 53%;  
}


.picto-etape-3 {
 margin-left: 53px;
 width: 53%;  
}


.picto-etape-4 {
 margin-left: 53px;
 width: 56%;  
}


.description-etape-1 {
 width: 100%;   
}

.description-etape-2 {
 width: 100%;   
}

.description-etape-2 p{
 text-align: left !important;  
}

.description-etape-3 {
 width: 100%;   
}

.description-etape-4 {
 width: 100%;   
}


.plans-box {
    padding: 80px 0px 0px 0px;
}


.optimiser-rachat{
width: 92%;
margin-left: 12px; 
margin-bottom: 25px;
}


.optimiser-avances{
width: 92%;
margin-left: 0px; 
margin-bottom: 25px;
}

.savoir-plus-gauche {
 margin-left: 21px;
 width: 100%;  
}


.hr-savoir-plus {
    display: none;
}

.hr-savoir-plus-mobile{
 display: inline-block;
 border-bottom: 1px solid rgb(220, 223, 224);
 width: 288px;
 vertical-align: middle; 
 margin-left: 16px; 
}

.savoir-plus-droite {
margin-left: 21px;
margin-top: 47px;
width: 100%;   
}

.text-mention-pub {
    font-size: 15px !important;
    text-align: left;
    margin-top: 0px !important;
}





 }



 @media (min-width: 769px) and (max-width: 1150px) {
.plans-box {
    padding: 348px 20px 30px 20px;
}

 }