/* 20190306-173231 - Copyright© Jean-Yves BURGAUD <jeanyves@burgaud.name> */

/* Html & body
-------------------------------------------------- */
html {
    color: #666;
    position: relative;
    /*min-height: 100%;*/
    /*margin-bottom: 36px;        [> debug : 36px for toolbar <]*/
}

body {
    margin-top: 100px;
    margin-bottom: 60px;
    font-size: 1rem;
    font-family: Roboto, serif;
    word-spacing: 0.2rem;
    letter-spacing: 1px;
    line-height: 1.2;
    min-height: 100vh;
    margin-bottom: -100px;
}
.bg_1 { background: url('../img/bg_1.png') no-repeat center center; }
.bg_2 { background: url('../img/bg_2.png') no-repeat center center; }
.bg_3 { background: url('../img/bg_3.png') no-repeat center center; }
.bg_4 { background: url('../img/bg_4.png') no-repeat center center; }
.bg_5 { background: url('../img/bg_5.png') no-repeat center center; }
.bg_6 { background: url('../img/bg_6.png') no-repeat center center; }
.bg_7 { background: url('../img/bg_7.png') no-repeat center center; }
.bg_8 { background: url('../img/bg_8.png') no-repeat center center; }
.bg_9 { background: url('../img/bg_9.png') no-repeat center center; }




/* Body
-------------------------------------------------- */


/* --- preloader --- */
.preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background-image: url("../img/preload-img.png");
    background-repeat: no-repeat;
    background-color: #FFF;
    background-position: center;
}


/* General
-------------------------------------------------- */

a.mail-text span {
    display: none;  /* rz_mail_text */
}

/*.form-label {*/
    /*margin-top: 0.6rem;*/
    /*margin-bottom: 0.3rem;*/
/*}*/

/*.form-boolean > label {*/
    /*[>margin-top: 0;                      [> fields radio-buttons <]<]*/
/*}*/

/*.form-boolean > input[type=radio] {*/
    /*[>margin: 0 0.3rem 0 1rem;<]*/
/*}*/

.form-check-label {
    padding-right: 1.5rem;
}

label.required::after {
    content: '*';
    color: #f00;
    margin-left: 0.2em;
}

.input-group-prepend label.required::after {
    content: '';
}

.msg-required {
    float: right;
    font-size: 80%;
}

.msg-required span {
    font-size: 120%;
    color: #f00;
}

.explication {
    font-size: 90%;
}

.form-group > .col > div > ul {
    margin-bottom: 4px;
    list-style-type: none;
}

.form-group > .col > div > ul > li::before {
    /*font-family: "Font Awesome 5 Free";*/
    padding-right: 5px !important;
    vertical-align: middle;
    display: inline-block;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f05e";
}

.form-group > .col > div > ul > li {
    color: red;
    font-size: 80%;
}

.card-body {
    padding: 0 1rem 1rem 1rem;
}

.card {
    margin-top: 1rem;
    margin-bottom: 0.3rem;
}

.hidden {
    display: none;
}

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

.table th {
    padding: 0.2rem;
}

th.col-small {
    max-width: 4em !important;
}

p {
    text-align: justify;
}

/*i {*/
    /*font-weight: normal;*/
    /*margin-right: 0.5em;*/
/*}*/

/*.form-group > div > ul > li {*/
    /*color: #2e3885;*/
/*}*/

.form-error {
    color: red;
    font-size: 80%;
}

.index-record .delete-form {
    display: inline;
}

.new-record, .edit-record {
    overflow: auto;
}
.edit-record .delete-form {
    float: right;
}

#record-id span {
    font-size: 110%;
}

#deleteDialogModal .recordString {
    font-weight: bold;
}

#email-msg {
    margin-left: 2em;
}

h1, h2, h3, h4, h5 {
    color: #2e3885;
    z-index: 30;
}

h1, h2 {
    text-align: center;
}

.btnhideh1 {
    color: inherit;
    float: left;
}
.btnhideh1:hover {
    color: inherit;
}

.btnhideh2 {
    color: inherit;
    float: left;
}
.btnhideh2:hover {
    color: inherit;
}

a.addrecord {
    float: right;
    z-index: 40;    /* au dessus de h1 */
}

.mail-text a span {
    display: none;  /* space into e-mail : see function a_mail */
}

.screen-center {
    width: 100%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.screen-center > div {
    text-align: center;
    margin: 0 auto;
}

.screen-center img {
    max-width: 100%;
}


span.coach {
    color: red;
    font-weight: bold;
}



/* Bootstrap */

.alert {
    max-width: 500px;
    margin: auto;
    margin-bottom: 1rem;
    font-size: 80%;
    color: #000;
}

.alert-info {
    background-color: rgba(117, 202, 235, 0.5);
    border-color: rgba(117, 202, 235, 0.5);
}

.alert-success {
    background-color: rgba(40, 182, 44, 0.5);
    border-color: rgba(40, 182, 44, 0.5);
}

.alert-danger {
    background-color: rgba(255, 65, 54, 0.5);
    border-color: rgba(255, 65, 54, 0.5);
}

.card-body {
    margin: 0.5rem 1rem 0rem 1rem;
}

.form-group {
    margin-bottom: 0.5rem;
}

.modal-body {
    font-size: 90%;
}



/* buttons
-------------------------------------------------- */


th.actions1 {       width: 40px; }
th.actions2 {       width: 70px; }
th.actions3 {       width: 100px; }
th.actions4 {       width: 130px; }
th.actions5 {       width: 165px; }

td.actions {
    padding: 12px 2px;
}

td.actions a, td.actions button {
    margin: 2px 0;
    padding: 6px;
}


/* knpnav : knp_paginator
-------------------------------------------------- */

.knpnav .pagination a {
    font-size: 70%;
}


/* Nav
-------------------------------------------------- */

.bg-primary {
    background-color: #fff !important; /* #127ba3; */
    border-color: #fff;
}

nav a {
    color: #2e3885 !important;
    border-bottom: 2px solid #fff;
    /*border-radius: 10px;*/
}


nav .dropdown-menu {
    left: inherit;
    right: 0;
    /*color: #666;*/
    /*background-color: #158CBA;*/
}

nav a.user { color: #fff !important; }
nav a.coach { color: #000 !important; }
nav a.admin { color: #000 !important; }

nav a:hover, nav a:focus {
    color: #94b0e5 !important;
    /*background-color: rgba(58, 69, 90, 0.08);*/
    border-bottom: 2px solid #2e3885;
}

a.navbar-brand {
    margin-right: 0;
    padding-right: 1rem;
    text-align: right;
    /*border-radius: 10px;*/
    /*border-bottom: 2px solid #fff;*/
}

a:hover.navbar-brand {
    border-bottom: 2px solid #fff;
    /*background-color: rgba(58, 69, 90, 0.08);*/
}
a.navbar-brand img {
    border-bottom: 2px solid #fff;
}

a:hover.navbar-brand img {
    border-bottom: 2px solid #2e3885;
}

#nav-title {
    padding: 8px;
    color: #FFF;
    line-height: 21px;
}

/* navbar - scroll */
.rz-nav-top {
  /* top = before scroll */
  background-color: white;
  /* rgba(255, 255, 255, 0.9); */
}

.rz-nav-scroll {
  padding: 0;
  background-color: white;
  /* rgba(255, 255, 255, 0.9); */
  border-bottom: 2px solid #ccc;
}

.rz-nav-top img {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -ms-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
  width: 100%;
}

.rz-nav-scroll img {
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -ms-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
  width: 70%;
}


.navbar-light .navbar-toggler {
    border-color: #2e3885 !important;
}



/* Footer
-------------------------------------------------- */

.footer {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
}

.footer .left, .footer .center, .footer .right {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.footer .left {
    text-align: left;
    color: #adb5bd;
    font-size: 12px;
}

.footer .center {
    text-align: center;
}

.footer .right {
    text-align: right;
    padding-right: 65px;
}


/* Back-to-top
-------------------------------------------------- */
.back-to-top {
  display: none;
  position: fixed;
  bottom: 18px;
  right: 15px;
  border-bottom: 0;
  border-radius: 5px;
  background-color: rgba(18, 22, 52, 0.4);
  z-index: 100;
}

.back-to-top:hover {
  background-color: rgba(18, 22, 52, 0.8);
  border-bottom: 0;
  opacity: 1;
}

.back-to-top i {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 5px;
  color: #fff;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}


/* index.html.twig : home1
-------------------------------------------------- */

.home1 {
    text-align: right;
    background: white top/cover no-repeat url(../img/home_bg.jpg) fixed;
    /*min-height: 30em;*/
    padding: 4em 10%;
}

.home1 h1 {
    font-weight: bold;
    font-size: 48px;
    text-shadow: 1px 1px 2px #ccc;
}

.home1 h1 sup {
    top: -1.2em;
    font-size: 22px;
    font-weight: normal;
    text-shadow: 1px 1px 2px #ccc;
}

.home1 h2 {
    font-weight: bold;
    font-size: 36px;
    padding-right: 0.5em;
    text-shadow: 1px 1px 2px #ccc;
}

.home1 a.contact {
    font-weight: bold;
    background-color: #2e3885;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    padding: 0.5em 1em;
    margin-right: 1em;
    text-decoration: none;
    border-radius: 1em;
}

.home1 a:hover.contact {
    color: #2e3885;
    background-color: #94b0e5;
    box-shadow: 0 0 3px #333;
}

.home1 .container {
    margin-top: 2em;
}

.home1 .container p {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 2px #333;
}

.home1 .container .img {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.home1 .container img {
    box-shadow: 0 0 15px #000;
}

/* index.html.twig : home2
-------------------------------------------------- */

.home2 {
    text-align: center;
    background-color: #bccdeb;
    /*min-height: 30em;*/
    padding: 4em 5% 2em 5%;
}

.home2 .left, .home2 .right {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.home2 .left img {
    display: block;
}

.home2 .left p {
    margin: 1em 0 1em 2em;
    display: block;
    text-align: left;
    color: #2e3885;
    font-size: 26px;
    font-weight: bold;
    font-style: italic;
}

.home2 .right p, .home2 .right ol li {
    /*margin: 1em 0 0 2em;*/
    /*display: block;*/
    text-align: left;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 2px #333;
}
.home2 .right p {
    font-size: 24px;
}

.home2 .right ol {
    /*list-style-type: none;*/
    font-size: 18px;
}

.home2 .right ol li {
    margin-bottom: 0.5em;
}

/* index.html.twig : home3
-------------------------------------------------- */

.home3 {
    background: white top/cover no-repeat url(../img/home3-bg.jpg) fixed;
    padding: 4em 5% 2em 5%;
}

.home3 .left, .home3 .right {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.home3 .left p {
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: #2e3885;
    margin-bottom: 2em;
}

.home3 .right p {
    font-size: 15px;
    text-align: right;
    font-weight: inherit;
    color: #2e3885;
    margin-top: 1em;
    max-width: 500px;
}

.home3 .right img {
    max-width: 100%;
}

/* index.html.twig : home4
-------------------------------------------------- */

.home4 {
    background-color: white;
    padding: 3em 5% 2em 5%;
}

.home4 .left, .home4 .right {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.home4 .left img {
    padding: 0;
    max-width: 100%;
}

.home4 .right h3 {
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #2e3885;
    font-style: italic;
    margin-top: 1em;
    /*max-width: 500px;*/
}

.home4 .right p {
    font-size: 15px;
    text-align: left;
    font-weight: inherit;
    color: #2e3885;
    margin-top: 1em;
    max-width: 500px;
}


/* temoignages : temoignages.html.twig
-------------------------------------------------- */

#temoignages h2 {
    margin: 3rem 0 3rem 0;
    color: #2e3885;
    font-size: 140%;
    font-style: italic;
}

.testimony {
    background-color: #f9f9f9;
    margin: 1rem;
    border-radius: 1.5rem;
    box-shadow: 1px 1px 2px 2px #ddd;
}

.testimony.even {
    padding: 1rem;
    margin-right: 10%;
}

.testimony.odd {
    padding: 1rem;
    margin-left: 10%;
}

.testimony .text {
    margin-bottom: 0;
    color: #2e3885;
}

.testimony .source {
    margin-bottom: 0;
    font-size: 80%;
    font-weight: bold;
    font-style: italic;
    color: #2e3885;
}

.testimony.even .text, .testimony.even .source {
    text-align: left;
}

.testimony.odd .text, .testimony.odd .source {
    text-align: right;
}

.testimony.even .source {
    margin-left: 1rem;
}

.testimony.odd .source {
    margin-right: 1rem;
}


/* form : contact.html.twig & visio.html.twig
-------------------------------------------------- */

#contact h2 {
    margin: 3rem 0 3rem 0;
    color: #2e3885;
    font-size: 140%;
    font-style: italic;
}

.one-frame {
    background-color: rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    padding: 1rem;
    max-width: 600px;
    height: 100%;
}

.one-frame-inner {
    background-color: rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    padding: 1rem;
}

.contact-footer {
    margin-top: 3rem;
    padding: 3rem;
    background-color: rgba(87, 129, 205, 0.49);
}

.contact-footer .col {
    vertical-align: top;
}

.contact-footer .left, .contact-footer .center, .contact-footer .right {
    text-align: center;
}

.contact-footer img {
    margin: 2rem;
}

.contact-footer p, .contact-footer a {
    text-align: center;
    color: #fff;
    font-size: 17px;
    min-height: 4em;
}

.contact-footer a {
    text-decoration: none;
    border-bottom: dashed 1px;
    padding: 1px 2em;
    border-radius: 10px;
}

.contact-footer a:hover {
    background-color: #2e3885;
}

/* visio.html.twig
-------------------------------------------------- */

#visio h3.conftext {
    margin: 2rem 0 1rem 0;
    text-align: center;
}

/*#visio .buttons {*/
    /*display: inherit;*/
    /*text-align: center;*/
/*}*/

#visio h2 {
    text-align: center;
    padding: 0.5rem 0 1rem 0;
}

#visio h2 {
    text-align: center;
}


/* card : edit.html.twig
-------------------------------------------------- */

img.carte {
    margin: 5px;
    height: 100px;
    width: 100px;
    border: #3d7bc2 solid 4px;
    border-radius: 10px;
}

.card-title {
    overflow: auto;
}

.card-title img.carte {
    float: right;
}


/* coach/entretienIndex.html.twig
-------------------------------------------------- */

#entretiens td.dateat {
    font-size: 80%;
}


/* coach/entretienEdit.html.twig
-------------------------------------------------- */

#entretien-link {
    padding: 1em;
}

#entretien-link span {
    font-size: 110%;
}

#entretien-link .msg {
    font-style: italic;
    margin-bottom: 0;
}

.email-new-msg {
    font-size: 110%;
    font-style: italic;
    margin: 3em;
}

.new-record #entretien_emailTitle {
    display: none;
}

.new-record #entretien_emailText {
    display: none;
}

.new-record #entretien_btnopen {
    display: none;
}


/* conf : index.html.twig
-------------------------------------------------- */

#confs td.inscription, #confs td.atelier {
    font-size: 80%;
}

#confs tr.activeconf {
    color: red;
}


/* person : index.html.twig
-------------------------------------------------- */

#persons tr.emailverifno {
    color: gray;
    font-style: italic;
}

#persons td.atelier {
    font-size: 80%;
}


/* seance : play.html.twig
-------------------------------------------------- */
#seance_play h1 {
    margin: 0;
}

#seance_play h2 {
    font-size: 140%;
}

#seance_play a.btn {
    z-index : 5;
}

#seance_play form button {
    display: inline;
    width : 24em;
}


#btncloseseance {
    color: red;
}

#row-size {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 6em;
    right: 5px;
    z-index: 50;
}

/*#row-size button {*/
    /*margin: 0 5px 5px 0;*/
    /*padding: 3px 0 3px 7px;*/
/*}*/

#row-size button  {
    margin: 0.2rem;
    padding: 0 0.4rem 0 0.4rem;
}

#row-size .bi {
    font-size: 200%;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

#changeAteliers .actions {
    text-align: center;
}

#changeAteliers .actions a, #changeAteliers .actions span {
    font-size: 60%;
    width: 20em;
    text-transform: uppercase;
}

#warning-seance-close {
    max-width: 100%;
}

.selectedcards-right #cards_wrapper {
    width: 88%;
}

.selectedcards-right #selectedcards_wrapper {
    display: flex;
    flex-direction: column;
    width: 11%;
}

.selectedcards-bottom #cards_wrapper {
    width: 99%;
}

.selectedcards-bottom #selectedcards_wrapper {
    width: 99%;
}
.selectedcards-bottom #selectedcards_wrapper .myselectedcard {
    width: 12%;
}


@keyframes anime-card1 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(-300px) translateY(-300px) rotate(-15deg) scale(1.2);
        -moz-transform: translateX(-300px) translateY(-300px) rotate(-15deg) scale(1.2);
        -o-transform: translateX(-300px) translateY(-300px) rotate(-15deg) scale(1.2);
        transform: translateX(-300px) translateY(-300px) rotate(-15deg) scale(1.2);
    }
}
@keyframes anime-card2 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(0) translateY(-300px) rotate(0) scale(1.2);
        -moz-transform: translateX(0) translateY(-300px) rotate(0) scale(1.2);
        -o-transform: translateX(0) translateY(-300px) rotate(0) scale(1.2);
        transform: translateX(0) translateY(-300px) rotate(0) scale(1.2);
    }
}
@keyframes anime-card3 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(+300px) translateY(-300px) rotate(+15deg) scale(1.2);
        -moz-transform: translateX(+300px) translateY(-300px) rotate(+15deg) scale(1.2);
        -o-transform: translateX(+300px) translateY(-300px) rotate(+15deg) scale(1.2);
        transform: translateX(+300px) translateY(-300px) rotate(+15deg) scale(1.2);
    }
}
@keyframes anime-card4 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(-300px) translateY(0) rotate(-45deg) scale(1.2);
        -moz-transform: translateX(-300px) translateY(0) rotate(-45deg) scale(1.2);
        -o-transform: translateX(-300px) translateY(0) rotate(-45deg) scale(1.2);
        transform: translateX(-300px) translateY(0) rotate(-45deg) scale(1.2);
    }
}
@keyframes anime-card5 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(0) translateY(0) rotate(-45deg);
        -moz-transform: translateX(0) translateY(0) rotate(-45deg);
        -o-transform: translateX(0) translateY(0) rotate(-45deg);
        transform: translateX(0) translateY(0) rotate(-45deg);
    }
    50% {
        -webkit-transform: translateX(0) translateY(0) rotate(+45deg);
        -moz-transform: translateX(0) translateY(0) rotate(+45deg);
        -o-transform: translateX(0) translateY(0) rotate(+45deg);
        transform: translateX(0) translateY(0) rotate(+45deg);
    }
}
@keyframes anime-card6 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(+300px) translateY(0) rotate(+45deg) scale(1.2);
        -moz-transform: translateX(+300px) translateY(0) rotate(+45deg) scale(1.2);
        -o-transform: translateX(+300px) translateY(0) rotate(+45deg) scale(1.2);
        transform: translateX(+300px) translateY(0) rotate(+45deg) scale(1.2);
    }
}
@keyframes anime-card7 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(-300px) translateY(+300px) rotate(+15deg) scale(1.2);
        -moz-transform: translateX(-300px) translateY(+300px) rotate(+15deg) scale(1.2);
        -o-transform: translateX(-300px) translateY(+300px) rotate(+15deg) scale(1.2);
        transform: translateX(-300px) translateY(+300px) rotate(+15deg) scale(1.2);
    }
}
@keyframes anime-card8 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(0) translateY(+300px) rotate(0) scale(1.2);
        -moz-transform: translateX(0) translateY(+300px) rotate(0) scale(1.2);
        -o-transform: translateX(0) translateY(+300px) rotate(0) scale(1.2);
        transform: translateX(0) translateY(+300px) rotate(0) scale(1.2);
    }
}
@keyframes anime-card9 {
    0% {
        box-shadow: 10px 10px 5px 0px #656565;
        -webkit-transform: translateX(+300px) translateY(+300px) rotate(-15deg) scale(1.2);
        -moz-transform: translateX(+300px) translateY(+300px) rotate(-15deg) scale(1.2);
        -o-transform: translateX(+300px) translateY(+300px) rotate(-15deg) scale(1.2);
        transform: translateX(+300px) translateY(+300px) rotate(-15deg) scale(1.2);
    }
}
#seance_play .seance-open .mycard1 { 
    -webkit-animation: anime-card1 3s ease-in;
    -moz-animation: anime-card1 3s ease-in;
    -o-animation: anime-card1 3s ease-in;
    animation: anime-card1 3s ease-in;
}
#seance_play .seance-open .mycard2 {
    -webkit-animation: anime-card2 3s ease-in;
    -moz-animation: anime-card2 3s ease-in;
    -o-animation: anime-card2 3s ease-in;
    animation: anime-card2 3s ease-in;
}
#seance_play .seance-open .mycard3 {
    -webkit-animation: anime-card3 3s ease-in;
    -moz-animation: anime-card3 3s ease-in;
    -o-animation: anime-card3 3s ease-in;
    animation: anime-card3 3s ease-in;
}
#seance_play .seance-open .mycard4 {
    -webkit-animation: anime-card4 3s ease-in;
    -moz-animation: anime-card4 3s ease-in;
    -o-animation: anime-card4 3s ease-in;
    animation: anime-card4 3s ease-in;
}
#seance_play .seance-open .mycard5 {
    -webkit-animation: anime-card5 3s ease-in;
    -moz-animation: anime-card5 3s ease-in;
    -o-animation: anime-card5 3s ease-in;
    animation: anime-card5 3s ease-in;
}
#seance_play .seance-open .mycard6 {
    -webkit-animation: anime-card6 3s ease-in;
    -moz-animation: anime-card6 3s ease-in;
    -o-animation: anime-card6 3s ease-in;
    animation: anime-card6 3s ease-in;
}
#seance_play .seance-open .mycard7 {
    -webkit-animation: anime-card7 3s ease-in;
    -moz-animation: anime-card7 3s ease-in;
    -o-animation: anime-card7 3s ease-in;
    animation: anime-card7 3s ease-in;
}
#seance_play .seance-open .mycard8 {
    -webkit-animation: anime-card8 3s ease-in;
    -moz-animation: anime-card8 3s ease-in;
    -o-animation: anime-card8 3s ease-in;
    animation: anime-card8 3s ease-in;
}
#seance_play .seance-open .mycard9 {
    -webkit-animation: anime-card9 3s ease-in;
    -moz-animation: anime-card9 3s ease-in;
    -o-animation: anime-card9 3s ease-in;
    animation: anime-card9 3s ease-in;
}

#seance_play .mycard  {
    margin: 5px;
    padding: 10px;
    background-color: #FFF;
    border: #3d7bc2 solid 6px;
    border-radius: 20px;
    flex-grow: 1;
    height: auto;
    width: 30%;
    z-index: 20;
}

#seance_play .myselectedcard  {
    margin: 2px;
    padding: 2px;
    background-color: #FFF;
    border: #3d7bc2 solid 3px;
    border-radius: 9px;
    height: auto;
    width: 99%;
    opacity: 100%;
    z-index: 10;
}

@keyframes anime-myselectedcard {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    80% {
        border: #fd7e14 solid 4px;
        box-shadow: 10px 10px 5px 0px #656565;
    }
}
#seance_play .seance-open .myselectedcard  {
    -moz-animation: anime-myselectedcard 5s ease-in;
    -webkit-animation: anime-myselectedcard 5s ease-in;
    -o-animation: anime-myselectedcard 5s ease-in;
    animation: anime-myselectedcard 5s ease-in;
}

#seance_play .emptyselectedcard {
    border-color: #ddd;
}

#seance_play .myselectedcard-active {
    border-color: #fd7e14;
}

#seance_play .mycard-active:hover {
    border-color: #fd7e14;
    -webkit-box-shadow: 10px 10px 5px 0px #656565;
    -moz-box-shadow: 10px 10px 5px 0px #656565;
    -o-box-shadow: 10px 10px 5px 0px #656565;
    box-shadow: 10px 10px 5px 0px #656565;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
}

#seance_play .myselectedcard-active:hover,
#seance_play .myselectedcard-active-shadow {
    border-color: #fd7e14;
    -webkit-box-shadow: 5px 5px 3px 0px #656565;
    -moz-box-shadow: 5px 5px 3px 0px #656565;
    -o-box-shadow: 5px 5px 3px 0px #656565;
    box-shadow: 5px 5px 3px 0px #656565;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
}

#selectedCardDialogModal .modal-dialog  {
    height: 550px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

#selectedCardDialogModal .modal-content {
    border: #3d7bc2 solid 15px;
    border-radius: 55px;
    height: 550px;
    width: 550px;

    /* Set the transition effects */
    /*-webkit-transition: -webkit-transform 0.4s;*/
    /*-moz-transition: -moz-transform 0.4s;*/
    /*-o-transition: -o-transform 0.4s;*/
    /*transition: transform 0.8s;*/
    /*-webkit-transform-style: preserve-3d;*/
    /*-moz-transform-style: preserve-3d;*/
    /*-o-transform-style: preserve-3d;*/
    /*transform-style: preserve-3d;*/
    /*position: absolute;*/
}

#selectedCardDialogModal .modal-content .front {
    background-image: url('../img/bg_1.png');
    background-repeat: no-repeat;
    background-size: 450px 450px;
    background-position: center;
    background-color: #FFF;
    border-radius: 55px;
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
}

/*#selectedCardDialogModal .modal-content.flipped {*/
    /*-webkit-transform: rotateY( 180deg );*/
    /*-moz-transform: rotateY( 180deg );*/
    /*-o-transform: rotateY( 180deg );*/
    /*transform: rotateY( 180deg );*/
/*}*/

/*#selectedCardDialogModal .modal-content .front,*/
/*#selectedCardDialogModal .modal-content .back {*/
    /*background-color: #FFF;*/
    /*border-radius: 55px;*/
    /*display: block;*/
    /*position: absolute;*/
    /*height: 100%;*/
    /*width: 100%;*/
    /*background-repeat: no-repeat;*/
    /*background-size: 450px 450px;*/
    /*background-position: center;*/
    /*-webkit-backface-visibility: hidden;*/
    /*-moz-backface-visibility: hidden;*/
    /*-o-backface-visibility: hidden;*/
    /*backface-visibility: hidden;*/
/*}*/

/*#selectedCardDialogModal .modal-content .front {*/
    /*z-index: 2;*/
    /*-webkit-transform: rotateY( 0deg );*/
    /*-moz-transform: rotateY( 0deg );*/
    /*-o-transform: rotateY( 0deg );*/
    /*transform: rotateY( 0deg );*/
/*}*/

/*#selectedCardDialogModal .modal-content .back {*/
    /*-webkit-transform: rotateY( 180deg );*/
    /*-moz-transform: rotateY( 180deg );*/
    /*-o-transform: rotateY( 180deg );*/
    /*transform: rotateY( 180deg );*/
/*}*/


#selectedCardDialogModal .modal-footer {
    position: absolute;
    width: 100%;
    justify-content: center;
    bottom: 0;
}

#selectedCardDialogModal .modal-footer button {
    margin: 0 0.5em;
}

#selectedCardDialogModal .modal-header {
    color: #999;
    border-bottom: 0;
}

#selectedCardDialogModal .modal-footer {
    border-top: 0;
}

#selectedCardDialogModal .modal-title {
    font-size: 300%;
}

#selectedCardDialogModal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#selectedCardDialogModal .modal-text {
    text-align: justify;
    font-size: 160%;
    color: #666;
    padding: 0 1.5em;
    background-color: #FFF;
    opacity: 0.8;
    height: auto;
    z-index: 5;
}

.modal-dialog .vignette {
    float: right;
    margin: 20px;
    padding: 2px;
    background-color: #FFF;
    border: #3d7bc2 solid 3px;
    border-radius: 9px;
    height: 90px;
    width: 90px;
}


.modal-body i {
    /*font-size: 120%;*/
    padding: 0.3rem;
    border-radius: 0.3rem;
    border-color: rgb(227, 227, 227);
    background-color: rgb(240, 240, 240);
}

.modal-body span.btn {
    font-size: 60%;
    width: 28em;
}


#playHelpDialogModal .modal-dialog {
    max-width: 650px;
}

/*.entretienPlay #playHelpDialogModal .help-seanceConf {*/
    /*display: none;*/
/*}*/
/*.seanceConfPlay #playHelpDialogModal .help-seance {*/
    /*display: none;*/
/*}*/

#playHelpDialogModal .role {
    font-weight: bold;
    text-transform: uppercase;
}
#playHelpDialogModal .red {
    color: red;
}
#playHelpDialogModal .blue {
    color: #2e3885;
}


/* seance : userLogin.html.twig
-------------------------------------------------- */
#login form {
    max-width: 500px;
    margin: auto;
}


/* seance : play.html.twig
-------------------------------------------------- */
#change_password form {
    max-width: 500px;
    margin: auto;
}


/* homepage
-------------------------------------------------- */

.section-vp {
    padding-top: 25px;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    text-align: center;
}

.section-vp .container {
    height: 100vh;
    min-height: 100vh;
    margin-bottom: -100px;
    padding-bottom: 70px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}


.nav-section {
    bottom: 0 !important;
    margin: 0 auto;
    width: 100%;
    /*text-decoration: none;*/
    list-style: none;
    text-align: center;
    z-index: 100;
}

.nav-section > li {
    display: inline;
}

a.nav-section-icon-container {
    display: inline-block;
    text-decoration: none;
    border-bottom: none;
    width: 70px;
    height: 70px;
    line-height:70px;
    margin: 0 auto;
    background-color: rgba(137,159,159,.4);
}
a.nav-section-icon-container:hover {
    background-color: rgba(137,159,159,.8);
}

a.nav-section-icon-container i {
    display: block;
    padding-top: 16px;
    text-align: center;
    color: #fff;
    font-size: 1.8em;
}


.section-vp .row {
    margin-bottom: 1.5em;
}

.section-vp .ellipse {
    /*font-size: 140%;*/
    color: #0070C0;
    background-color: #FFFFFF;
    border: 1px solid #0070C0;
    border-radius: 100%;
    margin: 1em auto;
    padding: 1em 4em;
    z-index: 10;
}

.section-vp .bkg-blue {
    background-color: #DAE3F3;
}
.section-vp .bkg-yellow {
    background-color: #F2F2F2;
}

.section-vp a.ellipse {
    text-decoration: none;
    box-shadow: 2px 2px 4px #666;
}

.section-vp a.ellipse:hover {
    background-color: #F2F2F2;
}

.section-vp .title {
    float: left;
    text-align: left !important;
    margin-left: 1em !important;
}

.section-vp .frame {
    border: 1px solid #0070C0;
    margin: 1em;
    padding: 1em;
}

.section-vp h2, .section-vp h3, .section-vp h4,  .section-vp h5, .section-vp ul li {
    color: #0070C0;
}

.section-vp .ellipse h2 {
    color: #ED7D31;
}

.section-vp p {
    /*font-size: 130%;*/
    text-align: center;
    color: #0070C0;
}

.section-vp ul li {
    text-align: left;
    margin-bottom: 0.5em;
}

.section-vp ul.text li {
    margin-bottom: 1.5em;
    text-align: justify;
}

.section-vp .underline {
    text-decoration: underline;
}

.section-vp .bold {
    font-weight: bold;
}

.section-vp h2, .section-vp h3 {
    /*width: 100%;*/
}

.section-vp .align-left {
    text-align: left;
}

/* slide1 */

#slide1.section-vp .container {
    margin-bottom: -180px;
}

/* slide2 */

#slide2.section-vp p.frame-text {
    min-height: 6em;
}

#slide2.section-vp p.frame-method {
    font-size: 130%;
    font-weight: bold;
    margin: 0;
    min-height: 2em;
}

#slide2.section-vp .methods-msg {
    margin: 0.2em;
    padding: 0.2em 2em;
}

#slide2.section-vp .etaussi {
    text-align: left;
}

#slide2.section-vp .aussi .row {
    margin-bottom: 0.5em;
}


/* slide3 */

#slide3.section-vp .ellipse {
    padding: 1em 1em;
}
#slide3.section-vp .ellipse h3 {
    color: #ED7D31;
}

#slide3.section-vp .col-6 {
    padding-right: 5px;
    padding-left: 5px;
}

/* slide6 */

#slide6.section-vp .row {
    margin-bottom: -2em;
}


/* slide7 & slide8 */

.section-vp .temoignage {
    text-align: left;
    margin-bottom: 2em;
}

.section-vp .temoignage .temoignage-txt {
    text-align: left;
    margin-bottom: 0;
}

.section-vp .temoignage .temoignage-person {
    font-weight: bold;
    text-align: left;
}

/*.story-imgs {*/
    /*box-sizing: border-box;*/
    /*float: left;*/
    /*width: 100%;*/
/*}*/

.story-imgs img {
    width: auto;
    max-height: 120px;
}

#story-img-left {
    /*float: left;*/
}

#story-img-right {
    /*float: right;*/
}