.next_session {display: flex; align-items: flex-end; margin-top: 7vh; margin-bottom: 2rem; } .next_session .calendar {margin-right: 2rem; position: relative; width: 15rem; fill: #1055BD; } .next_session .calendar::before {content: ''; display: block; padding-top: 80%; } .next_session h3 {margin-bottom: 1rem; font-family: "Proxima Nova W01 Regular", sans-serif; font-size: 2.5rem; line-height: 2.7rem; color: #000000; } .when {padding-bottom: 1rem; } .next_session h4, .next_session h5 {margin-bottom: 1rem; font-family: "Proxima Nova W01 Regular", sans-serif; font-size: 2.5rem; line-height: 2.5rem; color: #1055BD; } .next_session h5 {font-family: "Proxima Nova W01 Bold", sans-serif; color: #000000; } .formbox {padding-bottom: 10vh; } #errs > .retour {display: none; } #errs h3 {margin-top: 10vh; margin-bottom: 2rem; font-family: "Proxima Nova W01 Regular", sans-serif; font-size: 4rem; line-height: 2.5rem; color: #2E00FF; } #errs p {color: #000000; } form {background-color: #efefef; } form:not(.one) { display: none; } form > aside.step {box-sizing: border-box; padding: 1.5rem 0; position: absolute; top: 0; right: 100%; width: 9rem; font-family: "Proxima Nova W01 Thin", sans-serif; font-size: 5rem; line-height: 5rem; color: #1055BD; text-align: center; border-radius: 1.5rem 0 0 1.5rem; background-color: #efefef; } form > aside.step::before {content: ''; display: block; position: absolute; top: 0; right: 1px; width: 1px; height: 100%; background-color: #000; mix-blend-mode: overlay; } form > aside.step::after {content: ''; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #C7C7C7; mix-blend-mode: overlay; } .demi > div {display: inline-block; vertical-align: top; box-sizing: border-box; padding-right: 1rem; width: 50%; } .demi > div:last-child { padding-left: 1rem; padding-right: 0; } .btnbox {position: absolute; left: 2rem; bottom: -0.5rem; height: 4rem; cursor: pointer; } .btnbox .pastille {display: flex; box-sizing: border-box; padding: 1.5rem 2rem; } .btnbox .arrow {position: relative; margin-right: 1rem; width: 2rem; fill: #000000; } .btnbox .arrow::before {content: ''; display: block; padding-top: 83%; } .btnbox .str {position: relative; font-family: "Proxima Nova W01 Regular", sans-serif; font-size: 1.6rem; line-height: 1.6rem; color: #000000; } .btnbox#back {top: -1rem; left: auto; right: 2rem; bottom: auto; } #back.btnbox .arrow { margin-right: 0; } #back .arrow svg { transform: scaleX(-1); } form {position: relative; box-sizing: border-box; padding: 2.5rem 2rem 4rem 2rem; border-radius: 0 1.5rem 1.5rem 1.5rem; } input, textarea, select {font-family: "HelveticaNeueETW01-45Lt", sans-serif; } label {display: block; margin-bottom: 1rem; font-family: "Proxima Nova W01 Light", sans-serif; font-size: 2rem; line-height: 2rem; color: #000; } label.mssg {display: none; margin-bottom: 1.5rem; font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.8rem; color: #f00; } label.mssg a:hover { color: #000; } input {-webkit-appearance: none; display: block; box-sizing: border-box; margin: 0 auto; margin-bottom: 3rem; padding: 1.2rem 2rem; width: 100%; font-size: 1.8rem; line-height: 2rem; color: #000000; background: #fff; border-radius: 0.6rem; border: none; } input.err { border: 1px solid #FF688B; } input::-moz-placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.6rem; color: #444; } input::-ms-input-placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.rem; color: #444; } input::-webkit-placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.6rem; color: #444; } input::placeholder { font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; line-height: 1.6rem; color: #444; } input[type=submit] {border: none; background: none; border-radius: 0; outline: none; position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; } input[type=submit]:hover {cursor: pointer; } textarea {-moz-appearance: none; -webkit-appearance: none; box-sizing: border-box; display: block; margin-bottom: 2rem; padding: 1rem 2rem; width: 100%; height: 20rem; font-size: 1.8rem; line-height: 2rem; color: #000000; background: #fff; border-radius: 0.6rem; border: none; border-radius: 0.6rem; overflow: hidden; } textarea.err { border: 1px solid #f00; } input[type=checkbox] {-moz-appearance: none; -webkit-appearance: none; box-sizing: border-box; display: inline-block; vertical-align: middle; margin-right: 1rem; margin-bottom: 0; padding: 0; width: 2.5rem; height: 2.5rem; background: none; background-color: #fff; border: 1px solid #1055BD; border-radius: 0.4rem; cursor: pointer; } input[type=checkbox]:checked {background-color: #ff0; } input[type=checkbox]+label {display: inline-block; vertical-align: top; margin-bottom: 0; font-family: "HelveticaNeueETW01-55Rg", sans-serif; font-size: 1.6rem; line-height: 1.8rem; color: #1055BD; } input[type=checkbox]+label a {font-family: "HelveticaNeueETW01-75Bd", sans-serif; color: #54CFFD; } input[type=checkbox]+label a:hover { color: #000; } input[type=checkbox].err { border: 1px solid #FF688B; } div.checkbox { margin: 1rem 0 2rem 0; } select {-moz-appearance: none; -webkit-appearance: none; box-sizing: border-box; margin-bottom: 2rem; padding: 0.8rem 1rem; margin: 0 auto; margin-bottom: 2rem; padding: 1rem 2rem; width: 100%; height: 5rem; font-size: 1.6rem; line-height: 1.8rem; letter-spacing: 0.1rem; color: #fff; background: #424242 url('../../assets/images/select_arrow.png') no-repeat right; border: none; border-radius: 0.6rem; overflow: hidden; } select::-ms-expand {display: none; } select.err { border-color: #f00; } @media all and (max-width: 1100px) {.formbox { margin-top: 6rem; } form > aside.step {padding: 1rem 0; top: auto; right: auto; left: 0; bottom: 100%; width: 7rem; font-size: 3rem; line-height: 3rem; border-radius: 1.5rem 1.5rem 0 0; } form > aside.step::before {top: auto; left: 0; right: auto; bottom: 1px; width: 100%; height: 1px; } form > aside.step::after {top: auto; left: 0; right: auto; bottom: 0; width: 100%; height: 1px; } } @media all and (max-width: 800px) {.next_session { margin-top: 4rem; } .next_session .calendar { width: 10rem; } .next_session h3 { font-size: 2rem; line-height: 2.2rem; } .next_session h4, .next_session h5 { margin-bottom: 0.5rem; font-size: 2rem; line-height: 2rem; } #errs h3 { margin-top: 2rem; font-size: 3.5rem; line-height: 3.8rem; } label { font-size:1.8rem; line-height:1.8rem; } input, textarea { font-size: 1.6rem; line-height: 1.8rem; } } @media all and (max-width: 600px) {.demi > div {display: block; padding-right: 0; width: 100%; } .demi > div:last-child { padding-left: 0; } .btnbox#back { top: -2rem; } textarea { height: 26rem; } }