input:focus,
select:focus,
textarea:focus,
img:focus,
div:focus,
button:focus {
    outline: none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #383838;
    opacity: 1; /* Firefox */
}

textarea, select, option {
    font-family: 'dm';
}
@font-face {
    font-family: 'big';
    src: url('/static/fonts/big-en.ttf');
}
@font-face {
    font-family: 'dm';
    src: url('/static/fonts/dm-en.ttf');
}
.title, .name-titles, .register-title, h1, h2, h3, h4, h5, h6 {
    font-family: 'dm' !important
} 
body, input {
    margin: 0;
    font-family: 'dm', sans-serif !important;
}
.Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.section.header{
  padding-left: 0px;
  padding-right: 0px;
}
.section-contain.header{
  max-width: initial;
}
.section.register-home{
    background: white;
    padding-top: 60px;
    padding-bottom: 120px;
}
.btn-roche.register{
    background-color: #FFA586; 
    color: #383838;
}
.Site-content {
    flex: 1;
}

body {
    margin: 0px;
    color: #505050;
}
.section {
    background: #fafafa;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 60px;
    padding-right: 60px;
}
.section-contain {
    margin: auto;
}
.section-block {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}
.col-questionw.webinar {
    text-align: center;
    margin-bottom: 30px;
    vertical-align: top;
}
.obj-text {
    width: 60%;
    padding-right: 5%;
}
.obj-div-img {
    width: 40%;
    padding-top: 20px;

}
.obj-img {
    max-width: 100%;
    /* border: 1px solid #797979; */
}
.accreditation {
    width: 60%;
}
.accreditation-div-img {
    width: 40%;
    padding-top: 50px;
}
.accreditation-text {
    font-size: 14px;
}
.accreditation-img {
    text-align: center;
    max-width: 650px;
    padding-top: 0px;
    padding-bottom: 10px;
}
.title-line {
    border-bottom: solid 1px #cccccc;
    width: 100%;
}
.met-div-img {
    text-align: center;
}
.obj-text li {
    list-style-type:none;
}
.obj-text ul {
    margin: 0px;
    padding-right: 10%;
}
#title-home {
    padding: 11px 10px;
    margin-top: 17px;
    margin-bottom: 5px;
    color: white;
}

/* .btn:hover {
    background-color: #D8D8D8;
} */
.program-text {
    width: 80%;
    margin: auto;
}
.program-text ul {
    margin-bottom: 40px;
    padding-top: 0px;
    margin-top: 0px;

}
.program-text ul li {
    margin-left: 32px;
    font-size: 14px;
    list-style-type:none;

}
.program-text ul li::before {
    right: -9px !important;
    top: 3px !important;
    position: relative;
    font-size: 22px !important;

}
a {
    text-decoration: none;
    /* color:black; */
}
.col-questionw {
    width: 49%;
    display: inline-block;
}
.col-question {
    width: 49%;
    display: inline-block;
    padding-right: 10px;
}
.roch.texttarea {
    padding-top: 16px;
}
.btn {
    background-color:  #0071B8;
    border: none;
    color: white;
    margin-top: 20px;
    margin-bottom: 50px;
    cursor: pointer;
    padding: 13px 22px;
    font-weight: bold;
    font-size: 15px;
}
.btn-roche {
    background-color: #0071B8;
    border: none;
    color: white;
    margin-top: 20px;
    margin-bottom: 50px;
    cursor: pointer;
    padding: 13px 22px;
    font-weight: bold;
    transition: 0.5s all;
    font-size: 18px;
    width: 130px;
}

.footer-logo{
    display: flex;
    align-items: center;
}
.row {
    padding-top: 20px;
    margin-bottom: 25px;
}
.roch {
    /* border-radius: 13px; */
    height: 55px;
    border: 1.5px solid #80808040;         
    width: 100%;
    margin-bottom: 13px ;
    padding-left: 20px;
    font-size: 16px;
    background-color: #fafafa;
    color: #383838;
}
.header.banner{
    background-color: #383838;
    color:#fdc4ae;
    padding-top: 30px;
    padding-bottom: 60px;
}
.hdr-txt-3{
    font-family: 'big';
    font-size: 22px;
    font-weight: 700;
}
.hdr-txt-2{
    font-family: 'big';
    font-size: 70px;
    font-weight: 700;
}
.hdr-txt-1{
  font-size: 22px;

} 
/* .roch:active {
    background: red;
} */


*, ::after, ::before {
    box-sizing: border-box;
}

.img-banner {
    max-width: 100%;
    display: block;
    margin: auto;
    /* max-height: 300px; */
}
/* .text-banner {
    width: 80%;
    margin:auto
} */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(/static/img/test.gif) center no-repeat #fff;
}
.containers {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

  /* Hide the browser's default checkbox */
.containers input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

  /* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
      width: 26px;
      background-color: white;
      border: 1px solid #717171;
}
.checkmark.check {
    background-color: red !important;
}
  /* On mouse-over, add a grey background color */
.containers:hover input ~ .checkmark {
    background-color: white;
}

  /* When the checkbox is checked, add a blue background */
.containers input:checked ~ .checkmark {
    background-color: white;
}

  /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

  /* Show the checkmark when checked */
.containers input:checked ~ .checkmark:after {
    display: block;
}

  /* Style the checkmark/indicator */
.containers .checkmark:after {
    left: 10px;
    top: 6px;
    width: 5px;
    height: 10px;
    border: solid #383838;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.name-titles {
    float: right;
    display: block;
    text-align: center;
    /* margin: 30px 10px; */
    padding: 30px 10px;
    text-decoration: none;
    font-size: 13.5px;
    color: #505050;
    font-weight: bold;
    transition: 0.5s all;

  }


.name-titles.active {
    background-color: #04AA6D;
    color: white;
}

.topnav {
    overflow: hidden;
}

.topnav .icon {
    display: none;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.social-media img {
    max-height: 60px;
    max-width: 60px;
}
.footer * {
    color: white !important;
}
.div-logo {
    height:65px;
    display: inline-block;
    margin-top: 6px;
  }
.logo {
    max-height: 53px;
    max-width: 210px;
    vertical-align: middle;
}
.step {
    width: 30%;
    font-size: 22px;
  }
.step *  {
    color:white !important;
    margin: 0px;

}


.section-step {
    height: 70px;
    display: flex;
    justify-content: center;
}
.section-button {
    height: 100px;
    display: flex;
    justify-content: center;
}
.div-button {
    height: 100px;
    line-height: 100px;
}
.img-button{
    max-height: 85px;
    vertical-align: middle;
}
.text-inscription{
    font-size: 45px;
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 5px;
}

.section-objectives {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
    max-width: 1300px;
    margin: auto;
    width: 90%;
}

.img-teachers {
    height: 180px;
    max-width: 180px;
}


.radio3 {
    margin: 5px 0;
    display: block;
    cursor: pointer;
    margin-left: 3%;
    margin-top: 3px;
    display: inline-block;
  }
  .radio3 input {
    display: none;
  }
  .radio3 input + span {
    line-height: 20px;
    height: 42px;
    padding-left: 22px;
    display: block;
    position: relative;
  }
  .radio3 input + span:not(:empty) {
    color: #828282;
    height: 30px;
    font-size: 19px !important;
    padding-left: 25px;
    font-family: sans-serif !important;
  }
  .radio3 input + span:before, .radio3 input + span:after {
    content: "";
    width: 21px;
    height: 21px;
    display: block;
    border-radius: 50%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
  }
  .radio3 input + span:before {
    background:  #535353;

  }
  .radio3 input + span:after {
    background: white;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);

  }
  .radio3 input + span.test:after {
    background: rgb(230, 229, 229, 1);
    -webkit-transform: scale(0.95);
            transform: scale(0.95);

  }
  .radio3 input:checked + span:before {
    transform: scale(1);
    background:  #535353;
  }
  .radio3 input:checked + span:after {
    transform: scale(0);
  }

.title {
    margin-right: 15px;
    font-size: 23px;
    top: 8px;
    position: relative;
    font-weight: bold;
    white-space: nowrap;
  }

.footer-text {
    margin-top: auto;
    margin-bottom: auto;
}

.register-title {
    font-size: 22px;
    font-weight: bold;
}

.form-roche {
    padding-left: 200px;
    padding-right: 200px;
}
.section-contain {
    max-width: 1500px;
}
/* @media screen and (max-width: 1900px) {
    .section-contain {
        max-width: 1500px;
    }

} */
.section-footer {
    margin-bottom: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.register-text {
    width: 100%;
    height: 40px;
    padding-left: 15px;
}



.container-teachers {
    padding-left: 50px;
}
.div-img-teachers {
    margin-bottom: 15px;
}

.block-objectives {
    margin-bottom: 15px;
}

.methodology-img {
    height: 100px;
    margin: auto;
    max-width: 150px;
}
.webinar-form {
    width: 65%;
    margin:auto
}
.title-question {
    margin: auto;
    color: #DA1C40;
}
.text-question{
    margin-top: 5px;
    margin-bottom: 15px;
    color:#9A8B86;
    font-size: 13px
}

.webinar_img {
    max-height: 150px;
    max-width: 100%;
}
.div_webinar_img {
    text-align: center;
}
.div-vimeo {
    padding:56.25% 0 0 0;
    position:relative;
    max-width: 1500px;
    margin: auto;
}
.error-email_confirm {
    text-align: center;
    color: #ff0000;
}
.text-banner * img {
    max-width: 100%;
}
.logos-text{
    display: flex;
    align-items:center;
    font-size: 14px;
}
.pro {
    font-size: 14px;
}
.footer-img {
    max-height: 150px;
    vertical-align: middle;
}
.footer-text.legal {
    font-size: 14px;
}
#error-form {
  color: red;
}
#id_code {
  margin-right: 0px;
  border-right: none;
  max-width: 65px;
  width: 30%;
  padding-left: 15px;
}

.container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    max-width: 1300px;
    margin: auto;
}
.header-img{
  margin-bottom: 15px;
}
.roch.country{
  margin-right: 5px;
}
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.text-vimeo {
    width: 70%;
    padding-left: 36px;
}
.div-vimeo-text {
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: auto;
    width: 60%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.div-vimeo-text.full {
    width: 100%;
}
.text-webinar-video * {
    max-width: 100%;
    max-height: 100%;
}
@media screen and (max-width: 1700px) {
    .section-contain {
        max-width: 1400px;
    }
}
@media screen and (max-width: 1500px) {
    .section-contain {
        max-width: 1200px;
    }
    .form-roche {
        padding-left: 120px;
        padding-right: 100px;
    }
    .name-titles {
        font-size: 12px;
    }
    .step {
        font-size: 18px;
    }
    .text-inscription {
        font-size: 40px;
    }

    .logo {
        max-width: 180px;
    }
}



@media screen and (max-width: 1140px) {

    .logo {
      max-width: 155px;
    }
    .name-titles {
      font-size: 11px;
    }
    .container-courses .slick-prev {
        left: -25px !important;

    }
    .container-courses .slick-next {
        right: -25px !important;

    }
    .section {
        padding-left: 30px;
        padding-right: 30px;
    }
}


@media screen and (max-width: 1020px) {
    .container-teachers {
        padding-left: initial;
    }
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
      right: 25px;
      top: 25px;
      position: relative;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 25px;
      top: 25px;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    a:-webkit-any-link:active {
        -webkit-tap-highlight-color: transparent;
    }

    .name-titles {
        padding: 5px 13px;
    }
    .name-titles:hover {
        background-color: white;
    }

    #home-section {
        padding: 0px;
    }
    .program-text {
        width: 100%;
        margin: 0px;
    }
    .div-logo {
        height: 55px;
    }
    .form-roche {
        padding-left: 0px;
        padding-right: 0px;
    }
    .obj-div-img.accreditation-img {
        width: 55%;
    }
    .text-banner * {
        font-size: 22px;
    }
    .social-media {
        display: none;
    }
}


@media only screen and  (max-width: 768px) {
    .div-vimeo-text {
        width: 100%;
    }
    .div-vimeo-text {
        display: block;
    }
    .text-vimeo {
        width: 100%;
        padding-left: 0px;
        font-size: 12px;
    }
    .step {
        font-size: 15px;
    }

    .img-button{
        max-height: 70px;
    }
    .text-inscription{
        font-size: 29px;
    }
    .program-text ul li {
      margin-left: 0px;
    }
    .program-text ul{
        margin-left: 0px !important;
    }


    .name-titles {
        font-size: 11px;
      }
    .form-roche {
        padding-left: 0px;
        padding-right: 0px;
    }
    .footer-text {
        font-size: 14px;
    }
    .text-banner * {
        font-size: 20px;
    }
    .div-title-roch {
        font-size: 14px;
    }
    .div-text-roch{
        font-size: 13px;
    }
    .footer-text.legal {
        display: none;
    }
}

@media only screen and  (max-width: 425px) {
    .text-banner {
        width: 100%;
    }
    .footer-img {
        max-height: 30px;
    }
    .footer-text.legal {
        font-size: 9px;
    }
    .topnav.responsive a  {
        text-align: center;
    }
    .title {
        font-size: 18px;
    }
    /* .section-block {
        margin-bottom: 40px;
    } */
    .btn-roche{
      height: 45px;
      padding-top: 10px;
      font-size: 20px;
      width: 100%;
    }
    .roch {
        height: 45px !important;
    }
    .section {
        padding: 15px;
    }
    .section.webinar {
        padding: 0px;
    }
    .step {
        font-size: 11px;
    }
    .section-step {
        height: 40px;
    }
    .img-button{
        max-height: 50px;
    }
    .text-inscription{
        font-size: 20px;
    }
    .section-button {
        height: 70px;
    }
    .div-button {
        height: 70px;
        line-height: 70px;
    }
    .section-objectives {
        display: block;
    }
    .obj-text {
        width: 100%;
        margin: auto;
        font-size: 12px;
    }
    .obj-div-img {
        width: 50%;
        margin: auto;
    }
    .obj-text ul {
        padding-right: 0%;
    }
    .obj-text li {
        font-size: 14px;
    }
    .program-text {
        font-size: 15px;
    }
    .program-text ul{
        padding-left: 20px !important;
    }
    .program-text ul li{
        font-size: 12px;
    }

    .container-courses .slick-prev {
        left:5px !important;
        width: 40px !important;
        height: 40px !important;
    }
    .container-courses .slick-next {
        right:5px !important;
        width: 40px !important;
        height: 40px !important;
    }


    .img-teachers {
        margin: auto;
    }
    .teacher-text {
        text-align: center;
    }

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

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

    .teachers-review{
        text-align: center;
        margin: auto;
    }
    .container-teachers .slick-prev {

        width: 30px !important;
        height: 30px !important;
    }
    .container-teachers .slick-next {
        right: 33px !important;
        width: 30px !important;
        height: 30px !important;
    }
    .accreditation-text {
        font-size: 12px;
    }
    .accreditation-img {
        padding-top: 20px;
        padding-bottom:  initial;
    }
    .section-footer {
        display: block;
    }
    .footer-logo {
        text-align: center;
    }
    .footer-text {
        text-align: center;
        font-size: 9px;
        padding-top: 0px;
    }
    .pro {
        font-size: 9px;
    }
    .logos-text {
        font-size: 9px;
    }
    .social-media {
        font-size: 12px;
    }
    .col-question {
        width: 100%;
        display: block;
    }
    .section-footer {
        padding: 5px 0px;
    }
    .text-register {
        font-size: 10px;
    }
    .register-title {
        font-size: 18px;
        text-align: center;
    }
    .row {
        padding-top: 20px;
    }

    .container-courses .slick-next:before {
        font-size: 25px !important;
    }
    .container-courses .slick-prev:before {
        font-size: 25px !important;
    }
    .block-objectives {
        margin-bottom: 5px;
    }
    .block-program{
        margin-bottom: 25px;
    }
    .section-objectives {
        width: 100%;
    }
    .step_by_step {
        padding: 10px 5px !important;
    }
    .div-program-file {
        text-align: center;
    }
    .text-banner * {
        font-size: 18px;
    }
    .webinar-form  {
        width: 95%;
    }
    .div-title-roch {
        font-size: 12px;
    }
    .div-text-roch{
        font-size: 11px;
    }
    .title-question {
        font-size: 13px;
    }
    .text-question{
        font-size: 11px
    }
    .webinar_img {
        max-width: 75%;
    }
    .social-media {
        display: block;
    }
    .footer-text {
        justify-content: center;
    }
    .footer-text.legal {
        display: block;
    }
    .img-hnb {
        width: 90px;
    }
    .img-hnb-logo {
        width: 15px;
    }
}