/*-------------------- Variables -----------------------*/
/*--------------------- Functions ------------------------*/
html {
  font-size: 87.5%; }
  @media screen and (min-width: 720px) {
    html {
      font-size: 100%; } }

body {
  background: #fff;
  color: #434343;
  font-family: Verdana, sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  min-width: 320px; }

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

.container {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1400px;
  padding: 20px 0 0 0;
  width: 98%; }
  .container:after {
    clear: both;
    content: "";
    display: table; }
  .container a {
    transition: all .2s; }

.success {
  color: #4ab800;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center; }

/* ----------------------------- LISTE SESSIONS ----------------------------*/
.TrainingsList p {
  font-size: 1rem; }

@media screen and (min-width: 979px) {
  .TrainingsList {
    padding-left: 5%; } }

.TrainingsList-inner {
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 720px) {
    .TrainingsList-inner {
      flex-direction: row;
      justify-content: space-between; } }

@media screen and (min-width: 720px) {
  .TrainingsList-imgArea {
    width: 48%; } }

@media screen and (min-width: 720px) {
  .TrainingsList-listArea {
    width: 48%; } }

.TrainingsList-logo {
  float: left;
  margin: 0 20px 20px 0;
  max-width: 60px; }
  @media screen and (min-width: 720px) {
    .TrainingsList-logo {
      margin: 0 30px 20px 0;
      max-width: 110px; } }
  @media screen and (min-width: 979px) {
    .TrainingsList-logo {
      margin-left: -5%; } }

.TrainingsList-title {
  color: #23B1E7;
  font-size: 1.75rem;
  margin: .5em 0;
  text-transform: uppercase; }
  @media screen and (min-width: 720px) {
    .TrainingsList-title {
      font-size: 1.875rem;
      padding: 30px 0 0 0; } }

.TrainingsList-img {
  display: block;
  margin: 0 auto;
  max-height: 300px;
  max-width: 100%; }
  @media screen and (min-width: 720px) {
    .TrainingsList-img {
      max-height: none; } }

.Training-presentation {
  background: #ededed;
  padding: 15px;
  text-align: center; }
  .Training-presentation a {
    color: #434343; }
    .Training-presentation a:hover, .Training-presentation a:focus {
      color: #7f7e7e;
      text-decoration: none; }
      .Training-presentation a:hover:before, .Training-presentation a:focus:before {
        opacity: .7; }
    .Training-presentation a:before {
      background: url(../images/ico-pdf.svg) 0 0 no-repeat;
      background-size: 30px auto;
      content: "";
      display: inline-block;
      height: 32px;
      margin: -2px 10px 0 0;
      vertical-align: middle;
      transition: all .2s;
      width: 30px; }

.Training {
  margin: 0 0 3em 0; }

.Training-title {
  font-size: 1.375rem; }
  .Training-title a {
    color: #434343;
    text-decoration: none; }
    .Training-title a:hover, .Training-title a:focus {
      color: #7f7e7e; }
      .Training-title a:hover:before, .Training-title a:focus:before {
        background: #7f7e7e; }
    .Training-title a:before {
      background: #434343;
      content: "";
      display: inline-block;
      height: 20px;
      margin: 0 10px 0 0;
      transition: all .2s;
      width: 15px; }

.Training-summary {
  color: #7F7F7E; }

.Training-all a {
  background: #23B1E7;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
  transition: all .2s;
  vertical-align: middle; }
  .Training-all a:hover, .Training-all a:focus {
    opacity: .7; }

.FilterNavigator {
  margin: 1em 0 2em 0;
  text-align: center; }
  .FilterNavigator ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  .FilterNavigator li {
    display: inline-block;
    vertical-align: middle; }
  .FilterNavigator a,
  .FilterNavigator strong {
    background: #606061;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 40px;
    margin: 0 4px;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition: all .2s;
    width: 40px; }
  .FilterNavigator a:hover,
  .FilterNavigator a:focus {
    background: #7f7e7e; }
  .FilterNavigator strong {
    border: 2px #606061 solid;
    background: none;
    color: #606061;
    font-size: 1.125rem;
    font-weight: bold; }

/* ----------------------------- FICHE SESSION ----------------------------*/
.TrainingDetails {
  margin: 0 auto;
  max-width: 1200px;
  position: relative; }
  .TrainingDetails p {
    color: #616061;
    font-size: 1.125rem; }
  .TrainingDetails a {
    color: #616061; }
    .TrainingDetails a:hover, .TrainingDetails a:focus {
      text-decoration: none; }
  .TrainingDetails ul {
    font-size: 1.125rem;
    list-style: none;
    margin: 0;
    padding: 0; }
  .TrainingDetails li {
    color: #616061;
    margin: .2em 0;
    padding: 0 0 0 15px;
    position: relative; }
    .TrainingDetails li:before {
      background: #616061;
      content: "";
      display: block;
      height: 8px;
      left: 0;
      margin: 0 12px 0 0;
      position: absolute;
      top: .4em;
      transform: rotate(45deg);
      width: 8px; }
  .TrainingDetails .TrainingInfos-duration {
    color: #23B1E7;
    font-size: 1.5rem;
    font-weight: bold; }

.TrainingDetails-subscribe a {
  background: #23B1E7;
  color: #fff;
  display: inline-block;
  font-size: 1.375rem;
  font-weight: bold;
  padding: 15px 25px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s;
  vertical-align: middle; }
  .TrainingDetails-subscribe a:hover, .TrainingDetails-subscribe a:focus {
    opacity: .7; }

.TrainingDetails-logo {
  margin: 0 0 20px 0;
  max-width: 60px; }
  @media screen and (min-width: 720px) {
    .TrainingDetails-logo {
      max-width: 110px; } }

.TrainingContent {
  box-sizing: border-box; }
  @media screen and (min-width: 979px) {
    .TrainingContent {
      float: right;
      padding: 40px 0 0 0;
      width: 66%; } }
  .TrainingContent .TrainingContent-description {
    color: #23B1E7;
    font-size: 1.5rem;
    margin: 2em 0; }

.TrainingContent-title {
  color: #23B1E7;
  font-size: 2.5rem;
  margin: .5em 0; }

.TrainingContent-subTitle {
  color: #616061;
  font-size: 1.75rem;
  margin: .3em 0; }

.TrainingDetails-sectionTitle {
  color: #616061;
  font-size: 1.875rem;
  margin: 1.5em 0 .3em 0;
  text-transform: uppercase; }
  .TrainingDetails-sectionTitle:before {
    background: #616061;
    content: "";
    display: inline-block;
    height: 22px;
    margin: 0 10px 0 0;
    width: 15px; }

.TrainingContent-footer:after {
  clear: both;
  content: "";
  display: table; }

.TrainingContent-footer .TrainingContent-technical {
  color: #23B1E7;
  font-size: 1.25rem; }
  @media screen and (min-width: 720px) {
    .TrainingContent-footer .TrainingContent-technical {
      float: left;
      padding: 20px 0 0 0; } }

@media screen and (min-width: 720px) {
  .TrainingContent-codeService {
    float: right;
    text-align: center;
    width: 200px; } }

.TrainingContent-codeService img {
  max-width: 150px; }

.TrainingInfos {
  box-sizing: border-box; }
  @media screen and (min-width: 979px) {
    .TrainingInfos {
      float: left;
      padding: 0 0 0 5%;
      width: 28%; } }

.TrainingInfos-priceDetails {
  display: block;
  font-size: 1rem; }

.container-backBtn {
  border-top: 2px #616061 solid;
  padding: 10px 0; }
  .container-backBtn a {
    background: #616061;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    transition: all .2s; }
    .container-backBtn a:hover, .container-backBtn a:focus {
      opacity: .7; }

@media screen and (min-width: 979px) {
  .TrainingDetails .container-backBtn {
    margin-left: 5%; } }

/* ----------------------------- INSCRIPTION SESSION ----------------------------*/
.Subscribe {
  padding: 0 0 30px 0; }

.Subscribe-title {
  color: #F47B20;
  font-size: 2.5rem; }

.Subscribe-subTitle {
  color: #7F7F7E;
  font-size: 1.5rem;
  font-weight: bold; }

.RegisterSessionBox {
  border: 2px #e0e0e0 solid;
  border-top: none;
  padding: 25px 5px 10px 5px;
  position: relative; }
  .RegisterSessionBox:before {
    background: #F47B20;
    content: "";
    display: block;
    height: 10px;
    left: -2px;
    position: absolute;
    top: 0;
    width: calc(100% + 4px); }

.RegisterForm ol {
  list-style: none;
  margin: 0;
  padding: 0; }

.RegisterForm li {
  margin: 10px 0; }

.RegisterForm .RegisterSessionBox-gender {
  margin-top: 0; }

.RegisterForm .small {
  font-size: .8em;
  font-style: italic;
  margin: 0; }
  @media screen and (min-width: 720px) {
    .RegisterForm .small {
      padding-left: 31%;
      width: 68%; } }
  @media screen and (min-width: 979px) {
    .RegisterForm .small {
      display: inline-block;
      padding: 0 0 0 10px;
      width: auto; } }

@media screen and (min-width: 979px) {
  .RegisterForm .twocols {
    display: inline-block;
    margin-top: 0;
    width: 50%; } }

@media screen and (min-width: 979px) {
  .RegisterForm .twocols label {
    padding-right: 2%;
    width: 46%; } }

.RegisterForm .twocols + li:not(.twocols):not(.threecols) {
  margin-top: 0; }

@media screen and (min-width: 979px) {
  .RegisterForm .twocols.sameline {
    width: 44%; } }

@media screen and (min-width: 979px) {
  .RegisterForm .threecols {
    display: inline-block;
    margin-top: 0;
    width: 33.3333333%; } }

@media screen and (min-width: 979px) {
  .RegisterForm .threecols label {
    padding-right: 3%;
    width: 69%; } }

@media screen and (min-width: 979px) {
  .RegisterForm .threecols input:not([type=radio]):not([type=checkbox]):not([type=submit]), .RegisterForm .threecols select {
    width: 30%; } }

.RegisterForm .threecols + li:not(.twocols):not(.threecols) {
  margin-top: 0; }

@media screen and (min-width: 979px) {
  .RegisterForm .threecols.sameline label {
    width: 50%; } }

@media screen and (min-width: 979px) {
  .RegisterForm .threecols.sameline input:not([type=radio]):not([type=checkbox]):not([type=submit]), .RegisterForm .threecols.sameline select {
    width: 50%; } }

@media screen and (min-width: 979px) {
  .RegisterForm .threecols.sameline {
    width: 30.1%; } }

.RegisterForm label {
  box-sizing: border-box;
  display: block;
  font-size: 1rem;
  margin: 5px 0 0 0;
  padding: 0 1% 0 0;
  width: 100%; }
  @media screen and (min-width: 720px) {
    .RegisterForm label {
      display: inline-block;
      padding-left: 4%;
      text-align: right;
      vertical-align: top;
      width: 31%; } }
  @media screen and (min-width: 979px) {
    .RegisterForm label {
      width: 23%; } }
  .RegisterForm label em {
    display: block;
    font-size: .8em; }
  .RegisterForm label.error {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px !important; }

.RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]),
.RegisterForm textarea, .RegisterForm select {
  border: 1px #7f7e7e solid;
  box-sizing: border-box;
  color: #434343;
  height: 34px;
  padding: 5px 30px 5px 5px;
  vertical-align: middle;
  width: 100%; }
  @media screen and (min-width: 720px) {
    .RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]),
    .RegisterForm textarea, .RegisterForm select {
      display: inline-block;
      margin-right: 4%;
      width: 65%; } }
  @media screen and (min-width: 979px) {
    .RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]),
    .RegisterForm textarea, .RegisterForm select {
      margin-right: 0;
      max-width: 580px;
      width: 53%; } }
  .RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]):focus,
  .RegisterForm textarea:focus, .RegisterForm select:focus {
    border: 1px #000 solid;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    outline: none; }
  .RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]):required:valid,
  .RegisterForm textarea:required:valid, .RegisterForm select:required:valid {
    background: url(../images/ico-valid.svg) calc(100% - 6px) 10px no-repeat;
    background-size: 15px auto; }
  .RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]).error, .RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]):required.error,
  .RegisterForm textarea.error,
  .RegisterForm textarea:required.error, .RegisterForm select.error, .RegisterForm select:required.error {
    background: url(../images/ico-invalid.svg) calc(100% - 6px) 6px no-repeat;
    background-size: 20px auto; }
  .RegisterForm input:not([type=radio]):not([type=checkbox]):not([type=submit]).error,
  .RegisterForm textarea.error, .RegisterForm select.error {
    border: 1px #f00 solid; }

.RegisterForm textarea {
  height: 70px; }

.RegisterForm select {
  background: none !important;
  padding-right: 5px; }

.RegisterForm-title {
  color: #F47B20;
  font-size: 1.75rem;
  margin: .8em 0 .2em 0; }
  .RegisterForm-title:before {
    background: #F47B20;
    content: "";
    display: inline-block;
    height: 22px;
    margin: 0 10px 0 0;
    width: 15px; }

@media screen and (min-width: 720px) {
  .RegisterSessionBox-gender {
    padding-left: 31%; } }

@media screen and (min-width: 979px) {
  .RegisterSessionBox-gender {
    padding-left: 23%; } }

.RegisterSessionBox-gender label {
  display: inline-block;
  margin: 0 15px 0 5px;
  padding: 0;
  vertical-align: baseline;
  width: auto; }

.RegisterForm-check {
  background: #f8f8f8;
  border-bottom: 1px #F47B20 solid;
  box-sizing: border-box;
  padding: 10px;
  margin: 0 0 -1px 0;
  max-width: 500px;
  width: 100%; }
  .RegisterForm-check label {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 10px;
    vertical-align: baseline;
    width: auto; }

.RegisterForm-cgu {
  margin: 30px 0 20px 0; }
  @media screen and (min-width: 720px) {
    .RegisterForm-cgu {
      padding-left: 31%; } }
  @media screen and (min-width: 979px) {
    .RegisterForm-cgu {
      padding-left: 23%; } }
  .RegisterForm-cgu label {
    display: inline;
    margin: 0;
    min-height: 0;
    padding: 5px 10px;
    position: relative;
    text-align: left;
    vertical-align: baseline;
    width: auto; }
  .RegisterForm-cgu a {
    color: #F47B20; }
    .RegisterForm-cgu a:hover, .RegisterForm-cgu a:focus {
      text-decoration: none; }
  .RegisterForm-cgu input[type=checkbox].error ~ label {
    background: url(../images/ico-invalid.svg) 10px 0 no-repeat;
    background-size: 20px auto;
    padding-left: 40px; }

@media screen and (min-width: 720px) {
  .RegisterForm-validate {
    padding-left: 31%; } }

@media screen and (min-width: 979px) {
  .RegisterForm-validate {
    padding-left: 23%; } }

.RegisterForm-validate .btn-validate {
  background: #F47B20;
  border: none;
  color: #fff;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 15px 20px;
  text-decoration: none;
  transition: all .2s;
  vertical-align: middle; }
  .RegisterForm-validate .btn-validate:hover, .RegisterForm-validate .btn-validate:focus {
    opacity: .7; }

/* ----------------------------- CATEGORIES ----------------------------*/
.Categories-title {
  color: #F47B20;
  font-size: 2.5rem;
  text-align: center; }

.Categories-banner {
  max-width: 100%; }

.CategoriesList ul {
  list-style: none;
  margin: 0 auto;
  max-width: 500px;
  padding: 0; }

.CategoriesList li {
  margin: 5px 0; }

.CategoriesList a {
  background: #F47B20;
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  transition: all .2s; }
  .CategoriesList a:hover, .CategoriesList a:focus {
    opacity: .7; }