@charset "utf-8";
@font-face {
    font-family: "gautami";
    src: url('fonts/gautami-379c6a5ec3d085b1ad2f0d83fd40c580.ttf') format('truetype'), url('fonts/gautami-90e50aaab51f45a61f7ef6211564cd52.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: "gautami";
    src: url('fonts/gautamib.ttf') format('truetype'), url('fonts/gautamib.woff') format('woff');
    font-weight: bold;
}
@font-face {
    font-family: "gautami";
    src: url('fonts/gautamib-8004150fc843ea50b69d4c7d602b9b3e.eot');
    font-weight: bold;
}
@font-face {
    font-family: "opensans";
    src: url('fonts/opensans-629a55a7e793da068dc580d184cc0e31.ttf') format('truetype'), url('fonts/opensans-302da6933c198b5200ac60baf8825164.woff') format('woff');
    font-weight: bold;
}
@font-face {
    font-family: "fontawesome";
    src: url('fonts/fontawesome-webfont-b06871f281fee6b241d60582ae9369b9.ttf') format('truetype'), url('fonts/fontawesome-webfont-fee66e712a8a08eef5805a46892932ad.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: "fontawesome";
    src: url('fonts/fontawesome-webfont-674f50d287a8c48dc19ba404d20fe713.eot');
    font-weight: normal;
}
@font-face {
    font-family: "fontawesome light";
    src: url('fonts/fontawesome-light-2cbba30b30ee00b9e4108ba8a373afb9.ttf') format('truetype'), url('fonts/fontawesome-light-51c6a5bf54df5dd403b5ac757113e83c.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: "fontawesome light";
    src: url('fonts/fontawesome-light-40b5e77784556527ad2cbc55affc7454.eot');
    font-weight: normal;
}
@font-face {
    font-family: "fontawesome normal";
    src: url('fonts/fontawesome-regular-b2614d59b4646078440f7aba5e3a45b4.ttf') format('truetype'), url('fonts/fontawesome-regular-1659594d8a29a81fabadeb1edc5ebc8c.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: "fontawesome normal";
    src: url('fonts/fontawesome-regular-9029dd1532f2048768fdd7dbb6981182.eot');
    font-weight: normal;
}
@font-face {
    font-family: "fontawesome bold";
    src: url('fonts/fontawesome-solid-ba00886256c29a890fb3841a7175b634.ttf') format('truetype'), url('fonts/fontawesome-solid-22e3270b9b8f339e83d7ae0224f6b964.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: "fontawesome bold";
    src: url('fonts/fontawesome-solid-eb397dfae3610842aea96778742d1bdb.eot');
    font-weight: normal;
}
html,
body {
    background-color: #fff;
    background-color: #FFF;
}
p {
    margin: 0px;
}
ul {
    margin: 0px;
    padding: 0px;
}
li {
    list-style: none;
}
h2,
h3 {
    margin: 0px;
    font-family: Arial;
}
body {
    font-family: Arial;
    min-width: 300px;
    min-width: 270px;
    color: #2a2d33;
    color: #000;
    min-height: 600px;
    margin: 0px;
    padding-top: 55px;
}
label {
    margin: 0px;
    padding: 0px;
}
table {
    margin: 0px;
}
th,
td,
tr {
    padding: 0px;
    font-weight: normal;
}
input,
input[type="checkbox"] {
    border: none;
    margin: 0px;
    outline: none;
    border-radius: 0px;
}
input:hover,
input:focus,
input:active {
    outline: none;
}
a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: transparent;
    outline: none;
    border: none;
}
select,
select:focus,
select:hover {
    outline: none;
    border-radius: 0px;
}
button {
    outline: none;
}
.body,
.block_registration_end {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    max-width: 950px;
    max-width: 970px;
    max-width: 800px;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
}
/* ---------  Apex Link  ---------  */
.apex_link {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #000;
    width: 180px;
}
.apex_link:hover {
    color: #FF0000;
}
/* --------------- Title --------------- */
h2.title {
    font-size: 23px;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Open Sans, sans-serif;
    margin-top: 12px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 27px;
    padding-right: 27px;
    max-width: 90%;
    color: #2A2D33;
}
h2.title:before {
    content: "";
    position: absolute;
    border-top: 2px solid #FF0000;
    border-left: 2px solid #FF0000;

    width: 40px;
    height: 20px;
    height: 50%;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: 17%;
    min-width: 20px;
    max-width: 80px;
}
h2.title:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 20px;
    height: 50%;
    bottom: 0px;
    right: 0px;
    display: inline-block;
    border-right: 2px solid #FF0000;
    border-bottom: 2px solid #FF0000;	

    width: 17%;
    min-width: 20px;
    max-width: 80px;
}
@media (max-width: 576px) {
    h2.title {
        font-size: 16px;
    }
}
@media (max-width: 450px) {
    h2.title {
        font-size: 14px;
    }
}
/* --------------- Step 0 --------------- */
.block_registration_end {
    margin-top: 50px;
}
/* --------------- Step 0 --------------- */
.body.step_0 .buttons {
    width: 440px;
    max-width: 440px;
    width: 100%;
    background-color: #FF0000;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 40px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.22);
    margin-top: 40px;
}
.body.step_0 .buttons .users {
    width: 80px;
    height: 80px;
    border: 3px solid #fff;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    line-height: 75px;
}
.body.step_0 .buttons .users:before {
    content: "\f0c0";
    font-family: 'fontawesome light';
    font-size: 44px;
}
.body.step_0 .buttons .button {
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    border: 3px solid #fff;
    padding: 20px 43px;
    cursor: pointer;
    display: block;
    width: 281px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    margin-bottom: 30px;
    position: relative;
}
.body.step_0 .buttons .button:before {
    position: absolute;
    left: 14px;
    top: 0px;
    bottom: 0px;
    font-size: 23px;
    line-height: 0;
    height: 0px;
    margin-top: auto;
    margin-bottom: auto;
}
.body.step_0 .buttons .button.inscription:before {
    content: "\f234";
    font-family: 'fontawesome light';
}
.body.step_0 .buttons .button.profile:before {
    content: "\f4ff";
    content: "\e058";
    font-family: 'fontawesome light';
}
.body.step_0 .buttons .button:hover {
    background-color: #fff;
    color: #00a6de;
    color: #FF0000;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}
@media (max-width: 500px) {
    .body.step_0 .buttons {
        width: 290px;
    }
    .body.step_0 .buttons .button {
        width: 80%;
    }
}
/* --------------- Buttons --------------- */
.block_buttons {
    overflow: hidden;
    margin-top: 25px;
    margin-bottom: 80px;
    font-family: Open Sans, sans-serif;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: auto;
    margin-right: auto;
}
.block_buttons .buttons {
    overflow: hidden;
}
.block_buttons .previous,
.block_buttons .previous_new {
    float: left;
    height: 45px;
    line-height: 42px;
    padding-left: 24px;
    padding-right: 24px;
    border: 2px solid #8b8b8b;
    border: 2px solid #8B8B8B;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    min-width: 180px;
    text-align: center;
}
.block_buttons .previous:before,
.block_buttons .previous_new:before {
    font-family: "fontawesome";
    content: "\f053";
    font-weight: normal;
    margin-right: 7px;
}
.block_buttons .previous:hover,
.block_buttons .previous_new:hover {
    background-color: #FF0000;
    border-color: #FF0000;
    color: #fff;
}
.block_buttons .previous:active,
.block_buttons .previous_new:active {
    opacity: 0.8;
}
.block_buttons .back {
    float: left;
    height: 45px;
    line-height: 42px;
    padding-left: 24px;
    padding-right: 24px;
    border: 2px solid #8b8b8b;
    border: 2px solid #8B8B8B;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    min-width: 160px;
    text-align: center;
}
.block_buttons .next,
.block_buttons .ok,
.block_buttons .ok_next {
    float: right;
    background-color: #FF0000;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    height: 45px;
    line-height: 45px;
    padding-left: 24px;
    padding-right: 24px;
    cursor: pointer;
    min-width: 160px;
    text-align: center;
}
.block_buttons .button_next {
    //display: flex;
    justify-content: center;
}
.block_buttons .back:before {
    font-family: "fontawesome";
    content: "\f053";
    font-weight: normal;
    margin-right: 7px;
}
.block_buttons .next:after {
    font-family: "fontawesome";
    content: "\f054";
    font-weight: normal;
    margin-left: 7px;
}
.block_buttons .next.error {
    background-color: #F44336;
}
.block_buttons .back:hover,
.block_buttons .ok:hover,
.block_buttons .ok_next:hover {
    background-color: #FF0000;
}
.block_buttons .back:active,
.block_buttons .ok:hover,
.block_buttons .ok_next:hover {
    background-color: #FF0000;
}
.block_buttons .next:hover,
.block_buttons .ok:hover,
.block_buttons .ok_next:hover {
    background-color: #66be14;
}
.block_buttons .next:active,
.block_buttons .ok:hover,
.block_buttons .ok_next:hover {
    background-color: #549D11;
}
.block_buttons .next.sending,
.block_buttons .next.waiting {
    color: transparent;
    position: relative;
}
.block_buttons .next.sending:before,
.block_buttons .next.waiting:before {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    display: inline-block;
    background-image: url(../img/spin_3-0b0137e8d7bd18f5eb4279a349ec6a91.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    -webkit-animation: spin 0.8s infinite linear;
    animation: spin 0.8s infinite linear;
}
@media all and (-webkit-min-device-pixel-ratio: 0) {
    .block_buttons .next.sending:before,
    .block_buttons .next.waiting:before {
        background-image: url(../img/spin-6b90bb513cad53ed4402a5ed10e82d6c.svg);
        -webkit-filter: brightness(0) invert(1);
        -moz-filter: brightness(0) invert(1);
        -o-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }
}
.block_buttons .next.unactive,
.block_buttons .next.unactive:hover,
.block_buttons .next.unactive:active {
    background-color: #9e9e9e;
    cursor: default;
}
.block_buttons .sending_error_message {
    background: #F44336;
    margin-top: 12px;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    float: right;
    padding-left: 20px;
    padding-right: 20px;
}
@media (max-width: 768px) {
    .block_buttons {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 576px) {
    .block_buttons {
        margin-top: 35px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .block_buttons .previous {
        font-size: 0px;
        padding-left: 12px;
        padding-right: 8px;
        min-width: initial;
    }
    .block_buttons .previous_new {
        padding-left: 12px;
        padding-right: 8px;
        font-size: 14px;
    }
    .block_buttons .previous:before,
    .block_buttons .previous_new:before {
        font-size: 14px;
    }
    .block_buttons .next {
        padding-left: 16px;
        padding-right: 14px;
    }
    .block_buttons .ok_next {
        min-width: 120px;
    }
    .block_buttons .sending_error_message {
        font-size: 12px;
        padding-left: 7px;
        padding-right: 7px;
    }
}
@media (max-width: 450px) {
    .block_buttons .ok_next {
        min-width: 60px;
    }
}
@media (max-width: 320px) {
    .block_buttons .next {
        font-size: 11px;
    }
    .block_buttons .previous_new {
        font-size: 11px;
        min-width: 150px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .block_buttons .previous:before,
    .block_buttons .previous_new:before {
        font-size: 12px;
    }
}
/* --------------- Form --------------- */
ul.form {
    padding-left: 6px;
    margin-left: auto;
    margin-right: auto;
}
ul.form:after {
    clear: both;
    content: '';
    display: block;
}
ul.form li {
    margin-bottom: 3px;
    position: relative;
}
ul.form li:before {
    position: absolute;
    display: block;
    left: -6px;
    top: 0px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}
ul.form li:after {
    clear: both;
    display: block;
    content: '';
}
ul.form li[data-id="useEmail"] {
    display: none;
}
ul.form li label {
    display: block;
    width: 40%;
    float: left;
    background-color: #FF0000;
    color: #fff;
    height: 100%;
    padding-left: 32px;
    padding-right: 4px;
    min-height: 39px;
    padding-top: 10px;
    font-size: 15px;
    padding-bottom: 8px;
}
ul.form li label.wide {
    width: 60%; !important;
}
ul.form li .div_input {
    display: block;
    width: 60%;
    float: left;
    height: 39px;
    position: relative;
}
ul.form li .div_input.wide {
    width: 40%; !important;
}
ul.form li .div_input:after {
    clear: both;
    content: '';
    display: block;
}
ul.form li .li_error_message {
    float: left;
    background-color: #F44336;
    color: #fff;
    margin-top: 3px;
    padding: 4px;
    padding-left: 11px;
    width: 100%;
    text-align: center;
}
ul.form li input:not([type="button"]),
ul.form li select {
    height: inherit;
    width: inherit;
    padding-left: 12px;
    border: 2px solid #FF0000;
    width: 100%;
    color: #000;
}
ul.form li input:not([type="button"]):not([readonly]):focus,
ul.form li select:not([readonly]):focus {
    border: 2px solid #a8a8a8;
}
ul.form li input[readonly],
ul.form li select[readonly] {
    background-color: #e2e2e2;
    cursor: default;
}
ul.form li .div_input .age {
    width: 100%;
    height: 100%;
    max-width: auto;
    border: 2px solid #FF0000;
}
ul.form li .div_input .age select {
    border: none;
    display: block;
    float: left;
    width: 33.33333333333333333%;
    text-align: center;
}
ul.form li input.text_list {
    width: calc(80%);
    width: calc(100% - 20px);
    position: absolute;
    z-index: 100;
}
ul.form li .div_input .boolean {
    width: 100%;
    height: 100%;
    border: 2px solid #FF0000;
    padding-left: 1px;
}
ul.form .boolean input {
    width: 50%;
    float: left;
    background-color: #fff;
    color: #000;
    transition: width 0.3s;
    height: inherit;
    border: 1px solid #fff;
}
ul.form .boolean input:hover {
    background-color: #f0f0f0;
}
ul.form .boolean[data-selected='0'] input.boolean_0,
ul.form .boolean[data-selected='1'] input.boolean_1 {
    background-color: #FF0000;
    color: #fff;
    width: 60%;
}
ul.form .boolean[data-selected='0'] input.boolean_1,
ul.form .boolean[data-selected='1'] input.boolean_0 {
    color: rgba(0, 0, 0, 0.4);
    width: 40%;
}
ul.form .choice {
    display: flex;
    width: 100%;
    height: 100%;
    border: 2px solid #FF0000;
    padding-left: 1px;
}
ul.form .choice input {
    width: 50%;
    float: left;
    background-color: #fff;
    color: #000;
    transition: width 0.3s;
    height: inherit;
    border: 1px solid #fff;
}
ul.form .choice input:hover {
    background-color: #f0f0f0;
}
ul.form .choice input.selected {
    background-color: #FF0000;
    color: #fff;
    width: 70%;
}
ul.form li[data-required="1"] label:after {
    content: '*';
}
ul.form li[data-required="0"] .div_input:before {
    content: '';
    position: absolute;
    top: 2px;
    left: -2px;
    width: 6px;
    height: 35px;
    background-color: #FF0000;
    z-index: 200;
}
ul.form li[data-required="1"] .div_input:before {
    content: '';
    position: absolute;
    top: 2px;
    left: -2px;
    width: 6px;
    height: 35px;
    background-color: #FF0000;
    z-index: 200;
}
ul.form li[data-valid="1"] .div_input:before {
    background-color: #00E400;
}
ul.form li.infos {
    background-color: #FF0000;
    color: #fff;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 95%;
    padding-right: 14px;
    padding-left: 32px;
    opacity: 0.8;
}
ul.form li.infos:after {
    font-family: 'fontawesome light';
    content: '\f05a';
    position: absolute;
    left: 10px;
    top: 0px;
    bottom: 0px;
    line-height: 0px;
    height: 0px;
    margin-top: auto;
    margin-bottom: auto;
}
@media (max-width: 768px) {
    ul.form li label {
        font-size: 13px;
        padding-left: 20px;
        width: 50%;
    }
    ul.form li .div_input {
        width: 50%;
    }
}
@media (max-width: 500px) {
    ul.form li {
        margin-bottom: 8px;
    }
    ul.form li label {
        width: 100%;
        float: none;
        padding-left: 12px;
        min-height: 25px;
        padding-top: 7px;
        padding-bottom: 4px;
    }
    ul.form li label.wide {
        width: 100%;
    }
    ul.form li .div_input {
        width: 100%;
        float: none;
        font-size: 12px;
        height: 35px;
    }
    ul.form li .div_input.wide {
        width: 100%;
    }
    ul.form li[data-required="0"] .div_input:before {
        height: 31px;
        left: 2px;
    }
    ul.form li[data-required="1"] .div_input:before {
        height: 31px;
        left: 2px;
    }
    ul.form li .li_error_message {
        font-size: 11px;
    }
}
/* --------------- Sending Error Message --------------- */
.block_buttons .sending_error_message {
    background: #F44336;
    margin-top: 12px;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .block_buttons .sending_error_message {
        font-size: 12px;
    }
}
@media (max-width: 500px) {
    .block_continue .sending_error_message {
        padding-left: 7px;
        padding-right: 7px;
    }
}
/* --------------- Step --------------- */
.body:not(.step_0):not(.step_1) {
    display: none;
}
.body:not(.step_0) {
    margin-top: 20px;
}
/* --------------- Step 1 --------------- */
.registration_end_message,
.body.step_1 .registration_message,
.body.step_2 .registration_message,
.body.step_4 .information_message {
    text-align: center;
    color: #fff;
    font-size: 15px;
    margin-bottom: 15px;
    padding-left: 6px;
}
.body.step_2 .registration_message,
.body.step_4 .information_message {
    margin-bottom: 3px;
}
.registration_end_message .message,
.body.step_1 .registration_message .message,
.body.step_2 .registration_message .message,
.body.step_4 .information_message .message {
    background-color: #FF0000;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
.registration_end_message .message:before,
.body.step_1 .registration_message .message:before,
.body.step_2 .registration_message .message:before,
.body.step_4 .information_message .message:before {
    position: absolute;
    display: block;
    top: 0px;
    left: -6px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}
/* --------------- Step 4 --------------- */
.body.step_4 .email_waiting {
    text-align: center;
    color: #fff;
    font-size: 15px;
    margin-bottom: 3px;
    padding-left: 6px;
    overflow: hidden;
    display: flex;
}
.body.step_4 .email_waiting label {
    background-color: #FF0000;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    min-width: 40%;
}
.body.step_4 .email_waiting label:before {
    position: absolute;
    display: block;
    top: 0px;
    left: -6px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}
.body.step_4 .email_waiting .waiting {
    width: 45px;
    border: 2px solid #FF0000;
    position: relative;
}
.body.step_4 .email_waiting .waiting:not(.valid):after {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    display: inline-block;
    background-image: url(../img/spin_3-0b0137e8d7bd18f5eb4279a349ec6a91.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    -webkit-animation: spin 0.8s infinite linear;
    animation: spin 0.8s infinite linear;
}
.body.step_4 .email_waiting .waiting.valid:after {
    content: '\f00c';
    color: #2bd432;
    font-family: 'fontawesome';
    font-size: 26px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}
@media (max-width: 768px) {
    .body.step_4 .information_message .message {
        font-size: 13px;
    }
    .body.step_4 .email_waiting label {
        font-size: 13px;
    }
}
/* --------------- Step 5 --------------- */
.body.step_5 ul.form li[data-id="weight"] {
    display: none;
}
.body.step_5 ul.form li[data-info="weight"] {
    display: none;
}
.block_button_photo_profile {
    background-color: #FF0000;
    //margin-left: 6px;
    height: calc(94%);
    /* 8px padding 66px buttons */
    height: calc(100% - 6px);
    position: relative;
    margin-top: 15px;
}
.block_button_photo_profile:before {
    position: absolute;
    display: block;
    top: 0px;
    left: -6px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}
.block_button_photo_profile:after {
    content: '';
    display: block;
    clear: both;
}
.no_webcam_detected {
    background: #FF9800;
    margin-top: 12px;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: none;
}
.block_button_photo_profile .div_photo {
    width: 40%;
    float: left;
    overflow: hidden;
}
.block_button_photo_profile .member_photo {
    width: 250px;
    border: 20px solid #fff;
    margin: 8px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.block_button_photo_profile .div_button {
    float: left;
    width: 60%;
}
.block_button_photo_profile .camera {
    text-align: center;
}
.block_button_photo_profile .camera:before {
    content: '\f332';
    font-family: 'fontawesome light';
    color: #fff;
    font-size: 100px;
}
.block_button_photo_profile .button {
    width: 266px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    border: 2px solid #fff;
    padding: 10px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    margin-top: 5px;
    color: #fff;
}
.block_button_photo_profile .button:hover {
    background-color: #fff;
    color: #00a6de;
    color: #FF0000;
}

@media (max-width: 768px) {
    .block_button_photo_profile .div_photo {
        width: 50%;
    }
    .block_button_photo_profile .div_button {
        width: 50%;
    }
}
@media (max-width: 598px) {
    .block_button_photo_profile .div_photo {
        float: none;
        width: 100%;
    }
    .block_button_photo_profile .div_button {
        float: none;
        width: 100%;
        padding-bottom: 10px;
    }
    .block_button_photo_profile .camera {
        display: none;
    }
}
/* --------------- Photo ----------------- */
.no_scroll {
    overflow: hidden;
}

.block_member_disclaimer {
    margin-top: 15px;
    justify-content: center;
    display: flex;
    background-color: #FF0000;
//margin-left: 6px;
    height: calc(94%);
    /* 8px padding 66px buttons */
    height: calc(100% - 6px);
    position: relative;
    display: none;
    user-select: none;
    touch-action: manipulation;
    display: flex;
}
.block_member_disclaimer:before {
    position: absolute;
    display: block;
    top: 0px;
    left: -6px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}
.block_member_disclaimer .text {
    width: 40%;
    float: left;
    overflow: hidden;
    height: 440px;
    width: 100%;
    overflow-y: scroll;
}
.block_member_photo_container {
    margin-top: 15px;
    justify-content: center;
    display: flex;
    background-color: #FF0000;
    //margin-left: 6px;
    height: calc(94%);
    /* 8px padding 66px buttons */
    height: calc(100% - 6px);
    position: relative;
    display: none;
    user-select: none;
    touch-action: manipulation;
}
.block_member_photo_container:before {
    position: absolute;
    display: block;
    top: 0px;
    left: -6px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}
.block_signature_container {
    margin-top: 15px;
    justify-content: center;
    display: flex;
    background-color: #FF0000;
//margin-left: 6px;
    height: calc(94%);
    /* 8px padding 66px buttons */
    height: calc(100% - 6px);
    position: relative;
    user-select: none;
    touch-action: manipulation;
}
.block_signature_container:before {
    position: absolute;
    display: block;
    top: 0px;
    left: -6px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}

.block_member_photo {
    min-width: 620px;
    width: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}
.block_member_photo .buttons .button {
    width: 230px;
    /*height: 68px;*/
    /*border-radius: 50px / 100%;*/
    font-size: 16px;
    padding-right: 10px;
    height: 100%;
    color: #fff;
    text-align: center;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
}
.block_member_photo .buttons .button:hover {
    color: #00a6de;
    background-color: #fff;
}
.block_member_photo .div_photo_taken,
.block_member_photo .div_take_photo {
    background-color: #FF0000;
    /*min-width: 620px;*/
    padding: 8px;
}
.block_member_photo .div_take_signature {
    background-color: #FF0000;
    /*min-width: 620px;*/
    padding: 8px;
}
.block_member_photo .div_photo_taken {
    display: none;
}
.block_member_photo .block_photo {
    min-width: 600px;
    display: flex;
    flex-direction: column;
}
.block_member_photo .block_signature {
    min-width: 600px;
    display: flex;
    flex-direction: column;
}
.block_member_photo .div_video {
    width: 600px;
    min-height: 450px;
    height: 450px;
    background-color: #000;
    display: table-cell;
    /* pour corriger l'espace sous la video */
    vertical-align: middle;
    position: relative;
}
.block_member_photo .div_video[data-mirrored="-1"] {
    transform: scale(-1, 1);
}
.block_member_photo .div_video .mirror {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, 0.2);
    right: 6px;
    top: 6px;
    background-image: url(../img/mirror-d5c09f2e665ad7ff7c5aa4d2e5b3afe1.png);
    background-position: 1px 1px;
    background-size: 95%;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 50;
    display: none;
}
.block_member_photo .div_video[data-mirrored="-1"] .mirror {
    left: 6px;
    right: auto;
}
.block_member_photo .div_video .mirror:hover {
    background-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
}
.block_member_photo .div_video video,
.block_member_photo .div_video canvas {
    width: 100%;
    display: block;
    outline: 3px solid #fff;
    outline-offset: -3px;
    position: relative;
    z-index: 20;
}
.block_member_photo .div_video .video {
    position: absolute;
    width: 0px;
    height: 0px;
    opacity: 0;
    overflow: hidden;
}
.block_member_photo div .buttons,
.block_member_photo div .countdown {
    height: 66px;
}
.block_member_photo div .buttons {
    padding-top: 10px;
}
.block_member_photo .buttons {
    display: flex;
    padding-top: 10px;
    padding-bottom: 3px;
    align-items: center;
    justify-content: center;
    /*display: none;*/
}
.block_member_photo .buttons .button.photo {
    text-transform: uppercase;
    /*font-size: 20px;*/
    border: 3px solid #fff;
    width: 70%;
}
.block_member_photo .buttons .button.signature {
    text-transform: uppercase;
    /*font-size: 20px;*/
    border: 3px solid #fff;
    width: 100%;
}
.block_member_photo .buttons .button.photo:before {
    content: '\f083';
    font-family: 'fontawesome light';
    margin-right: 11px;
    margin-left: -18px;
    font-weight: normal;
    font-size: 22px;
    line-height: 0px;
    position: relative;
}
.block_member_photo .buttons .button.signature:before {
    content: '\f12d';
    font-family: 'fontawesome light';
    margin-right: 11px;
    margin-left: -18px;
    font-weight: normal;
    font-size: 22px;
    line-height: 0px;
    position: relative;
}
.block_member_photo .countdown {
    background-color: #202020;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    border: 3px solid #fff;
    border-top: none;
}
.block_member_photo .countdown .count {
    width: 97px;
    color: #fff;
    padding-left: 60px;
    position: relative;
    font-size: 42px;
    font-weight: bold;
    text-align: center;
    font-family: sans-serif;
}
.block_member_photo .countdown .count:before {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    width: 60px;
    font-family: 'fontawesome light';
    content: '\f332';
}
.block_member_photo .countdown .count:after {
    content: attr(data-count);
}
.block_member_photo .div_photo_taken canvas {
    display: none;
}
.block_member_photo .div_photo_taken img.old_photo,
.block_member_photo .div_photo_taken img.photo,
.block_member_photo .div_photo_taken img.avatar {
    width: 100%;
    display: none;
    outline: 3px solid #fff;
    outline-offset: -3px;
}
.block_member_photo .div_photo_taken img.old_photo {
    transform: scale(-1, 1);
}
.block_member_photo .div_photo_taken .div_video:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: transparent;
    transition: background-color 1s;
    z-index: 50;
}
.block_member_photo .div_photo_taken .div_video.flash:after {
    background-color: #fff;
}
.block_member_photo .div_video[data-error]:before {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: '\f071';
    font-family: 'fontawesome';
    font-size: 100px;
    color: #FFC107;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}
.block_member_photo .div_video[data-error] .helmet {
    display: none!important;
}
.block_member_photo .buttons .button.validate,
.block_member_photo .buttons .button.cancel {
    margin-left: 20px;
    padding-left: 40px;
}
.block_member_photo .buttons .button.validate:before {
    width: 56px;
    background-size: 30px;
}
.block_member_photo .buttons .button.cancel:before {
    width: 56px;
}
.block_member_photo .helmets {
    width: 85px;
    background-color: #fff;
    position: absolute;
    left: 8px;
    top: 8px;
    height: calc(18%);
    /* 8px padding 66px buttons */
    height: calc(100% - 8px - 8px - 66px);
    display: none;
}
.block_member_photo.show_helmets .helmets {
    display: block;
    overflow: hidden;
}
.block_member_photo.show_helmets .div_video {
    margin-left: 85px;
}
.block_member_photo .helmets .container {
    padding-top: 43px;
    padding-bottom: 43px;
}
.block_member_photo .helmets .category {
    width: 100%;
    position: relative;
    border-left: 2px solid #fff;
    display: flex;
    flex-direction: column;
}
/*.block_member_photo .helmets .category.hidden{
    display: none;
}*/
.block_member_photo .helmets .category[data-category="0"] {
    display: none!important;
}
.block_member_photo .helmets .category[data-selectable="0"] .design:after {
    content: attr(data-category);
    position: absolute;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 13px;
    transform: rotate(-18deg);
    color: #4d4d4d;
}
.block_member_photo .helmets .category .design {
    height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.block_member_photo .helmets .category:not([data-selectable="0"]) .design.active {
    background-color: #a8d7ff;
}
.block_member_photo:not(.show_old_photo) .helmets .category:not([data-selectable="0"]) .design:hover {
    background-color: #cfe9ff;
    cursor: pointer;
}
.block_member_photo.show_old_photo .helmets .category .design:not([data-category="no_helmet"]) {
    background-color: #cbcbcb;
    opacity: 0.7;
}
.block_member_photo .helmets .category:not([data-selectable="0"]) .design[data-category="no_helmet"] {
    background-image: url(../img/btn_cancel-0208b2865585641c6e9a38a45b6d5359.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35%;
}
.block_member_photo .helmets img {
    max-height: 85%;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}
.block_member_photo .helmets img:not(:first-child) {
    display: none;
}
.block_member_photo .helmets .category[data-selectable="0"] img {
    opacity: 0.5;
    filter: grayscale(0.4) blur(0.4px);
}
.block_member_photo .helmets .up,
.block_member_photo .helmets .down {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 43px;
    background-color: #303030;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35%;
    border: 2px solid #fff;
    border-right: none;
}
.block_member_photo .helmets .up {
    top: 0px;
}
.block_member_photo .helmets .up:not(.inactive) {
    background-image: url(../img/btn_up-aca8b0fa121d3905e9e08668ad8041fd.png);
}
.block_member_photo .helmets .down {
    bottom: 0px;
}
.block_member_photo .helmets .down:not(.inactive) {
    background-image: url(../img/btn_down-4599c37a8b3a4107c05c0b701ba9fc6b.png);
}
.block_member_photo .helmets .up:not(.inactive):hover,
.block_member_photo .helmets .down:not(.inactive):hover {
    background-color: #1a1a1a;
    cursor: pointer;
}
.block_member_photo .div_video img.helmet {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 30;
    display: none;
}
.block_member_photo .div_video[data-mirrored="-1"] img.helmet {
    transform: scale(-1, 1);
}
@media (min-width: 741px) {
    .block_member_photo .helmets .container {
        margin-left: 0px!important;
    }
}
@media (max-width: 740px) {
    .block_member_photo {
        min-width: 0px;
        width: 100%;
    }
    .block_member_photo .div_photo_taken,
    .block_member_photo .div_take_photo {
        width: 100%;
    }
    .block_member_photo .div_take_signature {
        width: 100%;
    }
    .block_member_photo .block_photo {
        min-width: 0px;
        width: 100%;
    }
    .block_member_photo .block_signature {
        min-width: 0px;
        width: 100%;
    }
    .block_member_photo .div_video {
        width: 100%;
        min-height: 50px;
        height: auto;
    }
    .block_member_photo.show_helmets .div_video {
        margin-left: 0px;
        margin-bottom: 60px;
    }
    .block_member_photo.show_helmets .helmets {
        top: auto;
        bottom: 74px;
        width: calc(84%);
        /* 8px padding */
        width: calc(100% - 8px - 8px);
        height: 60px;
    }
    .block_member_photo .helmets .container {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 30px;
        padding-right: 30px;
        height: 100%;
        display: flex;
        margin-top: 0px!important;
    }
    .block_member_photo .helmets .up,
    .block_member_photo .helmets .down {
        height: 100%;
        width: 30px;
        border-right: 2px solid #fff;
        border-top: none;
        background-size: 70%;
    }
    .block_member_photo .helmets .down {
        right: 0px;
        left: auto;
    }
    .block_member_photo .helmets .up:not(.inactive) {
        background-image: url(../img/btn_previous-7ae59cf7a096ebb0e33526c53d883a8b.png);
    }
    .block_member_photo .helmets .down:not(.inactive) {
        background-image: url(../img/btn_next-307e0088cc264f23329887e0f3d540e5.png);
    }
    .block_member_photo .helmets .category {
        display: flex;
        flex-direction: row;
        width: auto;
        height: 100%;
        border-left: none;
        border-bottom: 2px solid #fff;
    }
    .block_member_photo .helmets .category .design {
        height: 100%;
        width: 57px;
        display: flex;
    }
    .block_member_photo .helmets .category:not([data-selectable="0"]) .design[data-category="no_helmet"] {
        background-size: 60%;
    }
    .block_member_photo .helmets img {
        max-width: 85%;
    }
    .block_member_photo .buttons .button.photo {
        font-size: 13px;
    }
    .block_member_photo .buttons .button.photo {
        width: 90%;
    }
}
/* --------------------------------------------------------------------------------------------- */
/* -------------------------------------------- CART ------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */
.block_cart_login,
.block_cart_registration {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
/* ------- Login Request ------- */
.login_request {
    width: 440px;
    max-width: 860px;
    width: 100%;
    background-color: #FF0000;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 40px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.22);
    margin-top: 40px;
}
.login_request p {
    margin-bottom: 2px;
}
.login_request .button {
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    border: 2px solid #fff;
    padding: 14px;
    cursor: pointer;
    display: block;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}
.login_request .button:hover {
    background-color: #fff;
    color: #00a6de;
    color: #FF0000;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}
.login_request .button[onclick] {
    margin-bottom: 30px;
}
.login_request .member {
    width: 80px;
    height: 80px;
    border: 2px solid #fff;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    line-height: 75px;
}
.login_request .member:after {
    content: "\f0c0";
    content: "\f023";
    font-family: 'fontawesome light';
    font-size: 44px;
}
.login_request_message {
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
}
@media (max-width: 500px) {
    .login_request {
        width: 95%;
    }
    .login_request .button {
        width: 240px;
    }
    .block_return .buttons {
        padding-left: 10px;
    }
}
/* ------------------ Registration ---------------------- */
.registration_info_message {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    //padding-left: 10px;
    //padding-right: 5px;
}
.registration_info_message .message {
    background-color: #FF0000;
    position: relative;
    padding: 25px;
    color: #fff;
}
.registration_info_message .message:before {
    position: absolute;
    display: block;
    top: 0px;
    left: -6px;
    width: 4px;
    height: 100%;
    background-color: #FF0000;
    content: '';
}
.registration_info_message span {
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    border: 2px solid #fff;
    padding: 10px;
    cursor: pointer;
    /* display: block; */
    width: 219px;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    margin-top: 17px;
}
.registration_info_message span:hover {
    background-color: #fff;
    color: #00a6de;
    color: #FF0000;
}
@media (max-width: 500px) {
    .registration_info_message {
        font-size: 12px;
    }
}
/* -------------- Return -------------- */
.block_return {
    overflow: hidden;
    margin-top: 35px;
    margin-bottom: 80px;
    font-family: Open Sans, sans-serif;
    /*padding-left: 20px;
    padding-right: 20px;*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.block_return {
    margin-top: 0px;
    margin-bottom: 20px;
}
.block_return .buttons {
    overflow: hidden;
    /*padding-left: 15px;*/
}
.block_return .return {
    float: left;
    height: 40px;
    line-height: 37px;
    padding-left: 28px;
    padding-right: 28px;
    border: 2px solid #8b8b8b;
    border: 2px solid #8B8B8B;
    text-transform: uppercase;
    font-weight: bold;
}
.block_return .return:before {
    font-family: "fontawesome";
    content: "\f053";
    font-weight: normal;
    margin-right: 7px;
}
.block_return .return:hover {
    background-color: #FF0000;
    border-color: #FF0000;
    color: #fff;
}
.block_return .return:active {
    opacity: 0.8;
}
.block_continue .return a {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 940px) {
    .block_return {
        padding-right: 0px;
        padding-left: 0px;
    }
}
@media (max-width: 768px) {
    .block_return .return {
        padding-bottom: 10px;
    }
}
@media (max-width: 450px) {
    .block_return .return {
        font-size: 11px;
        padding-left: 15px;
        padding-right: 20px;
    }
}
/* ----------------- Spin ----------------- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}