@import url(https://fonts.googleapis.com/css?family=Great+Vibes);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

*, *:before, *:after, input, select, textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.clearfix:after, .row:after, .form-line:after { content: ""; display: table; clear: both; }

.hidden { display: none; }

.left { float: left; }

img { max-width: 100%; height: auto; }

img.left { margin: 0 1.5em 1.5em 0; }

.right { float: right; }

img.right { margin: 0 0 1.5em 1.5em; }

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

.text-right { text-align: right; }

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

[class^='icon-'] { display: inline-block; vertical-align: middle; background-repeat: no-repeat; }

.overflow-hidden { overflow: hidden; }

.sep { opacity: .5; padding: 0 4px; }

@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); } }

@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); } }

@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10px); }
  100% { opacity: 1; -webkit-transform: translateY(0); } }

@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); } }

.wrapper { margin: 0 auto; max-width: 1200px; }
@media screen and (max-width: 1200px) { .wrapper { width: 96%; } }

[class^='col-'] { margin-left: 3%; float: left; }
[class^='col-']:first-child { margin-left: 0; }

.col-1 { width: 5.58333%; }

.col-2 { width: 14.16667%; }

.col-3 { width: 22.75%; }

.col-4 { width: 31.33333%; }

.col-5 { width: 39.91667%; }

.col-6 { width: 48.5%; }

.col-7 { width: 57.08333%; }

.col-8 { width: 65.66667%; }

.col-9 { width: 74.25%; }

.col-10 { width: 82.83333%; }

.col-11 { width: 91.41667%; }

.col-12 { width: 100%; }

.offset-1 { margin-left: 8.58333% !important; }

.offset-2 { margin-left: 17.16667% !important; }

.offset-3 { margin-left: 25.75% !important; }

.offset-4 { margin-left: 34.33333% !important; }

.offset-5 { margin-left: 42.91667% !important; }

.offset-6 { margin-left: 51.5% !important; }

.offset-7 { margin-left: 60.08333% !important; }

.offset-8 { margin-left: 68.66667% !important; }

.offset-9 { margin-left: 77.25% !important; }

.offset-10 { margin-left: 85.83333% !important; }

.offset-11 { margin-left: 94.41667% !important; }

.offset-12 { margin-left: 103% !important; }

/* ....................................................  Global 
.................................................... */
html { min-height: 100%; position: relative; }

body { color: #2a2a2b; background: #fbfbfb; height: 100%; font-family: "Helvetica Neue", Helvetica, arial, sans-serif; font-size: 14; font-size: 0.875rem; line-height: 1.4; }

strong { font-weight: 700; }

em { font-style: italic; }

a { color: #2a2a2b; }
a:hover { text-decoration: none; }

hr { backround: transparent; border: 0; border-top: 1px solid #d5d5d5; margin: 20px 0; width: 100%; clear: both; }

.serif { font-family: "Great Vibes", serif; }

.primary-color { color: #ed5483; }

/* ....................................................  Forms 
.................................................... */
button, input, select, textarea { outline: 0; font-family: "Helvetica Neue", Helvetica, arial, sans-serif; }

button, input[type="submit"] { cursor: pointer; cursor: hand; }

.form-line label { width: 32%; line-height: 32px; display: inline-block; vertical-align: top; }
.form-line .form-line--tag { width: 66%; display: inline-block; vertical-align: middle; }
.form-line input[type="text"], .form-line input[type="email"], .form-line input[type="number"], .form-line input[type="tel"], .form-line input[type="search"], .form-line input[type="password"] { width: 100%; height: 32px; padding: 0 5px; vertical-align: middle; border: 1px solid #c8c8c8; border-radius: 2px; font-size: 13; font-size: 0.8125rem; }
.form-line select { height: 32px; padding: 0 5px; font-size: 13; font-size: 0.8125rem; border: 1px solid #c8c8c8; border-radius: 2px; }
.form-line textarea { padding: 5px; font-size: 13; font-size: 0.8125rem; border: 1px solid #c8c8c8; border-radius: 2px; }
.form-line .form-message { display: block; clear: both; font-size: 12; font-size: 0.75rem; line-height: 1.3; margin-top: 5px; margin-bottom: 10px; color: #767678; }
.form-line .form-message--error { color: #da2b2b; }

.form-line--checkbox label, .form-line--checkbox .form-line--tag, .form-line--checkbox input { display: inline-block; width: auto; padding: 0; vertical-align: middle; }
.form-line--checkbox label { margin-right: 20px; }
.form-line--checkbox label:last-child { margin-right: 0; }

.button { display: inline-block; border: 0; text-decoration: none; padding: 0 1em; padding-bottom: 0; height: 32px; line-height: 32px; background: #ed5483; color: white; vertical-align: middle; border-radius: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.button:hover { background: #ef6b94; }
.button:focus { background: #f07097; }

.button-big { font-size: 18; font-size: 1.125rem; padding: .5em 2em; height: auto; border-radius: 2px; }

.form-top-message { padding: 10px 15px; margin-bottom: 20px; border-radius: 2px; background: #eeeeee; }

.form-top-message--error { background: #ffc0c0; color: #da2b2b; }

.form-top-message--success { background: #d9f7bb; color: #5aa214; }

.form-input--error { border-color: #d22323; background: #fce2e2; }

/* ....................................................  Top bar 
.................................................... */
.topbar { position: fixed; left: 0; top: 0; width: 100%; z-index: 2; background: #ed5483; padding: 10px 0; height: 54px; line-height: 32px; color: white; }
.topbar input[type="email"], .topbar input[type="text"], .topbar input[type="password"] { width: 140px; border: 0; border-radius: 2px; }
.topbar .button { background: #c6154b; }
.topbar h1 { font-size: 18; font-size: 1.125rem; }
.topbar .topbar-connexion { text-align: right; }
.topbar .connexion-trigger, .topbar .menu-trigger { background: transparent; padding: 0; margin: 0; border: 0; display: none; }
.topbar .topbar-connexion--form h2 { display: none; font-size: 24; font-size: 1.5rem; text-align: center; margin-bottom: 20px; color: #2a2a2b; }
.topbar .deconnexion { font-size: 13; font-size: 0.8125rem; color: white; }
@media screen and (max-width: 980px) { .topbar .topbar-connexion--form { display: none; position: fixed; background: white; padding: 30px; min-width: 290px; right: 0; top: 54px; height: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
  .topbar .topbar-connexion--form h2 { display: block; }
  .topbar .topbar-connexion--form.target-active { display: block; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-delay: 0s; animation-delay: 0s; }
  .topbar .topbar-connexion--form input[type="email"], .topbar .topbar-connexion--form input[type="text"], .topbar .topbar-connexion--form input[type="password"] { width: 100%; display: block; border: 1px solid #d9d9d9; margin-bottom: 10px; }
  .topbar .connexion-trigger { display: block; } }
@media screen and (max-width: 768px) { .topbar h1 span { display: none; }
  .topbar .menu-trigger { display: block; }
  .topbar .deconnexion { display: none; } }
@media screen and (max-width: 640px) { .topbar .left { position: absolute; }
  .topbar h1 { font-size: 16; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 190px; float: left; } }

/* ....................................................  Big Image 
.................................................... */
.big-image { overflow: hidden; }
@media screen and (max-width: 768px) { .big-image { display: none; } }

.big-image--wrapper { position: fixed; top: 0; left: 0; z-index: 0; width: 48.5%; height: 100%; overflow: hidden; }

.big-image--image { width: auto; max-width: none; pointer-events: none; max-height: 100%; position: absolute; right: -30%; opacity: 0; }

.big-image--info { position: absolute; right: 3%; bottom: 3%; z-index: 1; width: 60%; }
.big-image--info .big-image--info---title { padding: 1em; text-align: center; color: white; background: rgba(0, 0, 0, 0.5); border-radius: 2px 2px 0 0; }
.big-image--info .big-image--info---text { background: rgba(255, 255, 255, 0.8); padding: 1.6em; border-radius: 0 0 2px 2px; }
.big-image--info h1 { font-size: 46; font-size: 2.875rem; }
.big-image--info h2 { font-size: 14; font-size: 0.875rem; text-transform: uppercase; margin-top: -5px; }
.big-image--info p { font-size: 13; font-size: 0.8125rem; }
@media screen and (max-width: 1200px) { .big-image--info { width: 94%; } }

.big-image--image_loaded { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-delay: 0s; animation-delay: 0s; }

/* ....................................................  Public part

.................................................... */
.public-form { padding: 80px 0 4% 0; background: #fbfbfb; z-index: 1; position: relative; }
@media screen and (min-width: 1300px) { .public-form { padding: 130px 0 4% 0; } }
.public-form h1 { font-size: 80; font-size: 5rem; text-align: center; color: #ed5483; }
.public-form h1 img { display: none; width: 18%; height: auto; margin-right: 20px; border-radius: 100px; position: absolute; left: 0; margin-top: -5px; }
.public-form h2 { font-size: 21; font-size: 1.3125rem; text-align: center; margin-bottom: 20px; margin-top: -1em; position: relative; text-shadow: -1px -1px 0 #fbfbfb, 1px -1px 0 #fbfbfb, -1px 1px 0 #fbfbfb, 1px 1px 0 #fbfbfb; }
@media screen and (max-width: 768px) { .public-form { width: 100%; float: none; margin: 0; }
  .public-form h1 { padding-left: 22%; text-align: left; }
  .public-form h1 img { display: block; }
  .public-form h2 { text-align: left; padding-left: 22%; } }

/* ....................................................  Step 1 
.................................................... */
.step-1 h3 { text-align: center; background: #fcdee7; font-size: 18; font-size: 1.125rem; padding: 10px; border-radius: 50px; color: #ed5483; margin-bottom: 4%; }
.step-1 h4 { text-align: center; font-size: 18; font-size: 1.125rem; margin-bottom: 10px; }
.step-1 h4 span { color: #ed5483; }
.step-1 p { margin-bottom: 20px; font-size: 12; font-size: 0.75rem; }
.step-1 .form-line { margin-bottom: 30px; }
.step-1 .form-action { text-align: center; margin-bottom: 0; }
.step-1 textarea { width: 100%; min-height: 80px; }
@media screen and (max-width: 640px) { .step-1 h3 { font-size: 14; font-size: 0.875rem; }
  .step-1 h4 { font-size: 16; font-size: 1rem; text-align: left; }
  .step-1 label { width: 48%; } }

.blink { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -webkit-animation-name: blink; animation-name: blink; }

@-webkit-keyframes blink { 0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes blink { 0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; } }

/* ....................................................  Step 2 
.................................................... */
.step-2 .form-line { margin-bottom: 10px; }
.step-2 .form-line label { text-align: right; padding-right: 10px; }
.step-2 .form-line--agree { margin-top: 20px; text-align: center; font-size: 12; font-size: 0.75rem; }
@media screen and (max-width: 640px) { .step-2 .form-line label, .step-2 .form-line .form-line--tag { display: block; width: 100%; }
  .step-2 .form-line label { line-height: normal; margin-bottom: 5px; text-align: left; }
  .step-2 .form-line--checkbox label, .step-2 .form-line--checkbox .form-line--tag { width: auto; display: inline; line-height: normal; text-align: left; } }

/* ....................................................  Payment 
.................................................... */
.payment-form { padding-top: 80px; padding-bottom: 20px; }
.payment-form h3 { background: #f8e1a1; color: #956239; padding-left: 20px; padding-right: 20px; }
.payment-form h4 { color: #ed5483; text-align: center; margin-bottom: 0; font-size: 24; font-size: 1.5rem; }
.payment-form h5 { text-align: center; }
@media screen and (max-width: 640px) { .payment-form h4 { font-size: 13; font-size: 0.8125rem; font-weight: 700; }
  .payment-form h5 { font-size: 11; font-size: 0.6875rem; } }

.payment-form--wrapper .payment-form--wrapper---in { background: white; padding: 40px 40px 20px 40px; border: 1px solid #d5d5d5; border-top: 0; margin-bottom: 20px; }
@media screen and (max-width: 1200px) { .payment-form--wrapper .payment-form--wrapper---in { padding: 20px; } }
.payment-form--wrapper h3 { background: #ed5483; color: white; text-shadow: none; font-size: 18; font-size: 1.125rem; padding: 10px; border-radius: 0; margin: 10px 0 0 0; }
@media screen and (max-width: 1200px) { .payment-form--wrapper h3 { font-size: 16; font-size: 1rem; } }
@media screen and (max-width: 640px) { .payment-form--wrapper h3 { font-size: 12; font-size: 0.75rem; } }
.payment-form--wrapper select { min-width: 100px; }

.cvv-input { width: 68px !important; }

input.cc-input { background: white url("../images/lock.svg") no-repeat right center; padding-right: 30px; }

.cvv-image { display: inline-block; vertical-align: middle; position: absolute; margin-left: 6px; }
.cvv-image .cvv-image--big { display: none; left: 0; top: 0; }
.cvv-image:hover .cvv-image--small, .cvv-image:focus .cvv-image--small { display: none; }
.cvv-image:hover .cvv-image--big, .cvv-image:focus .cvv-image--big { display: block; }

.author-cite h3 { margin-top: 0; text-shadow: none; font-size: 16; font-size: 1rem; margin-bottom: 10px; text-align: left; background: none; padding: 0; color: #2a2a2b; }
.author-cite cite { position: relative; display: block; padding-left: 40px; font-style: italic; }
.author-cite cite:before { content: open-quote; position: absolute; font-size: 60; font-size: 3.75rem; color: #c8c8c8; line-height: normal; left: 0; top: -10px; }

.cgu { margin-top: 20px; text-align: justify; font-size: 10; font-size: 0.625rem; line-height: normal; }

/* ....................................................  Members 
.................................................... */
.members { padding: 90px 0 40px 0; }
.members a { color: #ed5483; }
.members .button { color: white; }

.credits-info { margin-bottom: 10px; text-align: right; font-size: 12; font-size: 0.75rem; }

.members-avatar img { border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
@media screen and (max-width: 640px) { .members-avatar { display: none; } }

@media screen and (max-width: 640px) { .members-content { width: 100%; float: none; margin: 0; } }

.members-menu { margin-bottom: 20px; }
.members-menu h1 { font-size: 52; font-size: 3.25rem; text-align: center; color: #ed5483; line-height: normal; }
.members-menu h1 img { display: none; width: 70px; height: auto; margin-right: 10px; border-radius: 100px; float: left; margin-top: -10px; }
.members-menu h2 { font-size: 16; font-size: 1rem; text-align: center; margin-bottom: 30px; margin-top: -15px; text-shadow: -1px -1px 0 #fbfbfb, 1px -1px 0 #fbfbfb, -1px 1px 0 #fbfbfb, 1px 1px 0 #fbfbfb; }
.members-menu nav { list-style-type: none; padding: 0; margin: 0; width: 100%; display: table; border-spacing: 4px; }
.members-menu nav li { display: table-cell; overflow: hidden; vertical-align: middle; border-radius: 3px; }
.members-menu nav li.hide-on-desktop { display: none; margin-top: 20px; }
.members-menu nav li a { display: block; position: relative; background: #ed5483; color: white; text-decoration: none; text-align: center; margin: -40px 0; padding: 50px 10px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.members-menu nav li a:hover { background: #ef6b94; }
.members-menu nav li.active a { background: #ef6b94; }
@media screen and (max-width: 768px) { .members-menu nav { display: none; display: none; position: fixed; background: white; padding: 30px; width: 290px; right: 0; top: 54px; height: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
  .members-menu nav li { display: block; margin-bottom: 2px; }
  .members-menu nav li.hide-on-desktop { display: block; }
  .members-menu nav.target-active { display: block; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-delay: 0s; animation-delay: 0s; } }
@media screen and (max-width: 640px) { .members-menu h1 { font-size: 42; font-size: 2.625rem; text-align: left; }
  .members-menu h1 img { display: block; }
  .members-menu h2 { text-align: left; font-size: 14; font-size: 0.875rem; } }

.members-content--main { background: white; padding: 5% 4%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 2px; }
.members-content--main *:last-child { margin-bottom: 0; }
.members-content--main h1 { font-size: 24; font-size: 1.5rem; margin-bottom: 20px; }
.members-content--main h2 { font-size: 18; font-size: 1.125rem; margin-bottom: 20px; }
.members-content--main p { margin-bottom: 20px; }
.members-content--main .step-2 .form-line label { line-height: normal; vertical-align: middle; }

.members-question h2 { color: #ed5483; }
.members-question h3 { color: #767678; margin-bottom: 10px; }

.members-question--more { white-space: nowrap; }

.members-question--status { padding-left: 32px; }
.members-question--status.status-waiting { background: url("../images/wait.svg") no-repeat; }
.members-question--status.status-recieved { background: url("../images/reply.svg") no-repeat; }

.members-conntent--question .form-line label { display: inline-block; width: auto; }
.members-conntent--question .form-line textarea { width: 100%; display: block; margin: 20px 0; min-height: 160px; }
.members-conntent--question .form-line input[type="file"] { vertical-align: baseline; padding-top: 4px; margin-left: 10px; }
.members-conntent--question .form-action { margin-top: 30px; text-align: center; }

.members-consultation--phones h2 { text-align: center; margin-bottom: 30px !important; }
.members-consultation--phones h2:first-child { margin-bottom: 0 !important; }
.members-consultation--phones p { margin: 0; text-align: center; }

.members-credits table { padding: 0; margin: 0 0 20px 0; width: 100%; }
.members-credits table th, .members-credits table td { padding: 10px; }
.members-credits table tr:nth-child(odd) td { background: #f2f2f2; }
.members-credits table th { font-weight: 700; }
.members-credits table del { color: #dd1d1d; }
.members-credits .form-action { text-align: center; }

/* ....................................................  Footer 
.................................................... */
#footer { text-align: center; padding-bottom: 20px; font-size: 12; font-size: 0.75rem; color: #767678; }
#footer a { text-decoration: none; color: #767678; }
#footer a:hover { text-decoration: underline; }
@media screen and (max-width: 768px) { #footer .col-6, #footer .offset-6 { margin: 0 !important; width: 100%; float: none; } }

@media screen and (min-width: 768px) { body { padding-bottom: 40px; }
  .footer-public { position: absolute; bottom: 0; width: 100%; left: 0; } }