*{
    /*border: solid thin blue;*/
    margin: 0;
    padding: 0;
}

html{
    height: 100%;
    min-height:100%;
}

body{
    background-color: #fff;
    font-family: 'font2', sans-serif;
    font-size: 100%;
    width: 100%;
    height: 100%;
    min-height:100%;
    /*position: relative;*/
}

#wrapper{
    min-height: 100%;
    position: relative;
}

/* Texte Ouverture prochaine de l'index : */
#opening-text{
    font-family: 'font3i', sans-serif;
    font-size: 200%;
    text-align: center;
    color: steelblue;
}

#info{
    font-family: 'font3', sans-serif;
    font-size: 100%;
    text-align: center;
}

#info-mail{
    font-family: 'font3', sans-serif;
    font-size: 100%;
    text-align: center;
    padding: 5px;
}

#info-mail a{
    text-decoration: none;
    background-color: #0088CC;
    padding: 5px;
    color: #fff;
    border-radius: 10px;
}

#info-mail img{
    /*position: absolute;*/
    width: 35px;
    height: 35px;
    margin-bottom: -11px;
    margin-right: 10px;
}

#info-facebook{
    text-align: center;
}

#info-facebook a span{
    font-family: 'font3i', sans-serif;
    font-size: 100%;
    text-decoration: none;
    color: #3B5998;
}

#info-facebook a{
    font-family: 'font3i', sans-serif;
    font-size: 100%;
    text-decoration: none;
    color: #3B5998;
}
#info-facebook a img{
    width: 80px;
    /*margin-bottom: -35px;*/
}

/*************************/

main{
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 200px;
    background-color: #fff;
    display: inline-block;
}

#page{
    background-color: #fff;
    width: 100%;
}

/**************************/

/* Block logo animé : */

.block-logo {
    background: #fff no-repeat url('../images/sky-animate0.jpg') bottom left;
    background-size: 50%;

    z-index: 999;
    position: relative;
    width: 100%;
    height: 400px;

    overflow: hidden;
}

.element-animate{
    position: absolute;
}

/*.rocket{
    position: absolute;
    background: no-repeat url('../images/svg/rocket2.svg') center;
    background-size: 100%;

    width: 800px;
    height: 35px;

    top: 40%;
    right: 5%;

    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}*/
.rocket{
    position: absolute;
    background: no-repeat url('../images/svg/rocket2.svg') center;
    background-size: 100%;

    width: 800px;
    height: 300px;

    top: 10%;
    right: 5%;
}
.sky1{
    /*border: solid thin red;*/
    position: absolute;
    background: no-repeat url('../images/sky-animate1.png') bottom left;
    background-size: 35%;

    height: 100%;
    width: 100%;
    bottom: 0;
}

.logoBB{
    /*border: solid thin green;*/
    position: absolute;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1);
    transform: scale(1);
    display: inline-block;

    top: 45%;
    left: 50%;
}

.logo-animate{
    /*border: solid thin red;*/
    width: 800px;
    height: 230px;
    /*width: 168px;
    height: 49px;*/
    position: absolute;
}

.logo-animate{
    top: -115px;
    left: -400px;
}

.logo-animate-symbol{
    top: 0;
    left: 0;
}

.logo-animate-bizness{
    top: 75px;
    left: 250px;
}

.logo-animate-booster{
    left: 408px;
    top: 160px;
}

.logo-caption{
    /*border: solid thin orange;*/
    position: absolute;
    font-family: 'font1i', sans-serif;
    font-size: 21px;
    width: 600px;
    top: 100px;
    left: -150px;
}

.logo-join{
    position: absolute;
    font-family: 'font2i', sans-serif;
    font-size: 21px;
    width: 600px;
    top: 50px;
    left: 50px;
    opacity: 0;
}

/**************************/

/* Block images sous le logo, en début de page d'accueil : */

.block-photos{
    /*border: solid thin lightseagreen;*/
    position: relative;
    width: 100%;
    height: 100%;
    right: 0;
    display: inline-block;
    margin: 0;
}

.item-block-photos{
    position: relative;
    float: left;
    width: 25%;
    height: 180px;
    right: 0;

    text-align: center;
}

/* Les styles pour les liens désactivés : */

/*.item-block-photos:hover{
    cursor: pointer;
}*/

.item-block-photo-info{
    font-family: 'font3i', sans-serif;
    color: #555555;
    font-size: 130%;
    margin-top: 20px;
    display: block;
}

/***********/

.header-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.logo-img1{
    background: no-repeat url('../images/svg/logoBB-resto.svg') 50% 50%;
}
.logo-img2{
    background: no-repeat url('../images/svg/logoBB-vin.svg') 50% 50%;
}
.logo-img3{
    background: no-repeat url('../images/svg/logoBB-beaute.svg') 50% 50%;
}
.logo-img4{
    background: no-repeat url('../images/svg/logoBB-pharma.svg') 50% 50%;
}
.logo-img5{
    background: no-repeat url('../images/svg/logoBB-artisan.svg') 50% 50%;
}
.logo-img6{
    background: no-repeat url('../images/svg/logoBB-auto.svg') 50% 50%;
}
.logo-img7{
    background: no-repeat url('../images/svg/logoBB-fleur.svg') 50% 50%;
}
.logo-img8{
    background: no-repeat url('../images/svg/logoBB-hotel.svg') 50% 50%;
}

.logo-img1:hover{
    background: no-repeat url('../images/svg/logoBB-resto.svg') 50% 50%;
}
.logo-img2:hover{
    background: no-repeat url('../images/svg/logoBB-vin.svg') 50% 50%;
}
.logo-img3:hover{
    background: no-repeat url('../images/svg/logoBB-beaute.svg') 50% 50%;
}
.logo-img4:hover{
    background: no-repeat url('../images/svg/logoBB-pharma.svg') 50% 50%;
}
.logo-img5:hover{
    background: no-repeat url('../images/svg/logoBB-artisan.svg') 50% 50%;
}
.logo-img6:hover{
    background: no-repeat url('../images/svg/logoBB-auto.svg') 50% 50%;
}
.logo-img7:hover{
    background: no-repeat url('../images/svg/logoBB-fleur.svg') 50% 50%;
}
.logo-img8:hover{
    background: no-repeat url('../images/svg/logoBB-hotel.svg') 50% 50%;
}

.header-img1{
    background: no-repeat url('../images/img-job-resto.jpg') 25% 50%;
}
.header-img2{
    background: no-repeat url('../images/img-job-wine.jpg') 25% 75%;
}
.header-img3{
    background: no-repeat url('../images/img-job-beauty.jpg') 50% 50%;
}
.header-img4{
    background: no-repeat url('../images/img-job-pharma.jpg') 50% 50%;
}
.header-img5{
    background: no-repeat url('../images/img-job-artisan.jpg') 50% 50%;
}
.header-img6{
    background: no-repeat url('../images/img-job-auto.jpg') 50% 50%;
}
.header-img7{
    background: no-repeat url('../images/img-job-flower.jpg') 50% 50%;
}
.header-img8{
    background: no-repeat url('../images/img-job-hotel.jpg') 50% 50%;
}

/**************************/

/* Les blocks, page d'accueil : */

.block{
    /*border: solid thin orange;*/
    background-color: #ececec;
    position: relative;
    width: 100%;
    /*min-height: 200px;*/
    min-height: 273px;
    padding-bottom: 80px;
}

.block-bkg{
    /*border: solid thin red;*/
    background-color: rgba(255,255,255,0);
    width: 100%;
    height: 100%;
    position: absolute;
}
.block:hover .btn-block.icon{
    opacity: 1;
    right: 70px;
}

.block:hover .icon-punchline-position.icon-menu-hover{
    opacity: 1;
}

.title-block,
.caption-block{
    /*border: solid thin yellow;*/
    font-family: 'font1', sans-serif;
    font-size: 300%;
    position: relative;
}

.text-block{
    /*border: solid thin orange;*/
    position: relative;
    padding-bottom: 30px;
}

.text-block-content > .text-block::after{
    /*background-color: red;*/
    position: relative;
    content: '';
    width: 100%;
    height: 15px;
    display: block;
}

.block-punchline{
    max-width: 738px;
    /*height: 230px;*/
}

.block-punchline,
.block-content,
.block-part{
    /*border: solid thin violet;*/
    width: 50%;
    padding: 5px 50px 5px 50px;
    position: relative;
    background-color: rgba(255,255,255,0.9);
}

.block-content.feed{
    /*border: solid thin violet;*/
    width: 50%;
    padding: 5px 50px 5px 50px;
    position: relative;
    background-color: rgba(255,255,255,0.9);
}

.goto-block{
    /*border: solid thin red;*/
    position: relative;
    width: 90%;
    height: 60px;
    opacity: 0;
}

.benefit-category-element .goto-block,
.benefit.container .goto-block{
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Zone totale du type punchline cliquable : */

.btn-block.punchline{
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.btn-block.punchline:hover{
    background-color: transparent;
}

/* Bouton En savoir plus : */

.btn-block {
    position: absolute;
    background-color: #555;
    /*border-radius: 10px;*/
    bottom: 10px;
    right: 15px;
    padding: 5px 15px 5px 15px;
    cursor: pointer;
    text-decoration: none;
}

/* Bouton personnalisé des punchlines : */
.btn-block.icon{
    background-color: rgba(0,0,0,.8);
    min-width: 180px;
    right: 15px;

    transition: all 1s;
}
.btn-block.icon:hover{
    /*background-color: transparent;*/
}
.btn-block.icon .btn-title-block{
    top: 8px;
    padding-left: 5px;
}

/****/

.icon-punchline-position{
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    display: block;
}
.icon-punchline-position.icon-menu-hover{
    position: absolute;
    top: 5px;
    opacity: 0;
}
.btn-icon-block{
    position: relative;
    float: left;
    background: url('../images/svg/icon-arrow.svg') no-repeat center;
    background-size: 100%;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.btn-title-block{
    position: relative;
    float: left;
    color: #fff;
    font-family: 'font3i', sans-serif;
    font-size: 120%;
    line-height: 55%;
    margin-top: 10px;
}
.btn-block:hover{
    background-color: #000;
}

/** Les blocks sur la page d'accueil : **/

/* Block Historique : */

.block-bkg-edito{
    /*border: solid thin red;*/
    background: url('../images/img-block-edito.jpg') no-repeat center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.title-edito{
    color: orangered;
    /*font-size: 90%;*/
}

.bold-edito{
    color: orangered;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}

/**************************/

/* Block Philosophie : */

.block-bkg-philo{
    /*border: solid thin red;*/
    background: url('../images/img-block-philo.jpg') no-repeat 50% 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-philo{
    color: forestgreen;
    font-size: 250%;
}
.bold-philo{
    color: forestgreen;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}

/**************************/

/* Block Conditions d'accès : */

.list-access{
    margin-left: 5%;
}
.block-bkg-access{
    background: url('../images/img-block-access.jpg') no-repeat 50% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-access{
    color: dodgerblue;
}
.bold-access{
    color: dodgerblue;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}

/**************************/

/* Block Pour qui ? : */

.block-bkg-who{
    background: url('../images/img-block-who.jpg') no-repeat 50% 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-who{
    /*text-align: center;*/
    color: blueviolet;
    /*font-size: 200%;*/
}
.bold-who{
    color: blueviolet;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}
.logo-who{
    width: 300px;
}
.text-block-who .paragraph{
    text-align: center;
}

/**************************/

/* Block Prestations : */

.block-bkg-benefits{
    background: url('../images/img-block-benefits.jpg') no-repeat 50% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-benefits{
    color: deeppink;
}
.bold-benefits{
    color: deeppink;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}

/* Catégorie Réseaux sociaux : */
.block-bkg-social-network{
    /*background-color: #92117e;*/
    background: #92117e /*url('../images/img-bkg-social-network.jpg') no-repeat 50% 50%*/;

    width: 100%;
    height: 100%;
    position: absolute;
}
.title-social-network{
    color: #92117e;
}
.bold-social-network{
    color: #92117e;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}
.block-content-social-network .text-block-content ul.paragraph{
    padding-left: 100px;
}
.block-content-social-network .text-block-content ul.paragraph li{
    list-style-image: url('../images/svg/list-arrow-social-network.svg');
}
/* Catégorie Internet : */
.block-bkg-internet{
    background-color: #f19300;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-internet{
    color: #f19300;
}
.bold-internet{
    color: #f19300;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}
.block-content-internet .text-block-content ul.paragraph{
    padding-left: 100px;
}
.block-content-internet .text-block-content ul.paragraph li{
    list-style-image: url('../images/svg/list-arrow-internet.svg');
}
/* Catégorie Outils de Communication : */
.block-bkg-tools-com{
    background-color: #009ddf;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-tools-com{
    color: #009ddf;
}
.bold-tools-com{
    color: #009ddf;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}
.block-content-tools-com .text-block-content ul.paragraph{
    padding-left: 100px;
}
.block-content-tools-com .text-block-content ul.paragraph li{
    list-style-image: url('../images/svg/list-arrow-tools-com.svg');
}
/* Catégorie Communication sur le Point de Vente : */
.block-bkg-pos-com{
    background-color: #96bd0d;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-pos-com{
    color: #96bd0d;
}
.bold-pos-com{
    color: #96bd0d;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}
.block-content-pos-com .text-block-content ul.paragraph{
    padding-left: 100px;
}
.block-content-pos-com .text-block-content ul.paragraph li{
    list-style-image: url('../images/svg/list-arrow-pos-com.svg');
}
/* Catégorie Coaching : */
.block-bkg-coaching{
    background-color: #e1001a;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-coaching{
    color: #e1001a;
}
.bold-coaching{
    color: #e1001a;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}
.block-content-coaching .text-block-content ul.paragraph{
    padding-left: 100px;
}
.block-content-coaching .text-block-content ul.paragraph li{
    list-style-image: url('../images/svg/list-arrow-coaching.svg');
}
/* Catégorie Référencement : */
.block-bkg-buy-ref{
    background-color: #e1007a;
    width: 100%;
    height: 100%;
    position: absolute;
}
.title-buy-ref{
    color: #e1007a;
}
.bold-buy-ref{
    color: #e1007a;
    font-family: 'font4i', sans-serif;
    font-size: 110%;
}
.block-content-buy-ref .text-block-content ul.paragraph{
    padding-left: 100px;
}
.block-content-buy-ref .text-block-content ul.paragraph li{
    list-style-image: url('../images/svg/list-arrow-buy-ref.svg');
}

/* On masque le bandeau image sur les pages adhérer et contact : */
.block-bkg.layer.block-bkg-become-member,
.block-bkg.layer.block-bkg-contact,
.block-bkg.layer.block-bkg-subscription{
    display: none;
}

/* liste de récapitulation des prestations de la cotisation : */

.block-content.subscription-includes{
    width: 100%;
    margin: 0;
    padding: 0;
}
.subscription-includes,
.subscription-includes.center,
.subscription-includes.center *{
    text-align: left;
}

.subscription-includes > .text-block-content > .text-block{
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 10px;
}

.subscription-includes .paragraph.title{
    font-family: 'font4i', sans-serif;
    font-size: 200%;
    width: 100%;
    text-align: center;
    padding: 0;
}
.subscription-includes .paragraph.sub-title{
    margin-top: 0;
    padding-top: 0;
    font-family: 'font3i', sans-serif;
    font-size: 150%;
    text-align: center;
}
.title-subscription{
    background-color: blueviolet;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
}
.subscription-includes ul.paragraph{
    /*border: solid thin red;*/
    text-align: center;
    padding-bottom: 0;
}
.subscription-includes .paragraph li{
    list-style-image: url('../images/svg/list-arrow-social-network.svg');
    max-width: 400px;
}


/**************************/

/** Contenus des pages : **/

/* Block conteneur : */

.block-contents{
    /*border: solid thin red;*/
    z-index: 1000;

    display: none;
    /*position: absolute;
    top: 0;
    left: 0;*/
    position: relative;

    width: 100%;
    height: 100%;
}

.block-content.layer{
    display: none;
    padding: 0;
    width: 100%;

    background-color: #fff;
}

.block-bkg.layer{
    min-height: 200px;
    position: relative;
}

.block-bkg.sub-layer{
    min-height: 400px;
}

.block-content.layer > .title-block{
    padding-left: 50px;
    padding-right: 90px;
}

.video-block{
    background-color: #222;
    text-align: center;

    position: absolute;
    width: 35%;
    top: 200px;
    right: 20px;
    z-index: 998;
}

.video{
    width: 100%;
}

.text-block-content{
    width: 100%;
    position: relative;
    display: inline-block;
    /*min-height: 400px;*/
}

.center{
    text-align: center;
    margin: auto;
}
.center *{
    text-align: center;
    margin: auto;
}

.text-block-content > .text-block{
    /*background-color: rgba(255,255,255,0.9);*/
    width: 60%;
    /*padding: 20px 20px 20px 50px;*/
    margin-top: 20px;
    margin-bottom: 20px;
}
.text-block-content > .text-block.include{
    margin-bottom: 0;
    padding: 0;
}
.text-block-content > .text-block.include::after{
    margin: 0;
    padding: 0;
    height: 0;
}
.text-block-content + .text-block-content >.text-block{
    margin-top: 0;
}

.paragraph{
    /*background-color: rgba(240,240,240,0.9);*/
    background-color: #fff;
    margin-top: 5px;
    margin-left: 0;
    padding: 20px 20px 20px 20px;
    text-align: justify;
}

ul.paragraph{
    margin-top: 0;
    padding: 0 20px 20px 50px;
}

.content.layer.sub-title{
    text-align: center;
    font-family: 'font4i', sans-serif;
    font-size: 200%;
    color: #fff;
}

/* bouton retour : */
.btn-return.dark{
    /*border: solid thin red;*/
    z-index: 1002;
    position: fixed;
    background: #555 url('../images/svg/icon-return.svg') no-repeat 50% 25%;
    background-size: 55%;
    width: 30px;
    height: 18px;

    top: 70px;
    right: 10px;
    border-radius: 30px;
    margin: 5px;
    padding: 10px;

    cursor: pointer;
}

/****Surcharges blocks particuliers :****/

/** page Grille tarifaire : **/
#content-benefits ~ .text-block-content{
    width: 100%;
    min-height: inherit;
}
#content-benefits ~ .text-block-content > .block-bkg.layer{
    display: none;
}

/** page Contenu de la cotisation: **/
.block-content.layer.block-content-subscription > .text-block-content{
    height: 0;
    min-height: 0;
    padding-bottom: 50px;
}
.block-content.layer.block-content-subscription .text-block{
    width: 100%;
    margin: 0;
    padding: 0;
}
.block-bkg.layer.animate.block-bkg-subscription{
    background-color: #700054;
    background-image: none;
}

/* Les blocks part de l'encart #goals-main (page Objectifs Recherchés) : */

.block-bkg-goal-facebook{
    /*border: solid thin red;*/
    background: url('../images/img-goal-ca.jpg') no-repeat center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.title-goal-facebook{
    color: darkblue;
    font-family: 'font1', sans-serif;
    font-size: 300%;
}

.block-bkg-goal-modules{
    /*border: solid thin red;*/
    background: url('../images/img-goal-modules.jpg') no-repeat center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.title-goal-modules{
    color: green;
    font-family: 'font1', sans-serif;
    font-size: 300%;
}

.block-bkg-goal-coaching{
    /*border: solid thin red;*/
    background: url('../images/img-goal-coaching.jpg') no-repeat center;
    position: absolute;
    width: 100%;
    height: 100%;
}
.title-goal-coaching{
    color: darkred;
    font-family: 'font1', sans-serif;
    font-size: 300%;
}

/**************************/

/* Texte BIZ NESS BOOSTER : */

.bold-biz{
    color: #000;
    font-family: 'font4', sans-serif;
    font-size: 110%;
}
.bold-ness{
    color: #b0b2b3;
    font-family: 'font4', sans-serif;
    font-size: 110%;
}
.bold-booster{
    color: #000;
    font-family: 'font3', sans-serif;
    font-size: 90%;
}

/**************************/

/*** div trace (console pour voir les infos js sur mobiles : ***/

#trace{
    position: fixed;
    background-color: #333;
    z-index: 3000;
    width: 100%;
    height: 80px;

    bottom: 0;
    left: 0;

    color: #fff;
}

#trace p{
    margin: 0;
}

/**************************/

/* La popup : ***********/

#popup{
    display: none;
    position: fixed;
    z-index: 2000;
    background-color: rgba(230,230,230,0.7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}
#popup > .helper{
    background-color: red;
    width: 1px;
    height: 1px;
    position: absolute;
    top: 30%;
    left: 50%;
}
#popup > .helper > .popup-frame{
    border: solid thin #eee;
    position: relative;
    display: inline-block;
    background-color: #fefefe;
    width: 300px;
    min-height: 80px;
    top: 0;
    left: -150px;
}

#popup > .helper > .popup-frame > .popup-info{
    /*border: solid thin red;*/
    width: 280px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 60px;
}

#popup > .helper > .popup-frame > .btn-popup{
    position: absolute;
    background-color: #555;
    bottom: 10px;
    right: 15px;
    padding: 15px;
    cursor: pointer;
}
#popup > .helper > .popup-frame > .btn-popup:hover{
    background-color: #000;
}
#popup > .helper > .popup-frame > .btn-popup > .btn-title-popup{
    color: #fff;
    font-family: 'font3i', sans-serif;
    font-size: 120%;
    line-height: 55%;
}

/****/
.subscription-choice .btn-block{
    position: relative;
    display: inline-block;
    /*width: 190px;*/
    bottom: auto;
    right: auto;
    margin: 20px;
}
.subscription-btns{
    margin: auto;
    display: inline-block;
}
.subscription-choice{
    position: relative;
    width: 100%;
    text-align: center;
}

.video-header{
    position: absolute;
    bottom: 0;
    right: 0;
}