/*******************************************************************************
 * Auteur: Arnaud Ferrand
 * version: 1.0
 *******************************************************************************/
 :root{
    --scroll-bar-color: rgba(6, 25, 54, 1);
    --scroll-bar-bg-color: rgba(177, 169, 169, 1);
    --scroll-bar-width--phone: 1.125rem;
    --scroll-bar-border-radius--phone: 1rem;
    --scroll-bar-width--mobile: calc(100vw * 3 / 100); /*1.75rem;*/
    --scroll-bar-border-radius--mobile: 1.25rem;
    --scroll-bar-width--desktop: calc(100vw * 1.5 / 100); /*2.5rem;*/
    --scroll-bar-border-radius--desktop: 2.5rem;

    --font-family--normal: 'Raleway', sans-serif;
    --font-family--linkme: 'Viga', sans-serif;
    --font-family--title-log: cursive;
    --font-family--about-header-title: 'Ubuntu', sans-serif;
    --font-family--about-header: 'Viga', sans-serif;
    --font-family--title-index: 'Viga', sans-serif;
    --font-family--sub-title-index: 'Viga', sans-serif;
    --font-family--title-bible: 'Viga', sans-serif;
    --font-family--title-header: 'Lobster', cursive;
    --font-family--title-header-pix: 'Oooh Baby', cursive;;
    --font-family--title-publication: 'Viga', sans-serif;

    --font-size-ratio: calc(.1 * 10vmin);
	--font-size-title-h1: 64;
    --font-size-title-h1-mobile: 72;

    --font-size-title-h2: 60;
    --font-size-title-h2-mobile: 68;

    --font-size-title-h3: 56;
    --font-size-title-h3-mobile: 64;

    --font-size-title-h4: 52;
    --font-size-title-h4-mobile: 48;

    --font-size-title-h5: 48;
    --font-size-title-h5-mobile: 56;

    --font-size-title-h6: 44;
    --font-size-title-h6-mobile: 52;
    
    --title-bible-book-mobile: 48;

	--font-size-footer: 24;
	--font-size-footer-mobile: 32;

    --scroll-bar-width-div:  16px;
    --scroll-bar-radius-div:  10px;

    --max-height--col-middle: 82vh;

    --size-round-5: 8px;

    --bg-tips:  #1d1d1d;
    --fg-tips:  #00a170;
    --bg-tips-light: #a9cce3;
    --fg-tips-light: black;

    --color-underline: #00a170;
 }

img{
    width: 100%!important;
    height: auto!important;
    margin-right: auto;
    margin-left: auto;
}
body{
    scrollbar-width: var(--scroll-bar-width--desktop);
    scrollbar-color: #182842 transparent; /* #111D2F */
}
body::-webkit-scrollbar{
    width: var(--scroll-bar-width--desktop);
}
body::-webkit-scrollbar-track{
    background:  transparent;
}
body::-webkit-scrollbar-thumb{
    background-color:  #182842;
    border-radius: var(--scroll-bar-border-radius--desktop);
    border: 3px solid var(--scroll-bar-bg-color);
}
@media screen and (max-width: 991px){
    body{
        scrollbar-width: 10px;
    }
    body::-webkit-scrollbar{
        width: 10px;
    }
    body::-webkit-scrollbar-thumb{
        border-radius: var(--scroll-bar-border-radius--phone);
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    body{
        scrollbar-width: 16px;
    }
    body::-webkit-scrollbar{
        width: 16px;
    }
    body::-webkit-scrollbar-thumb{
        border-radius: var(--scroll-bar-border-radius--mobile);
    }
}
@media screen and (min-width: 1200px){
    body{
        scrollbar-width: var(--scroll-bar-width--desktop);
    }
    body::-webkit-scrollbar{
        width: var(--scroll-bar-width--desktop);
    }
    body::-webkit-scrollbar-thumb{
        border-radius: var(--scroll-bar-border-radius--desktop);
    }
}
div *{
    scrollbar-width: var(--scroll-bar-width--phone);
    scrollbar-color: var(--scroll-bar-color) transparent;
}
div *::-webkit-scrollbar{
    width: var(--scroll-bar-width--phone);
}
div *::-webkit-scrollbar-track{
    background: transparent;
}
div *::-webkit-scrollbar-thumb{
    background-color: var(--scroll-bar-color);
    border-radius: var(--scroll-bar-radius-div);
    border: 3px solid var(--scroll-bar-bg-color);
}
@media screen and (max-width: 991px){
    div *{
        scrollbar-width: 1rem;
    }
    div *::-webkit-scrollbar{
        width: 1rem;
    }
    div *::-webkit-scrollbar-thumb{
        border-radius: var(--scroll-bar-radius-div);
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    div *{
        scrollbar-width: 1rem;
    }
    div *::-webkit-scrollbar{
        width: 1rem;
    }
    div *::-webkit-scrollbar-thumb{
        border-radius: var(--scroll-bar-radius-div);
    }
}
@media screen and (min-width: 1200px){
    div *{
        scrollbar-width: var(--scroll-bar-width--phone);
    }
    div *::-webkit-scrollbar{
        width: var(--scroll-bar-width--phone);
    }
    div *::-webkit-scrollbar-thumb{
        border-radius: var(--scroll-bar-radius-div);
    }
}
.border-ltr{
    border-left : solid;
    border-right: solid;
    border-top  : solid;
    border-width: 1px;
    border-color: black;
}
.border-lrb{
    border-left  : solid;
    border-right : solid;
    border-bottom: solid;
    border-width : 1px;
    border-color : black;
}
.borders{
    border      : solid;
    border-width: 1px;
    border-color: black;
}
.borders-gray{
    border: solid 1px #B1A9A9;
}
.borders-gray-lrb{
    border-left  : solid;
    border-right : solid;
    border-bottom: solid;
    border-width : 1px;
    border-color : #B1A9A9;
}
.red-border{
    border: solid 1px crimson!important;
}
.pink-border{
    border: solid 1px palevioletred!important;
}
.blue-border{
    border: solid 1px darkblue!important;
}
.green-border{
    border: solid 1px darkgreen!important;
}
.gray-border{
    border: solid 1px gray!important;
}
.yellow-border{
    border: solid 1px yellow!important;
}
.pos-sticky{
    position: sticky!important;
}
.font-crimson{
    color: #FF4B4B;   
}
body{
    font-family: var(--font-family--normal);
    position: relative;
}
.page-container{
    overflow: hidden;
}
.page-content{
    min-width: 100%!important;
}
.z250{
    z-index: 250;
}
.fg-title-connexion{
    color: #93ADBC;
}
.fg-close-burger{
    top: -6px!important;
    color: rgba(204, 204, 204, .75);
}
.fg-crimson{
    color: crimson;
}
.fg-salmon{
    color: salmon;
}
.fg-greyy{
    color: #D3DEE3;
}
.fg-darkSalmon{
    color: darksalmon;
}
.p-col-g,
.p-col-g-pix{
    z-index: 50;
    padding: 0;
    margin: 0;
    border-top-left-radius: var(--size-round-5);
    border-top-right-radius: var(--size-round-5);
}
.sidebar-copyright{
    top: 132px; 
}
.sidebar-header{
    background-repeat:no-repeat; 
    background-size:auto!important;
    background-position: center top 10px;
}
.sidebar-cls{
    width: auto!important; 
    min-width: 290px!important; 
    max-width: 99vw!important;
    min-height: 75vh!important;
    height: auto!important;
    /*max-height: 99vh!important;*/
    overflow-y: auto; 
    z-index: 100;
}
.menu-v{
    height: 100%!important;
}
.col-middle,
.col-middle-audio{
    height: var(--max-height--col-middle);
    min-height: var(--max-height--col-middle);
    max-height: var(--max-height--col-middle);
    max-width: 100%;
    width: 100%;
    padding-top: 0;
    margin: 1rem 0 0 0;
    overflow: hidden scroll;
}
.col-middle-index{
    max-width: 100%;
    width: 100%;
    padding-top: 0;
    /*padding-bottom: 16px;*/
    margin: 1rem 0;
}
.col-middle-pix{
    overflow: auto;
    margin: 1rem auto;
}
.index-img-container{
    background-attachment: local, scroll;
}
.index-img-container img{
    object-position: 50% 50%;
}
.container-infos-bible,
.container-content-bible{
    margin: 0 auto 1.5rem auto;
}
/*@media (max-width: 575px) { xs }*/
/*@media (max-width: 767px) { sm }*/
/*@media (max-width: 991px) { md }*/
/*@media (max-width: 1199px) { lg }*/
/*@media (max-width: 1399px) { xl }*/
/*@media (min-width: 1400px) { xxl }*/

@media screen and (max-width: 239px){
    .col-middle,
    .col-middle-audio,
    .col-middle-pix{
        padding-left: 4px;
        padding-right: 4px;
        margin: .25rem 0 0 0;
    }
    .container-infos-bible,
    .container-content-bible{
        padding: 4px;
    }
}
@media screen and (min-width:240px) and (max-width: 440px){
    .col-middle,
    .col-middle-audio,
    .col-middle-pix{
        padding-left: 8px;
        padding-right: 8px;
        margin: .3rem 0 0 0;
    }
    .container-infos-bible,
    .container-content-bible{
        padding: 6px;
    }
}
@media screen and (min-width:440.1px) and (max-width: 571px){
    .col-middle,
    .col-middle-audio,
    .col-middle-pix{
        padding-left: calc(3.5 * 100vw / 100);
        padding-right: calc(3.5 * 100vw / 100);
        margin: .33rem 0 0 0;
    }
    .container-infos-bible,
    .container-content-bible{
        padding: 8px;
    }
}
@media screen and (min-width:572px){
    .container-infos-bible,
    .container-content-bible{
        padding: 8px;
    }
}
@media screen and (min-width:572px) and (max-width: 839px){
    .col-middle,
    .col-middle-audio,
    .col-middle-pix{
        padding-left: calc(4 * 100vw / 100);
        padding-right: calc(4 * 100vw / 100);
        margin: .45rem 0 0 0;
    }
}
@media screen and (min-width:840px) and (max-width: 1199px){
    .col-middle,
    .col-middle-audio,
    .col-middle-pix{
        padding-left: calc(5 * 100vw / 100);
        padding-right: calc(5 * 100vw / 100);
        margin: .6rem 0 0 0;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1399px){
    .col-middle,
    .col-middle-audio,
    .col-middle-pix{
        padding-left: calc(2.5 * 100vw / 100);
        padding-right: calc(2.5 * 100vw / 100);
    }
    .col-middle,
    .col-middle-audio,
    .col-middle-pix,
    .p-col-g,
    .p-col-g-pix{
        margin: .75rem 0 0 0;
    }
}
@media screen and (min-width: 1400px){
    .col-middle,
    .col-middle-audio,
    .col-middle-pix{
        padding-left: calc(3.2 * 100vw / 100);
        padding-right: calc(3.2 * 100vw / 100);
    }
    .col-middle,
    .col-middle-audio,
    .col-middle-pix,
    .p-col-g,
    .p-col-g-pix{
        margin: 1rem 0 0 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px){
    .p-col-g,
    .p-col-g-pix{
        padding: 2px 4px;
        margin: 0;
        display: flex;
    }
}
@media screen and (min-width: 1200px){
    .p-col-g,
    .p-col-g-pix{
        height: 81.25vh;
        min-height: 81.25vh;
        max-height: 81.25vh;
        padding: 0 2px 0 1px;
        /* margin: 1rem auto 1rem; */
        overflow: auto;
    }
    .menu-v{ 
        height: 100%;
        padding: 0 4px 0 2px;
        margin: 0 auto;
    }
}
.col-100{
    width: 100%!important;
}
.menu-ul-scroll{
    overflow: hidden auto;
    height: auto;
    max-height: 28vh;
    -webkit-transition: all .33s ease-in-out!important;
    transition        : all .33s ease-in-out!important;
}
.menu-mobile-ul-scroll{
    overflow: auto;
    height: auto;
    max-height: 47vh;
}
.menu-li-scroll{
    overflow: auto;
    height: auto;
    max-height: 65vh;
    /*-webkit-transition: all .33s ease-in-out!important;
    transition        : all .33s ease-in-out!important;*/
}
.menu-item,
.menu-item-hover{
    -webkit-transition: all .33s;
    transition        : all .33s;
}
.menu-item-tablette{
    -webkit-transition: all .15s;
    transition        : all .15s;
}
.box-resume-video{
    background-color: #1F1F1F!important;
    border: solid 1px #72787E;
    color: #C7CBD1;
    font-size: .8em;
}
.box-infos-down,
.box-infos-play{
    padding: .5rem;
}
.infos-down{
    padding-left: .25rem;
    padding-right: .25rem;
}
.infos-mobile{
    font-size: .75rem;
    padding: .125em;
}
/* 1 */
.infos-down:nth-child(1){
    margin: .5rem auto .125rem auto;
    padding-top: .125rem;
    padding-bottom: .6rem;
}
/* pair */
.infos-down:nth-child(even){
    margin-top: .25rem;
    margin-bottom: .6rem;
}
/* impair */
.infos-down:nth-child(odd){
    margin-top: .25rem;
    margin-bottom: .6rem;
}
/* dernier */
.infos-down:nth-last-child(-n+1){
    margin: .125rem auto .5rem auto;
    padding-top: .125rem;
    padding-bottom: .25rem;
}
.container-player{
    max-width: 600px;
}
.divider-menu{
    padding-bottom: 2px;
}
.content-scroll{
    overflow  : scroll;
    max-height: 81vh;
}
.menu-phone-scroll{
    overflow  : auto;
    max-height: 87vh;
}
.scale-effect{ 
    -webkit-transition: all .55s cubic-bezier(.5, 1.5, 1, .8);
    transition: all .55s cubic-bezier(.5, 1.5, 1, .8);
}
.scale-effect:hover{
    cursor   : pointer;
    transform: scale(1.0115);
}
.pointer{
    cursor: pointer;
}
.cursor-infos{
    cursor: help!important;
}
.cursor-not{
    cursor: not-allowed!important;
}
.d-nav{
    z-index: 50;
}
.html-div{
    height: 100%;
}
.body-div{
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.footer-connexion{
    margin-left : auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 2px;
    padding: 5px 5px 0 5px;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: auto;
}
.footer{
    flex-shrink: 0;
    margin: auto auto 0 auto;
    padding: 5px 5px 8px 5px;
}
.footer-infos{
    -webkit-box-pack: end;
    -ms-flex-pack   : end;
    justify-content : flex-end;
}
.copyright{
    margin: 2px auto 0px auto;
    font-size: 1em;
}
.footer-img img{
    border-style: none;
}
.footer-img{
  width    : 100%;
  max-width: 256px;
  height   : auto;
}
.footer-infos a{
    font-weight    : bold;
    text-decoration: none;
}
.list-none{
    list-style-type: none;
}
.deco-none{
    text-decoration: none;
}
.deco-none:hover{
    text-decoration: none;
}
/* perso link */
.link-cover{
   /* RESET */
   text-decoration   : none;
   line-height       : 1;
   position          : relative;
   z-index           : 0;
   display           : inline-block;
   padding           : 4px 2px;
   overflow          : hidden;
   vertical-align    : bottom;
   -webkit-transition:color .45s ease-out;
   transition        : color .45s ease-out;
}
.link-cover::before{
   content           : "";
   position          : absolute;
   z-index           : -1;
   top              : 0;
   left             : 0;
   -webkit-transform: translateY(calc(100% - 2px));
   transform        : translateY(calc(100% - 2px));
   width             : 100%;
   height            : 100%;
   -webkit-transition: transform .25s ease-out;
   transition        : transform .25s ease-out;
}
.link-cover:hover::before{
   transform         : translateY(0);
   -webkit-transition: transform .25s ease-out;
   transition        : transform .25s ease-out;
}
a.link-persist{ 
    -webkit-transition: all .33s ease-in-out;
    transition        : all .33s ease-in-out;
}
.link-presentation,
.item-footer,
.link-public{
    padding-top       : 1em;
    padding-bottom    : 1em;
    vertical-align    : center;
    -webkit-transition: all .33s ease-in-out;
    transition        : all .33s ease-in-out;
}
.link-me{
    color             : #b13c2e;
    font-family       : "Viga", sans-serif;
    font-weight       : 900;
    letter-spacing    : .5px;
    text-align        : center;
    z-index           : 10;
    -webkit-transition: all .33s ease-in-out;
    transition        : all .33s ease-in-out;
}
.link-me:hover{
  text-align        : center;
  font-size         : 1rem;
  font-weight       : normal;
  text-shadow       : 0px 0px 5px #fff, 0px 0px 7px #fff;
  color             : black;
  -webkit-transition: all .33s ease-in-out;
  transition        : all .33s ease-in-out;
}
.z-menu{
    z-index: 99999;
}
/** up button */
.up-btn{
    width       : 50px;
    height      : 50px;
    right       : 3rem;
    bottom      : 4rem;
    opacity     : .7;
    cursor      : pointer;
    position    : fixed;
    z-index     : 120;
    padding     : 10px;
    margin-right: 1rem;
    box-sizing     : border-box;
    display        : flex;
    justify-content: center;
    align-items    : center;
    -webkit-transform : scale(1);
    transform         : scale(1);
    -webkit-transition: all .4s ease-in-out;
    transition        : all .4s ease-in-out;
}
.up-btn.up-btn__hide{
    opacity  : 0;
    -webkit-transform: scale(0);
    transform        : scale(0);
    -webkit-transition: all .4s ease-in-out;
    transition        : all .4s ease-in-out;
}
.up-btn:hover{
    opacity: 1;
    -webkit-transform: scale(1.125);
    transform        : scale(1.125);
}
.up-btn.up-btn_circle{
    border-radius: 50%;
}
.up-btn__img{
    max-width: 100%;
}
/* button perso*/
.button-anime{
    width: 85%;
    height: 2.5rem;
    background    : none;
    border        : 0;
    box-sizing    : border-box;
    padding       : 4px;
    padding-bottom: 6px;
    font-size     : 1.25rem;
    font-weight   : normal;
    position      : relative;
    vertical-align: middle;
    text-align: center;
    -webkit-transition:transform .33s ease; /* cubic-bezier(.5, 1.75, 1, .8);*/
    transition        : transform .33s ease; /* cubic-bezier(.5, 1.75, 1, .8);*/
}
.button-anime::before, 
.button-anime::after{
    box-sizing: inherit;
    content   : '';
    position  : absolute;
    width     : 100%;
    height    : 100%;
}
.button-anime:hover{
    -webkit-transform: scale(1.075);
    transform        : scale(1.075);
    cursor           : pointer;
    border-radius    : 15px;
}
.but-center::before, 
.but-center::after,
.but-center-red::before, 
.but-center-red::after{
    top             : 0;
    left            : 0;
    height          : 100%;
    width           : 100%;
    transform-origin: center;
}
.but-center:hover::before, 
.but-center:hover::after,
.but-center-red:hover::before, 
.but-center-red:hover::after{
    border-radius: 15px;
    -webkit-transform : scale3d(1, 1, 1);
    transform : scale3d(1, 1, 1);
    -webkit-transition:transform .33s;
    transition: transform .33s;
}
.but-center-connexion::before, 
.but-center-connexion::after{
    top             : 0;
    left            : 0;
    height          : 100%;
    width           : 100%;
    transform-origin: center;
}
.but-center-connexion:hover::before, 
.but-center-connexion:hover::after{
    border-radius: 15px;
    -webkit-transform : scale3d(1, 1, 1);
    transform : scale3d(1, 1, 1);
    -webkit-transition:transform .33s;
    transition: transform .33s;
}
.pix-bt,
.pix-bt-input-file,
.pix-bt-valider,
.pix-bt-show,
.pix-bt-edit,
.pix-bt-ok,
.pix-bt-cancel{
    font-weight        : 700;
    border-style       : solid;
    border-color       : black;
    -webkit-transition:all .33s;
    transition: all .33s;
}
.pix-bt-disabled:hover{
    cursor: not-allowed;
}

.pix-bt:hover,
.pix-bt-valider:hover,
.pix-bt-show:hover,
.pix-bt-edit:hover,
.pix-bt-ok:hover,
.pix-bt-cancel:hover{
    cursor            : pointer;
    border-radius     : 4px;
    -webkit-transform : scale(1.0225);
    transform         : scale(1.0225);
    -webkit-transition: transform .55s cubic-bezier(.5, 2.5, 1, .8);
    transition        : transform .55s cubic-bezier(.5, 2.5, 1, .8);
}
.pix-bt-input-file:hover{
    cursor            : pointer;
    border-radius     : 4px;
    -webkit-transition: all .55s;
    transition        : all .55s;
}
.h-top-bar{
    box-shadow: rgba(255, 255, 255, .07) 0 1px 0 inset;
    border-top: 2px solid #121212;
    width: 100%;
}
.h-bottom-bar{
    box-shadow: rgba(255, 255, 255, .07) 0 1px 0 inset;
    border-bottom: 1px solid #121212;
    width: 100%;
}
.h-bottom-shad{
    box-shadow: rgba(255, 255, 255, .07) 0 1px 0 inset;
    width: 100%;
}
.v-bar{
    box-shadow: rgba(255, 255, 255, .07) 1px 0 0 inset;
    border-left: 1px solid #121212;
}
.h-separate{
    height: 4px;
    min-height: 4px;
    max-height: 4px;
}
.img-respons-round-5{
    border-radius: var(--size-round-5);
}
.borders-radius-bl-tl-5{
    border-bottom-left-radius: 5px;
    border-top-left-radius   : 5px;
}
.round-5{
    border-radius: var(--size-round-5);
}
.round-t-5,
.round-t-5-respons{
    border-top-left-radius: var(--size-round-5);
    border-top-right-radius: var(--size-round-5);
}
.round-b-5,
.round-b-5-respons{
    border-bottom-left-radius: var(--size-round-5);
    border-bottom-right-radius: var(--size-round-5);
}
.round-t-l-5{
    border-top-left-radius: var(--size-round-5);
}
.round-b-r-5{
    border-bottom-right-radius: var(--size-round-5);
}
@media screen and (min-width: 768px) and (max-width: 1199px){
    .img-respons-round-5{
        border-radius: 0px;
    }
    .round-t-5-respons{
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .round-b-5-respons{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
.titre-logo{
  font-weight: bold;
  color      : #6E6D81;
  font-family: cursive;
  width      : 100%;
}
.text-hide{
    display: none;
}
.hide-error{
    display: none;
}
.show-error{
    display: inline-block;
}
.error-label{
    font-size: 1em;
    font-weight: 700;
    margin-top: .25rem;
    padding: .25rem;
}
.input-img:hover{
    cursor: pointer;
}
/* hints/tooltips */
.hints{
    height: auto;
    margin: 0 auto 16px auto!important;
    font-size: .9em;
}
.hints ul,
.hints ol{ 
    margin: auto 8px;
    text-align: left;
}
.tooltips{
    cursor    : help;
    text-align: center;
}
@media screen and (max-width: 319px){
    .hints{
        max-width: 300px;
        min-width: 300px;
        left: 50%!important;
        transform: translateX(-50%)!important;
    }
}
@media screen and (min-width: 320px) and (max-width: 767px){
    .hints{
        width: 90%;
        max-width: 84vw;
        left: 50%!important;
        transform: translateX(-50%)!important;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    .hints{
        width: auto;
        max-width: 640px;
        left: 50%!important;
        transform: translateX(-50%)!important;
    }
}
@media screen and (min-width: 992px){
    .hints{
        max-width: 640px;
        width: auto;
    }
}
.showHint{
    animation-name: hintIn;
    animation-duration: .5s;
}
.hideHint{
    animation-name: hintOut;
    animation-duration: .5s;
}
@media screen and (max-width: 1199px){
    @keyframes hintIn{
        0%{
            /*transform: translate3d(0, -200px, 0) scale3d(.1, .1, .1);*/
            opacity: 0;
        }
        /*25%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            opacity: .25;
        }
        50%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            opacity: .5;
        }
        75%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            opacity: .75;
        }*/
        100%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            /*animation-timing-function: cubic-bezier(.47, 0, .745, .715);*/
            opacity: 1;
            /*transform: translate3d(0, 0, 0) scale3d(1, 1, 1);*/
        }
    }
    @keyframes hintOut{
        0%{
            animation-timing-function: cubic-bezier(.25, .46, .45, .94);
            opacity: 1;
        }
        /*25%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            opacity: .75;
        }
        50%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            opacity: .5;
        }
        60%{
            animation-timing-function: cubic-bezier(.0, -.25, .2, 2);
            opacity: .5;
        }*/
        100%{
            animation-timing-function: cubic-bezier(.0, -.25, .2, 2.25);
            opacity: 0;
        }
    }
}
@media screen and (min-width: 1200px){
    @keyframes hintIn{
        0%{
            transform: translate3d(0, -200px, 0) scale3d(.1, .1, .1);
            opacity: 0;
        }
        100%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            opacity: 1;
            transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        }
    }
    @keyframes hintOut{
        0%{
            opacity: 1;
            animation-timing-function: cubic-bezier(.25, .46, .45, .94);
            transform: scale3d(1, 1, 1);
        }
        50%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            ttransform: translate3d(0, -50px, 0) scale3d(.75, .75, .75);
            opacity: .75;
        }
        75%{
            animation-timing-function: cubic-bezier(.42, 0, .58, 1);
            transform: translate3d(0, -100px, 0) scale3d(.1, .1, .1);
            opacity: .5;
        }
        100%{
            opacity: 0;
            animation-timing-function: cubic-bezier(.47, 0, .745, .715);
            transform: translate3d(0, -200px, 0) scale3d(.00125, .00125, .00125);
        }
    }
}
.bg-dark-fg-green{
    background-color: rgba(33, 33, 33, 1);
    border: solid 1px rgba(155, 155, 155, .7);
    color           : var(--fg-tips);
}
.bg-black{
    background-color: black;
}
.text-i{
    font-style: italic;
}
.text-u{
    text-decoration: underline var(--color-underline);
    text-underline-position: under!important;
}
.text-b{
    font-weight: bold;
}
.text-iu,
.text-ui{
    text-decoration: underline var(--color-underline);
    font-style: italic;
}
.text-bu,
.text-ub{
    font-weight: bold;
    text-decoration: underline var(--color-underline);
    text-underline-position: under!important;
}
.text-bi,
.text-ib{
    font-style: italic;
    font-weight: bold;
}
.text-ibu,
.text-ubi{
    text-decoration: underline var(--color-underline);
    font-weight: bold;
    font-style: italic;
}
.text-uw{
    text-decoration: underline wavy var(--color-underline);
    text-underline-position: under!important;
}
.text-uo{
    text-decoration: underline overline var(--color-underline);
}
.text-uob{
    font-weight: bold;
    text-decoration: underline overline var(--color-underline);
}
.text-u-dot{
    text-decoration: underline dotted var(--color-underline);
}
.text-cros{
    text-decoration: line-through;
}
/*.span-mb-2r{
    margin-bottom: 2rem!important;
}
.span-mt-2r{
    margin-top: 1.5em!important;
}*/
svg#emojiPalettes{
    display: none;
}
.span-emoji{
    font-size:1.25em
}
.smirking-face::before{
    content: '😏';
}
.head-reverse::before{
    content: '🙃';
}
.confused-face::before{
    content: '😕';
}
.closed-mouth::before{
    content: '🤐';
}
.doubtful-face::before{
    content: '🤔';
}
.confouded-face::before{
    content: '😖';
}
.tongue-stuck-out-and-winking-eye-face::before{
    content: '😜';
}
.angry-face::before{
    content: '😠';
}
.screaming-face::before{
    content: '😱';
}
.laughing-louds-face::before{
    content: '😂';
}
.rolling-laughing-face::before{
    content: '🤣';
}
.smile-face::before{
    content: '🙂'; /* 01F642 */
}
/* prend la valeur filter du svg */
.emoji-red{
    -webkit-filter: url(#red);
            filter: url(#red);
}
.emoji-black{
    /*-webkit-filter: url(#black);
            filter: url(#black);*/
    filter: sepia(60%) grayscale(100%) drop-shadow(12px 12px 20px black); /* sepia(1)  drop-shadow(16px 16px 20px rgba(150, 73, 69, 1))*/
}
.span-in-title{
    font-size: .8em;
}
.god-name-hebraic,
.font-hebraic{
    font-family: 'Frank Ruhl Libre', serif;
    font-weight: 500;
}
.god-name-hebraic{
    font-size: 3em;
}
.god-name{
    font-size: 2em;
}
.font-hebraic{
    font-size: 1.75em;
}
.font-size-plus{
     font-size: calc(3rem);
}
@media screen and (max-width: 351px){
    .god-name-hebraic{
        /*font-size: calc(var(--font-size-title-h3-mobile) * var(--font-size-ratio));*/
        font-size: calc(1.05rem + 1.2vw);
    }
    .god-name{
        /*font-size: calc(var(--font-size-title-h5-mobile) * var(--font-size-ratio));*/
        font-size: calc(.75rem + 1.2vw);
    }
    .font-hebraic{
        font-size: 1.45em;
    }
    .font-size-plus{
        font-size: calc(2.25em + 1.2vw);
    }
}
@media screen and (min-width: 352px) and (max-width: 479px){
    .god-name-hebraic{
        /*font-size: calc(var(--font-size-title-h3-mobile) * var(--font-size-ratio));*/
        font-size: calc(1.25rem + 1.2vw);
    }
    .god-name{
        /*font-size: calc(var(--font-size-title-h5-mobile) * var(--font-size-ratio));*/
        font-size: calc(.75rem + 1.2vw);
    }
    .font-hebraic{
        font-size: 1.55em;
    }
    .font-size-plus{
        font-size: calc(2.5em + 1.2vw);
    }
}
@media screen and (min-width: 480px) and (max-width: 767px){
    .god-name-hebraic{
        /*font-size: calc(var(--font-size-title-h3-mobile) * var(--font-size-ratio));*/
        font-size: calc(1.75rem + 1.2vw);
    }
    .god-name{
        /*font-size: calc(var(--font-size-title-h5-mobile) * var(--font-size-ratio));*/
        font-size: calc(1.125rem + 1.2vw);
    }
    .font-hebraic{
        font-size: 1.65em;
    }
    .font-size-plus{
        font-size: calc(2.75em + 1.2vw);
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px){
    .god-name-hebraic{
        /*font-size: calc(var(--font-size-title-h3-mobile) * var(--font-size-ratio));*/
        font-size: calc(1.85rem + 1.2vw);
    }
    .god-name{
        /*font-size: calc(var(--font-size-title-h5-mobile) * var(--font-size-ratio));*/
        font-size: calc(1.175rem + 1.2vw);
    }
    .font-hebraic{
        font-size: 1.7em;
    }
    .font-size-plus{
        font-size: calc(3em + 1.2vw);
    }
}
.font-plus-1-15{
    font-size: 1.15em;
}
.text-center{
    text-align: center!important;
    margin-right: auto;
    margin-left: auto;
}
.d-desktop-eyes{
    display: none;
}

@media screen and (max-width: 319px){
    .titre-connect{
        margin-top: 1rem;
        font-size: 1em;
    }
    .sous-titre-connect{
        font-size: 1.125em;
    }
}
@media screen and (min-width: 320px) and (max-width: 419px){
    .titre-connect{
        font-size: 1.125em;
        margin-top: 1rem;
    }
    .sous-titre-connect{
        font-size: 1.125em;
    }
}
@media screen and (min-width: 420px) and (max-width: 575px){
    .titre-connect{
        font-size: 1.75em;
        margin-top: 1rem;
    }
    .sous-titre-connect{
        font-size: 1.125em;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px){
    .titre-connect{
        font-size: 2.25em;
        margin-top: 1rem;
    }
    .sous-titre-connect{
        font-size: 1.35em;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px){
    .titre-connect{
        font-size: 2.75em;
        margin-top: 1rem;
    }
    .sous-titre-connect{
        font-size: 1.5em;
    }
}
@media screen and (min-width: 1200px){
    .titre-connect{
        font-size: 3em;
    }
    .sous-titre-connect{
        font-size: 1.75em;
    }
    .d-desktop-eyes{
        display: block;
        /* justify-content: end;
        align-items: center; */
    }
}
/*@media screen and (min-width: 1200px){
}*/
@media screen and (max-width: 767px){
    .d-phone{
        display: block;
    }
    .d-mobile{
        display: block;
    }
    .d-tablette{
        display: none;
    }
    .p-col-g{
        display: none;
    }
    .p-col-g-pix{
        display: none;
    }
    .d-desktop{
        display: none;
    }
    .d-nav{
        display: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px){
    .d-phone{
        display: none;
    }
    .d-mobile{
        display: block;
    }
    .d-tablette{
        display: block;
    }
    .d-desktop{
        display: none;
    }
    .d-nav{
        display: none;
    }
}
@media screen and (min-width: 1200px){
    .d-phone{
        display: none;
    }
    .d-tablette{
        display: none;
    }
    .d-mobile{
        display: none;
    }
    .d-desktop{
        display: block;
    }
    .div-select-scroll{
        overflow: auto;
        height: 400px;
    }
    .d-nav{
        display: block;
    }
}
@media screen and (max-width: 1199px){
    .d-phone-footer{
        display: flex!important;
    }
    .d-desktop-footer{
        display: none!important;
    }
}
@media screen and (min-width: 1200px){
    .d-phone-footer{
        display: none!important;
    }
    .d-desktop-footer{
        display: flex!important;
    }
    .index-padding-map{
        padding-top: 92px;
    }
}
/** ICILA*/
@media screen and (max-width: 1199px){
    /*.footer{
        display: none!important;
    }*/
}
.bo-header-title,
.mentions-header-title,
.about-header-title{
    font-family: var(--font-family--about-header-title);
    font-weight: 700;
    text-align : center;
}
.mentions-header,
.about-header{
    margin     : 0;
    padding    : 0;
    font-family: var(--font-family--about-header);
}
@media screen and (max-width: 575px){
    .about-header-title,
    .mentions-header-title{
        font-size: 2.125rem;
    }
    .bo-header-title{
        font-size: 1.75rem;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px){
    .about-header-title,
    .mentions-header-title{
        font-size: 2.75rem;
    }
    .bo-header-title{
        font-size: 2rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 991){
    .about-header-title,
    .mentions-header-title{
        font-size: 3.75rem;
    }
    .bo-header-title{
        font-size: 3rem;
    }
}
@media screen and (min-width: 992px){
    .about-header-title,
    .mentions-header-title{
        font-size: 5rem;
    }
    .bo-header-title{
        font-size: 4rem;
    }
}
.name-app{
    font-weight   : 700;
    padding-top   : auto;
    padding-bottom: auto;
    vertical-align: baseline;
}
/* title */
.title-index-second,
.title-index{
    font-family   : var(--font-family--title-index);
    font-weight   : 900;
    letter-spacing: .5px;
    text-align    : center;
    z-index       : 1;
}
.title-bible-book,
.title-bible-epoq{
    font-family   : var(--font-family--title-bible);
    font-weight   : 900;
    letter-spacing: .5px;
    text-align    : center;
    z-index       : 1;
}
.title-header-bible,
.title-header,
.title-header-pix{
    font-weight: 400;
    text-align: center;
    z-index: 1;
}
.title-header-bible,
.title-header{
    font-family: var(--font-family--title-header);
    /* letter-spacing: .5px; */
}
.title-header-pix{
    font-family: var(--font-family--title-header-pix);
    font-weight: bold;
    /* letter-spacing: .5px; */
}
@media screen and (max-width: 417px){
    .title-header-bible{
        font-size: 1.75rem;
    }
    .title-header{
        font-size: 2rem;
    }
}
@media screen and (min-width: 418px) and (max-width: 575px){
    .title-header-bible{
        font-size: 1.75rem;
    }
    .title-header{
        font-size: 2rem;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px){
    .title-header-bible{
        font-size: 2rem;
    }
    .title-header{
        font-size: 2.25rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    .title-header-bible{
        font-size: 2.5rem;
    }
    .title-header{
        font-size: 2.75rem;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    .title-header-bible{
        font-size: 2.5rem;
    }
    .title-header{
        font-size: 2.75rem;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1279px){
    .title-header-bible{
        font-size: 1.9rem;
    }
    .title-header{
        font-size: 2.15rem;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1399px){
    .title-header-bible{
        font-size: 2.125rem;
    }
    .title-header{
        font-size: 2.25rem;
    }
}
@media screen and (min-width: 1400px) and (max-width: 1443px){
    .title-header-bible{
        font-size: 2.125rem;
    }
    .title-header{
        font-size: 2.25rem;
    }
}
@media screen and (min-width: 1444px){
    .title-header-bible{
        font-size: 2.5rem;
    }
    .title-header{
        font-size: 2.75rem;
    }
}

.title-bible-infos{
    font-size: 1.5rem;
}
@media screen and (max-width: 575px){
    .title-bible-infos{
        font-size: 1rem;
    }
    .title-bible-book{
        font-size: 1rem;
        /* font-size: calc(var(--font-size-title-h2-mobile) * var(--font-size-ratio)); */
    }
    .title-bible-epoq{
        font-size: 1.125rem;
        /* font-size: calc(var(--font-size-title-h1-mobile) * var(--font-size-ratio)); */
    }
    .infos-down{
        font-size: .85rem;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px){
    .title-bible-infos{
        font-size: 1.25rem;
    }
    .title-bible-book{
        font-size: 1.125rem;
    }
    .title-bible-epoq{
        font-size: 1.25rem;
    }
    .infos-down{
        font-size: .9rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    .title-bible-infos{
        font-size: 1.375em;
    }
    .title-bible-book{
        font-size: 1.25rem;
    }
    .title-bible-epoq{
        font-size: 1.375rem;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    .title-bible-infos{
        font-size: 1.375rem;
    }
    .title-bible-book{
        font-size: 1.375rem;
    }
    .title-bible-epoq{
        font-size: 1.5rem;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1359px){
    .title-bible-book{
        font-size: 1.5rem;
    }
    .title-bible-epoq{
        font-size: 1.625rem;
    }
}
@media screen and (min-width: 1360px) and (max-width: 1399px){
    .title-bible-book{
        font-size: 1.625rem;
    }
    .title-bible-epoq{
        font-size: 1.75rem;
    }
}
@media screen and (min-width: 1400px) and (max-width: 1599px){
    .title-bible-book{
        font-size: 1.75rem;
    }
    .title-bible-epoq{
        font-size: 1.875rem;
    }
}
@media screen and (min-width: 1600px) and (max-width: 1919px){
    .title-bible-book{
        font-size: 1.875rem;
    }
    .title-bible-epoq{
        font-size: 2rem;
    }
}
@media screen and (min-width: 1920px){
    .title-bible-book{
        font-size: 2rem;
    }
    .title-bible-epoq{
        font-size: 2.125rem;
    }
}
@-webkit-keyframes changeColor{
    0%{
        -webkit-filter: hue-rotate(0deg);
                filter: hue-rotate(0deg);
    }
    100%{
        -webkit-filter: hue-rotate(360deg);
                filter: hue-rotate(360deg);
    }
}
@keyframes changeColor{
    0%{
        -webkit-filter: hue-rotate(0deg);
                filter: hue-rotate(0deg);
    }
    100%{
        -webkit-filter: hue-rotate(360deg);
                filter: hue-rotate(360deg);
    }
}
.section-publication{
    box-shadow: 1px 1px 6px #8b5f74; /*555;*/
    border-radius: 10px;
}
.text-article ul,
.text-article ol{
    margin-left: inherit!important;
}
.text-article dd > ul,
.text-article dd > ol{
    margin-left: 8px!important;
}
.text-article ul > li,
.text-article ol > li{
    margin-left: .25rem!important;
}
.section-publication ul > li > ol > li,
.section-publication ul > li > ul > li,
.section-publication ol > li > ol > li,
.section-publication ol > li > ul > li{
    padding-left: .25rem!important;
}
dl,
dt,
dd{
    margin-left: 4px!important;
}
@media screen and (max-width: 360px){
    .text-article dd > ul,
    .text-article dd > ol{
        margin-left: 0!important;
    }
    .text-article ul,
    .text-article ol{
        margin-left: 4px!important;
    }
    .text-article ul > li,
    .text-article ol > li{
        margin-left: 4px!important;
    }
    .section-publication ul > li > ol > li,
    .section-publication ul > li > ul > li,
    .section-publication ol > li > ol > li,
    .section-publication ol > li > ul > li{
        padding-left: 4px!important;
    }   
}
/*.section-publication li{
    margin-top: .25rem;
    margin-bottom: .25rem;
    text-align: justify;
}*/
.title-publication,
.sub-title-publication{
    font-family   : var(--font-family--title-publication);
    letter-spacing: .5px;
    z-index       : 1;
}
.sub-title-index-second,
.sub-title-index-first{
    font-family   : var(--font-family--sub-title-index);
    letter-spacing: .5px;
    z-index       : 1;
}
.sub-title-index-first{
    font-weight: 900;
}
.title-publication{
    /*font-size: 3rem;*/
    font-weight: 900;
}
.date-publication{
    font-size: 1.25rem;
}
@media screen and (max-width: 411px){
    .date-publication{
        font-size: .85rem;
    }
    .title-index{
        font-size: 1.25rem;
    }
    .title-index-second{
        font-size: 1.125rem;
    }
    .sub-title-index-first{
        font-size: 1rem;
    }
    .sub-title-index-second{
        font-size: .85rem;
    }
    .title-publication{
        font-size: 1.25rem;
    }
    /*.sub-title-publication{
        font-size: 1.125rem;
    }*/
}
@media screen and (min-width: 412px) and (max-width: 575px){
    .date-publication{
        font-size: .9rem;
    }
    .title-index{
        font-size: 1.5rem;
    }
    .title-index-second{
        font-size: 1.25rem;
    }
    .sub-title-index-first{
        font-size: 1.125rem;
    }
    .sub-title-index-second{
        font-size: 1.1rem;
    }
    .title-publication{
        font-size: 1.5rem;
    }
    /*.sub-title-publication{
        font-size: 1.125rem;
    }*/
}
@media screen and (min-width: 576px) and (max-width: 767px){
    .date-publication{
        font-size: 1rem;
    }
    .title-index{
        font-size: 1.75rem;
    }
    .title-index-second{
        font-size: 1.5rem;
    }
    .sub-title-index-first{
        font-size: 1.25rem;
    }
    .sub-title-index-second{
        font-size: 1.125rem;
    }
    .title-publication{
        font-size: 1.75rem;
    }
    /*.sub-title-publication{
        font-size: 1.5rem;
    }*/
}
@media screen and (min-width: 768px) and (max-width: 991px){ 
    .title-index{
        font-size: 2rem;
    }
    .title-index-second{
        font-size: 1.75rem;
    }
    .sub-title-index-first{
        font-size: 1.5rem;
    }
    .sub-title-index-second{
        font-size: 1.25rem;
    }
    .title-publication{
        font-size: 2rem;
    }
    /*.sub-title-publication{
        font-size: 1.75rem;
    }*/
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    .title-index{
        font-size: 2.25rem;
    }
    .title-index-second{
        font-size: 2rem;
    }
    .sub-title-index-first{
        font-size: 1.75rem;
    }
    .sub-title-index-second{
        font-size: 1.5rem;
    }
    .title-publication{
        font-size: 2.25rem;
    }
    /*.sub-title-publication{
        font-size: 1.75rem;
    }*/
}
@media screen and (min-width: 1200px) and (max-width: 1399px){
    .title-index{
        font-size: 2.5rem;
    }
    .title-index-second{
        font-size: 2.25rem;
    }
    .sub-title-index-first{
        font-size: 2rem;
    }
    .sub-title-index-second{
        font-size: 1.75rem;
    }
    .title-publication{
        font-size: 2.75rem;
    }
    /*.sub-title-publication{
        font-size: 2rem;
    }*/
}
@media screen and (min-width: 1400px){
    .title-index{
        font-size: 2.75rem;
    }
    .title-index-second{
        font-size: 2.5rem;
    }
    .sub-title-index-first{
        font-size: 2.25rem;
    }
    .sub-title-index-second{
        font-size: 2rem;
    }
    .title-publication{
        font-size: 3rem;
    }
    /*.sub-title-publication{
        font-size: 2.25rem;
    }*/
}
/* voir clamp(18px, 3vw, 2rem)*/
@media screen and (max-width: 639px){
    .sub-title-publication{
        font-size: calc(1rem + 1.35vw);
    }
    .sub-title-second-publication{
        font-size: calc(.8rem + 1.35vw);
    }
    .sub-title-tierce-publication{
        font-size: calc(.6rem + 1.35vw);
    }
}
@media screen and (min-width: 640px) and (max-width: 1199px){
    .sub-title-publication{
        font-size: calc(.75rem + 1.35vw);
    }
    .sub-title-second-publication{
        font-size: calc(.6rem + 1.35vw);
    }
    .sub-title-tierce-publication{
        font-size: calc(.5rem + 1.35vw);
    }
}
@media screen and (min-width: 1200px) and (max-width: 1920px){
    .sub-title-publication{
        font-size: calc(.75rem + calc(.1 * 10vmax));
    }
    .sub-title-second-publication{
        font-size: calc(.5rem + calc(.1 * 10vmax));
    }
    .sub-title-tierce-publication{
        font-size: calc(.4rem + 1.35vw);
    }
}
@media screen and (min-width: 1921px){
    .sub-title-publication{
        font-size: 36px;
    }
    .sub-title-second-publication{
        font-size: 24px;
    }
    .sub-title-tierce-publication{
        font-size: 18px;
    }
}
/*@media screen and (max-width: 1399px){
    .title-publication{
        font-size: calc(1rem + 2vw);
    }
}*/
/*.sub-title-publication{
    color: darkred!important;
}*/
.title-span{
    text-align: center;
    font-size: 1.5em;
}
.finger:hover{
    cursor             : pointer;
    border-radius      : 4px;
    box-shadow         : 1px 1px 12px #ffffff;
    /* transform          : scale(1.015); */
    -webkit-transition: all .10s cubic-bezier(.5, 2.5, 1, .8);
    transition        : all .10s cubic-bezier(.5, 2.5, 1, .8);
}
/* accordions */
.accordion-btn{
    font-size: .8rem;
}
.header-accordion-title{
    font-size: 1.75rem;
    opacity  : .90;
    overflow-wrap: break-word;
    -webkit-transition: all .55s;
    transition: all .55s;
}
.accordion-container{
    padding: 0px;
}
.accordion-button,
.accordion-header{
    padding: 16px 16px 16px 16px;
    height: auto;
    -webkit-transition: all .33 ease-in-out;
    transition: all .33 ease-in-out;
}
.accordion-button-thinks:hover,
.accordion-button-testims:hover,
.accordion-button-teachs:hover,
.accordion-button-revels:hover{
    cursor: pointer;
    transform: scale(1.015);
    -webkit-transition:transform .55s cubic-bezier(.5, 1.025, 1, .8);
    transition: transform .55s cubic-bezier(.5, 1.025, 1, .8);
}
.accordion-content{
    padding: 5px;
    display: none;
}
/*.accordion-content > li*/
@media screen and (max-width: 310px){
    .header-accordion-title{
        font-size: .7rem;
    }
}
@media screen and (min-width: 310px) and (max-width: 347px){
    .header-accordion-title{
        font-size: .8rem;
    }
}
@media screen and (min-width: 348px) and (max-width: 379px){
    .header-accordion-title{
        font-size: .9rem;
    }
}
@media screen and (min-width: 380px) and (max-width: 433px){
    .header-accordion-title{
        font-size: 1rem;
    }
}
@media screen and (min-width: 434px) and (max-width: 469px){
    .header-accordion-title{
        font-size: 1.15rem;
    }
}
@media screen and (min-width: 470px) and (max-width: 557px){
    .header-accordion-title{
        font-size: 1.25rem;
    }
}
@media screen and (min-width: 558px) and (max-width: 650px){
    .header-accordion-title{
        font-size: 1.5rem;
    }
}
/* cards */
#threadTopics textarea{
    line-height: 1.75;
}
.card-article .font-article-title-think,
.card-article .font-article-text-think,
.card-article .font-article-title-teach,
.card-article .font-article-text-teach,
.card-article .font-article-title-testimony,
.card-article .font-article-text-testimony,
.card-article .font-article-title-revel,
.card-article .font-article-text-revel{
    -webkit-transition: color .33s;
    transition: color .33s;
}
.card-article{
    display            : block;
    border-radius      : 5px;
    -webkit-transition: transform .55s;
    transition: transform .55s;
}
.card-article-header{
    padding-top: 1rem;
    padding-bottom: .5rem;
}
/* bible book */
.card-bible-book .font-bible-book-title,
.card-bible-book .font-bible-book-text{
    -webkit-transition: color .55s;
    transition: color .55s;
}
.card-bible-book{
    display            : block;
    border-radius      : 5px;
    margin: .5rem .7rem;
    -webkit-transition: transform .55s;
    transition: transform .55s;
}
/* down */
.card-bible-book-down .font-bible-book-title,
.card-bible-book-down .font-bible-book-text{
    -webkit-transition: color .55s;
    transition: color .55s;
}
.card-bible-book-down{
    display            : block;
    border-radius      : 5px;
    margin: .5rem .7rem;
    -webkit-transition:transform .55s;
    transition: transform .55s;
}
@media screen and (max-width: 575px){
    .card-bible-book,
    .card-article,
    .card-bible-book-down{
        font-size: .65rem;
    }
    /*.num-chapter{
        font-size: .95rem;
    }*/
}
@media screen and (min-width: 576px){
    .card-bible-book,
    .card-article,
    .card-bible-book-down{
        font-size: .975rem;
    }
}
.card-bible-book-header{
    padding-top: 1rem;
    padding-bottom: .5rem;
}
.rounded-image{
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    border-radius        : 50%;
}
.article-image{
    max-width: 200px;
    width    : 200px;
}
.card-article{
    width        : 97.5%;
    min-width    : 97.5%;
    margin-left  : 0px;
    margin-right : 0px;
    margin-bottom: .75rem;
}
@media screen and (min-width: 480px){
    .card-article{
        margin-left  : .5rem;
        margin-right : .5rem;
        margin-top   : .175rem;
    }
}
@media screen and (min-width: 680px){
    .card-article{
        width     : 275px;
        min-width : 275px;
        max-width : 275px;
    }
}
@media screen and (max-width: 369px){
    .card-bible-book{
        width        : 97.5%;
        min-width    : 97.5%;
        max-width    : 300px;
        margin-left  : 0px;
        margin-right : 0px;
        margin-bottom: .5rem;
    }
    .card-bible-book-down{
        width        : 97.5%;
        min-width    : 97.5%;
        max-width    : 300px;
        margin-left  : 0px;
        margin-right : 0px;
        margin-bottom: .5rem;
    }
}
@media screen and (min-width: 370px) and (max-width: 495px){
    .card-bible-book{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .33rem;
        width    : 300px;
        min-width: 300px;
        max-width: 300px;
    }
    .card-bible-book-down{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .33rem;
        width    : 300px;
        min-width: 300px;
        max-width: 300px;
    }
}
@media screen and (min-width: 496px) and (max-width: 753px){
    .card-article{
        margin-bottom: 1.75rem;
    }
    .card-bible-book{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .5rem;
        width    : 40%;
        min-width: 40%;
        max-width: 220px;
    }
    .card-bible-book-down{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .5rem;
        width    : 40%;
        min-width: 40%;
        max-width: 220px;
    }
    .card-bible-book-down:hover,
    .card-bible-book:hover/* ,
    .card-article:hover */{
        -webkit-transform : scale(1.0275);
        transform         : scale(1.0275);
        -webkit-transition: all .55s cubic-bezier(.5, 1.5, 1, .8);
        transition        : all .55s cubic-bezier(.5, 1.5, 1, .8);
    }
}
@media screen and (min-width: 754px) and (max-width: 959px){
    .card-article{
        margin-bottom: 2.5rem;
    }
}
@media screen and (min-width: 960px){
    .card-article{
        margin-bottom: 2.5rem;
    }
}
@media screen and (min-width: 1200px){
    .card-article:hover{
        -webkit-transform : scale(1.05);
        transform         : scale(1.05);
        -webkit-transition: all .55s cubic-bezier(.5, 1.2, 1, .8);
        transition        : all .55s cubic-bezier(.5, 1.2, 1, .8);
    }
}
@media screen and (min-width: 1360px){
    .card-article:hover{
        -webkit-transform  : scale(1.05);
        transform          : scale(1.05);
        -webkit-transition : all .55s cubic-bezier(.5, 1.25, 1, .8);
        transition: all .55s cubic-bezier(.5, 1.25, 1, .8);
    }
}
@media screen and (min-width: 1600px){
    .card-article:hover{
        -webkit-transform  : scale(1.05);
        transform          : scale(1.05);
        -webkit-transition : all .55s cubic-bezier(.5, 1.575, 1, .8);
        transition: all .55s cubic-bezier(.5, 1.575, 1, .8);
    }
}
@media screen and (min-width: 754px) and (max-width: 1199px){
    .card-bible-book{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .5rem;
        width    : 25%;
        min-width: 220px;
        max-width: 220px;
    }
    .card-bible-book:hover{
        -webkit-transform         : scale(1.045);
        transform                 : scale(1.045);
        -webkit-transition:all .55s cubic-bezier(.5, 1.5, 1, .8);
        transition       : all .55s cubic-bezier(.5, 1.5, 1, .8);
    }
    .card-bible-book-down{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .5rem;
        width    : 25%;
        min-width: 220px;
        max-width: 220px;
    }
    .card-bible-book-down:hover{
        -webkit-transform         : scale(1.045);
        transform                 : scale(1.045);
        -webkit-transition: all .55s cubic-bezier(.5, 1.5, 1, .8);
        transition       : all .55s cubic-bezier(.5, 1.5, 1, .8);
    }
}
@media screen and (min-width: 1200px){
    .card-bible-book{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .5rem;
        width    : 25%;
        min-width: 220px;
        max-width: 220px;
    }
    .card-bible-book:hover{
        -webkit-transform         : scale(1.045);
        transform                 : scale(1.045);
        -webkit-transition: all .55s cubic-bezier(.5, 1.5, 1, .8);
        transition       : all .55s cubic-bezier(.5, 1.5, 1, .8);
    }
    .card-bible-book-down{
        margin-left  : .33rem;
        margin-right : .33rem;
        margin-top   : .33rem;
        margin-bottom: .5rem;
        width        : 25%;
        min-width    : 220px;
        max-width    : 220px;
    }
    .card-bible-book-down:hover{
        -webkit-transform  : scale(1.045);
        transform          : scale(1.045);
        -webkit-transition :all .55s cubic-bezier(.5, 1.5, 1, .8);
        transition: all .55s cubic-bezier(.5, 1.5, 1, .8);
    }
}
@media screen and (max-width: 767px){
    .box-p-bs{
        text-align    : center;
        padding-top   : 0px;
        padding-bottom: 2rem;
    }
}
@media screen and (min-width: 768px){
    .box-p-bs{
        text-align    : justify;
        padding-top   : 1.25px;
        padding-bottom: 2rem;
    }
}
.sub-title-h1{
    font-size  : 75%;
}
.sub-title-mentions{
    font-size  : 50%;   
}
/* eyes */
.eyes{
    position: absolute;
    left:  25%;
    transform: translateX(-33%);
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}
.eye{
    width: 130px;
    height: 65px;
    display: inline-block;
    margin:  40px;
    border-radius: 50%;
    overflow: hidden;
}
.ball{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%, -50%);
    border-radius: 50%;
    border: 15px solid #333;
}
/* profil card */
.profile-card{
    width: auto;
    max-width: 400px;
    text-align: center;
    border-radius: 1rem;
}
.profile-card .card-header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #2c3a47;
    padding: 2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.profile-card .pic{
    display: inline-block;
    padding: 1rem;
    background: linear-gradient(130deg, #74b9ff, #e66767);
    margin: auto;
    border-radius: 50%;
    background-size: 200% 200%;
    animation: animated-gradient 3s linear infinite;
}
@keyframes animated-gradient{
    25%{
        background-position: left bottom;
    }
    50%{
        background-position: right bottom;
    }
    75%{
        background-position: right top;
    }
    100%{
        background-position: left top;
    }
}
.profile-card .pic img{
    display: flex;
    align-items: start;
    justify-content: center;
    width: 150px;
    height: auto;
    border-radius: 50%;
}
.profile-card .name{
    color: #f2f2f2;
    font-weight: 600;
    margin: 1.25rem 0;
    text-align: center;
}
.profile-card .desc{
    color: #e66767;
}
.profile-card .sm{
    display: flex;
    justify-content: center;
    margin: 2rem;
}
.profile-card .sm a{
    color: #f2f2f2;
    max-width: 64px;
    width: auto;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}
.profile-card .sm a:hover{
    color: #e66767;
}
.profile-card .contact-btn{
    display: inline-block;
    /*padding: 12px 50px;*/
    color: #e66767;
    border: 2px solid #e66767;
    border-radius: 6px;
    margin-top: 16px;
    -webkit-transition:;
    transition: all .3s linear;
}
.profile-card .contact-btn:hover{
    background: #e66767;
    color: #f2f2f2;
    text-decoration: none;
}
.profile-card .card-footer{
    display: flex;
    justify-content: center;
    background: #f4f4f4;
    padding: 1rem 1.5rem;
    height: auto;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
/* .profile-card .numbers{
    display: flex;
    align-items: center;
} */
.profile-card .item{
    flex: 1;
    text-transform: uppercase;
    font-size: 13px;
    color: #e66767;
}
.profile-card .item span{
    display: block;
    color: #2c3a47;
    font-size: 30px;
}
.profile-card .border{
    width: 1px;
    height: 30px;
    background: #bbb;
}
@media screen and (max-width: 511px){
    .profile-card{
        width: auto;
        min-width: 98%;
        max-width: 99vw;
    }
    .profile-card .name{
        color: #f2f2f2;
        font-size: 1rem;
    }
    .profile-card .desc{
        font-size: .875rem;
    }
    .profile-card .contact-btn{
        padding: 12px 24px;
    }
    .profile-card .sm a{
        font-size: .9rem;
    }
}
@media screen and (min-width: 512px){
    .profile-card{
        width: auto;
        max-width: 440px;
    }
    .profile-card .name{
        color: #f2f2f2;
        font-size: 1.775rem;
    }
    .profile-card .desc{
        font-size: 1.125rem;
    }
    .profile-card .contact-btn{
        padding: 12px 50px;
    }
    .profile-card .sm a{
        font-size: 1.275rem;
    }
}
/* loader */
.loader-section{
    margin: 0;
    padding: 0;
    text-align: center;
    height: 75px;
}
.loader{
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.dom-loader{
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: auto;
    margin-bottom: auto;
    top: 50%;
    z-index: 102;
    pointer-events: none;
}
.dom-loader:target{
    opacity:1;
    pointer-events: auto;
}
 .dom-loader>div{
    position: relative;
    margin: auto;
}
.loader-quart{
    border-radius: 50px;
    border: 6px solid rgba(128, 128, 128, .4);
}
.loader-quart:after{
    content:'';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: -6px;
    top: -6px;
    border-radius: 50px;
    border-top: 6px solid #FFF;
    -webkit-animation: spin 2s linear 0s infinite;
    animation: spin 2s linear 0s infinite;
}
.loader-quart-anti:after{
    content:'';
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: -6px;
    top: -6px;
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #FFF;
    border-bottom-color: rgba(0, 0, 0, .4);
    -webkit-animation: anti-spin .75s cubic-bezier(.25, .50, .75, .50) 0s infinite;
    animation: anti-spin .75s cubic-bezier(.25, .50, .75, .50) 0s infinite;
}
.loader-double{
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #85C1BE;
    border-bottom-color: #EC459E;
    -webkit-animation: spin 1s linear 0s infinite;
    animation: spin 1s linear 0s infinite;
}
.loader-double:after{
    content:'';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    top: 4px;
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #725C7F;
    border-bottom-color: #FFF;
    opacity: .7;
    -webkit-animation: spinreverse 2s linear 0s infinite;
    animation: spinreverse 2s linear 0s infinite;
}
.loader-double:before{
    content:'';
    position: absolute;
    left: -15px;
    right: -15px;
    bottom: -15px;
    top: -15px;
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: #EC459E;
    border-bottom-color: #85C1BE;
    opacity: .7;
    -webkit-animation: spinreverse 3s linear 0s infinite;
    animation: spinreverse 3s linear 0s infinite;
}
.loader-circles{
    border-radius: 50px;
    border: 3px solid transparent;
    border-top-color: #FFF;
    -webkit-animation: spin 1s linear 0s infinite;
    animation: spin 1s linear 0s infinite;
}
@-webkit-keyframes spin{
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin{
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes anti-spin{
    100%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    0%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes anti-spin{
    100%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    0%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes spinreverse{
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
@keyframes spinreverse{
    0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100%{ -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}
.w-auto{
    width: auto!important;
}
/*  1.12em par default */
.p-no-margin-tb{
    margin-top: 0!important;
    margin-bottom: .25em!important;
}
.last-line-left{
    text-align-last: left!important;
}
.last-line-center{
    text-align-last: center;
}
.list-inline li{
    display:inline;
}
.popover .popover-close-button{
    margin-top: 2px!important;
    margin-right: 2px!important;
    border-radius: 10px!important;
    background-color: darksalmon!important;
}
li{
    list-style-position: outside;
}
/*p{
    text-align-last: center;
}*/
.afterfoo-mob{
    border: none;
    font-size: .125em;
    margin-bottom: 2px!important;
}
.hover-pointer{
    cursor: pointer;
}
.center-x{
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}