/* General */
body {
    margin: 0 !important;
    font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, cursive !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

body {
    overflow-y: scroll;
}

.CONTAINER {
    width: 1024px;
    max-width: 100%;
    margin: 0 auto;
    position: static;
}




/* Header */
.logo-foyer-academy {
    width: 158px;
    height: 61px;
    object-fit: contain;
}

header {
    background: url("/lp/foyeracademy/img/bg-foyer-academy.jpg") no-repeat top right;
    background-size: cover;
}

header {
    position: relative;
    text-align: center;
    overflow: hidden;
    padding-bottom: 150px;
}

header::before {
    content: '';
    position: absolute;
    left: -50%;
    top: 88%;
    height: 110%;
    width: 200%;
    border-radius: 100%;
    background: #194c92;
}

header::after {
    content: '';
    position: absolute;
    left: -47%;
    top: 92%;
    height: 100%;
    width: 200%;
    border-radius: 100%;
    background: #f2f8ff;
    transform: rotate(.8deg) translateY(-8px);
}

header .lang a {color: #FFFFFF; margin: 0 5px;}
header .lang a.lang-selected {text-decoration: underline; font-weight: 500; cursor: default;}

.container-header {
    width: 1024px;
    max-width: 100%;
    padding: 24px;
    margin: 0 auto;
}

.navbar {
    margin-top: 16px;
    border: none !important;
}

.Foyer-Academy-vous-a {
    text-align: left;
    color: #FFFFFF;
}




/* Partie 1: Devenir agent */
.Rectangle-partie1 {
    background-color: #F2F8FF;
}

.Devenez-agent-dassu {
    line-height: normal;
    text-align: center;
    color: #004C92;
}

.Faites-vous-accompag {
    font-weight: normal;
    line-height: 1.67;
    text-align: center;
    color: #004C92;
}

.Rectangle {
    border-radius: 4px;
    background-color: #FFFFFF;
}

.icons  {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.Sous_titre {
    font-weight: bold;
    text-align: center;
    color: #004C92;
}

.Explication {
    line-height: 1.25;
    text-align: center;
    color: #4A4A4A;
    margin: 10px;
}

.carousel-indicators li {
    border: 1px solid #CCCCCC !important;
}
.carousel-indicators .active {
    background-color: #CCCCCC !important;
}
.carousel-inner>.item {
    height: 310px !important;
}

.footer-general {
    border-bottom: solid 1px rgba(255,255,255,0.1);
}


/* Formulaire */
.box__dragndrop,
.box__uploading,
.hide {
    display: none;
}

.material-icons {
    font-size: 36px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    direction: ltr;
    color: #4EABFF;
    padding-top: 5px;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.dropfile{
    width: 320px;
    height: 90px;
    border: 2px dashed #4EABFF;
    line-height: 22px;
    text-align: center;
    padding: 0 5px;
    cursor: pointer;
}

label.nom_pdf {cursor: pointer;}

label.nom_pdf {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.is-dragover {
    border: 2px dashed #4EABFF;
}

.SECTION.tarificateur .card-simulateur .header p.title {
    font-size: 21px;
    width: 100%;
    text-align: center;
    margin: 0 !important;
}

.btn-inscrip {
    background-image: linear-gradient(to right, #F87F7F, #FF5A5F);
    background-size: 100%;
    font-size: 80%;
    transition: top .3s;
    display: inline;
    margin-bottom: 25px;
    margin-top: 25px;
}

a.btn-inscrip:hover, a.btn-inscrip:focus {
    color: #FFFFFF;
    text-decoration: none;
}

.Inscription-simple {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    color: #004C92;
    padding-top: 25px;
    padding-bottom: 25px;
}

#card-inscription {
    position: absolute;
    top: 155px;
    left: 56%;
    padding-left: 30px;
    padding-right: 30px;
}

.card-inscrip {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background: #FFFFFF;
    color: #265680;
    position: absolute;
}

.formulaire {
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}

.FormGroup-field {
    padding-bottom: 10px;
    display:flex;
}

.padding-btn {
    padding-bottom: 20px;
    padding-top: 25px;
}

.nom_pdf {
    color: #999999;
}

.minuscule {
    text-transform: none;
    font-size: 13px;
}

#msgErr
{
    color: #ffffff;
    position: absolute;
    right: 0;
    z-index: 2;
    left: 0;
}

button.u-cleanup {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 1rem;
    background: 0 0;
}



/* Flip formulaire */
@media only screen and (min-width: 0) and (max-width: 499px) {
    .flip-container, .front, .back {width: 100%; height: 550px;}
    .merci{margin-top: 55px;}
    .merci_logo{margin-top: 50px;}
}
@media only screen and (min-width: 500px) and (max-width: 715px) {
    .flip-container, .front, .back {width: 100%; height: 550px;}
    .merci{margin-top: 60px;}
    .merci_logo{margin-top: 55px;}
}
@media only screen and (min-width: 716px) and (max-width: 992px) {
    .flip-container, .front, .back {width: 100%; height: 550px;}
    .merci{margin-top: 55px;}
    .merci_logo{margin-top: 50px;}
}
@media screen and (min-width: 993px) {
    .flip-container, .front, .back {width: 340px; height: 550px;}
    .merci {margin-top: 55px;}
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

.merci {
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    color: rgb(0, 182, 152);
}

.merci_desc {
    font-size: 20px;
    line-height: 1.25;
    text-align: center;
    color: rgb(74, 74, 74);
}

.merci, .merci_desc, .merci_logo {
    text-align: center;
}

.size_logo {
    width: 180px;
}

.disNone {
    display: none !important;
}

.errorField {
    border-color: #ff5a5f;
}


#content-form {
    position: relative;
}

#loading
{
    display: none;
    text-align: center;
}



/* Vague */
@media only screen and (min-width: 716px) and (max-width: 1019px) {
    #wave:before {width: 56%; height: 215%; border-radius: 100% 100%; top: 31%; right: -15px;}
    #wave:after{width: 58%; height: 215%; border-radius: 100% 100%; top: -65%; left: -6%;}
}
@media only screen and (min-width: 1020px) {
    /*#wave:before {width: 55%; height: 221%; border-radius: 100% 100%; top: 33%; right: -31px;}*/
    #wave:after{width: 56%; height: 226%; border-radius: 100% 100%; top: -58%; left: -5%;}
}

@media only screen and (min-width: 1701px) {
    #wave:before {width: 55%; height: 221%; border-radius: 100% 100%; top: 33%; right: -30px;}
}
@media only screen and (min-width: 1465px) and (max-width: 1700px) {
    #wave:before {width: 55%; height: 221%; border-radius: 100% 100%; top: 33%; right: -27px;}
}
@media only screen and (min-width: 1300px) and (max-width: 1464px) {
    #wave:before {width: 55%; height: 221%; border-radius: 100% 100%; top: 33%; right: -24px;}
}
@media only screen and (min-width: 1070px) and (max-width: 1299px) {
    #wave:before {width: 55%; height: 221%; border-radius: 100% 100%; top: 33%; right: -20px;}
}
@media only screen and (min-width: 1020px) and (max-width: 1069px) {
    #wave:before {width: 55%; height: 221%; border-radius: 100% 100%; top: 33%; right: -17px;}
}

#wave {
    position: relative;
    height: 70px;
    width: 600px;
    background: #F2F8FF;
}

#wave:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #FFFFFF;
}

#wave:after {
    content: "";
    display: block;
    position: absolute;
    background-color: #F2F8FF;
}




/* Partie 2: Formation complete */
.Foyer_Academy {
    padding-top: 120px;
    color: #004C92;
}

.une-formation-compl {
    color: #004C92;
}

.Texte-1 {
    font-weight: normal;
    text-align: left;
    /*margin: 10px;*/
    color: #3B4856;
    padding-left: 23px;
    position: absolute;
}

ol {
    counter-reset: formation;
}

li {
    list-style-type: none;
    counter-increment: formation;
    margin-bottom: 31px;
}

.Oval-7 li::before {
    content: counter(formation);
    border-radius:  65% 35% 42% 58% / 64% 53% 47% 36%;
    background-image: linear-gradient(225deg, #FF5A5F, #F97F7F);
    font-weight: bold;
    color: white;
    margin-left: -15px;
}




/* vidéo */
.video-preview {
    position: absolute;
    width: 500px;
    right: 50px;
    margin-top: 200px;
}

.video-preview-mobile {
    width: 500px;
    right: 50px;
    margin-top: 25px;
}

taille_video {
    position: absolute;
    max-width: 100%;
    height: 310px;
    width: 551px;
}

.size-video object {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
}

@media only screen and (min-width: 0) and (max-width: 350px) {
    #video-mobile .size-video {width: 315px !important; height: 218px !important; position: relative !important; margin: 0 auto;}
    #video-mobile .size-video iframe {/*margin-left: -49% !important;*/ padding-bottom: 40px !important;}

    .video-preview-mobile {width: 310px; margin-bottom: 10px;}
}
@media only screen and (min-width: 351px) and (max-width: 499px) {
    #video-mobile .size-video {width: 315px !important; height: 218px !important; position: relative !important; margin: 0 auto;}
    #video-mobile .size-video iframe {/*margin-left: -45% !important;*/ padding-bottom: 40px !important;}

    .video-preview-mobile {width: 310px; margin-bottom: 10px;}
}
@media screen and (min-width: 500px) and (max-width: 715px){
    #video-mobile .size-video {width: 370px !important; height: 250px !important; position: relative !important; margin: 0 auto;}
    #video-mobile .size-video iframe {/*margin-left: -35% !important;*/ padding-bottom: 40px !important;}

    .video-preview-mobile {width: 400px; margin-bottom: 10px;}
}
@media screen and (min-width: 716px) and (max-width: 983px){
    #video-mobile .size-video {width: 370px !important; height: 210px !important; position: relative !important; margin: 0 auto;}
    #video-mobile .size-video iframe {/*margin-left: -35% !important;*/}
}


@media screen and (min-width: 984px) and (max-width: 1199px){
    #video-desk .size-video {width: 430px !important; height: 242px !important; position: absolute !important;}
    #video-desk .size-video iframe {margin-top: 65% !important; margin-left: -120% !important;}

    #video-mobile, #btn-contact-mobile{display: none;}
    #video-desk {padding-top: 40px;}
}
@media screen and (min-width: 1200px) and (max-width: 1500px){
    #video-desk .size-video {width: 551px !important; height: 310px !important; position: absolute !important;}
    #video-desk .size-video iframe {margin-top: 45% !important; margin-left: -29% !important;}

    #video-mobile, #btn-contact-mobile{display: none;}
    #video-desk {padding-top: 40px;}
}
@media screen and (min-width: 1501px){
    /*.size-video {position: absolute; margin-top: 200px; margin-right: 20%; width: 550px; height: 310px;}*/
    #video-mobile, #btn-contact-mobile{display: none;}
    #video-desk {padding-top: 40px;}

    #video-desk .size-video {width: 551px !important; height: 310px !important; position: absolute !important;}
    #video-desk .size-video iframe {margin-top: 50% !important;}
}

@media screen and (max-width: 983px) {
    #video-desk, #btn-contact-desk{display: none;}
    /*.size-video {width: 500px; height: 300px;}*/
    #modal-video {display: none;}
}




/* Partie 3: Contact */
.contact-foyeracademy {
    background: linear-gradient(rgba(58, 175, 230, 0.3), rgba(57, 115, 230, 0.7)), url("/lp/foyeracademy/img/services-banner.jpg") no-repeat top;
    background-size: cover;
}

.Vous-avez-un-esprit {
    font-weight: normal;
    line-height: 1.33;
    text-align: center;
    color: #FFFFFF;
}

.Cette-formation-et-c {
    font-weight: normal;
    text-align: center;
    color: #FFFFFF;
}

.quote {
    width: 72px;
    height: 63px;
    object-fit: contain;
}

#contact .title {
    color: #4A4A4A;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    margin-top: 20px;
}



/* Footer */
.bg-blue-foyer {
    background-image: linear-gradient(to right, #004C92, #086DCA);
}

.center-block {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.logo-foyer-vertical {
    width:70px;
}

.color-light-blue {
    color: rgba(255, 255, 255, 0.6);
}

.u-is-txt-bold {
    font-weight: bold;
}

.margin-bottom-16 {
    margin-bottom: 16px;
}

.footer-legal a:focus {
    color: rgba(255, 255, 255, 0.6);
}

header .slogan p {
    text-align: center;
    margin-bottom: 35px;
}
#btn-contact1 {
    letter-spacing: 0.1em;
}

.fixedBtn {
    position: fixed;
    min-height: 40px;
    top: 10px;
    left: 50%;
    z-index: 100;
    padding-top: 14px;
    transform: translateX(-50%) !important;
    width: 180px;
}

body.de .fixedBtn {
    width: 170px;
}

/* Differences desc et mobile */
@media screen and (max-width: 992px) {
    #card-inscription {position: relative; margin-left: -35%; margin-top: -270px;}
    .dropfile{width: 100%;}
    .marge {padding-top: 100px;}
}
@media screen and (min-width: 984px) {
    ol {padding-bottom: 45px;}
    .size-desc {height: 755px;}
    /*.size-video{position: absolute; margin-top: 200px; margin-right: 10%; width: 550px; height: 310px;}*/
}

@media only screen and (min-width: 0) and (max-width: 499px) {
    .contact-foyeracademy {height: 450px;}
    header {height: 450px;}

    header .slogan p {font-size: 28px; margin-top: 30px;}
    .header h2 {font-size: 25px; margin-left: 5px; margin-right: 5px;}
    .Foyer_Academy {font-size: 28px; margin-left: 15px; text-align: center; padding-top: 65px;}
    .une-formation-compl {font-size: 28px; margin-left: 15px; text-align: center;}
    .Texte-1 {font-size: 18px; margin: -20px 0;}
    .Vous-avez-un-esprit {padding-top: 15px;}
    .Cette-formation-et-c {font-size: 19px; margin-left: 5px; margin-right: 5px; padding: 5px;}
    .Faites-vous-accompag {padding-bottom: 40px; padding-top: 15px; font-size: 18px;}
    .Sous_titre{font-size: 22px;}
    .Explication{font-size: 16px;}

    .quote {width: 50px; height: 40px;}
    .btn_contact {padding-bottom: 20px;}
    li::before {font-size: 12px; padding: 6px 12px 8px;}
    #card-inscription {position: relative; margin-left: -52%; margin-top: -270px; margin-bottom: 80px;}
    .dropfile{height: 90px;}
    /*.size-video {width: 310px; height: 210px;}*/

    .carousel-inner>.item {height: 350px !important;}
    ol {margin-bottom: -45px;}
}
@media only screen and (min-width: 500px) and (max-width: 715px) {
    .contact-foyeracademy {height: 590px;}
    header {height: 590px;}

    header .slogan p {font-size: 35px; margin-top: 80px;}
    .header h2 {font-size: 35px;}
    .Foyer_Academy {font-size: 35px; margin-left: 18px}
    .une-formation-compl {font-size: 35px; margin-left: 18px}
    .Texte-1 {font-size: 21px; margin: -24px 13px;}
    .Vous-avez-un-esprit {padding-top: 80px;}
    .Cette-formation-et-c {font-size: 22px; margin-left: 5px; padding: 50px;}   /**/
    .Faites-vous-accompag {padding-bottom: 40px; padding-top: 15px; font-size: 19px;}
    .Sous_titre{font-size: 22px;}
    .Explication{font-size: 16px;}

    .quote {width: 60px; height: 50px;}
    .btn_contact {padding-bottom: 50px;}
    li::before {font-size: 18px; padding: 6px 15px 10px;}
    #card-inscription {position: relative; margin-left: -52%; margin-top: -270px; margin-bottom: 80px;}
    /*.size-video {width: 310px; height: 210px;}*/

    .carousel-inner>.item {height: 310px !important;}
}

@media only screen and (min-width: 716px) {
    .footer-general {height: 120px !important;}
    .footer-legal {height: 80px;}
    .SECTION .footer-general .social-network, .SECTION .footer-general .box-apps {height: 86px;}

    .contact-foyeracademy {height: 690px;}
    header {height: 690px;}

    header .slogan p {font-size: 46px; margin-top: 130px;}
    .header h2 {font-size: 46px; padding-top: 78px;}
    .Foyer_Academy {font-size: 46px; margin-left: 18px;}
    .une-formation-compl {font-size: 46px; margin-left: 18px;}
    .Texte-1 {font-size: 24px; margin: -29px 13px;}
    .Vous-avez-un-esprit {padding-top: 100px;}
    .Cette-formation-et-c {font-size: 28px; padding-top: 115px; padding-bottom: 60px;}
    .Faites-vous-accompag {padding-bottom: 40px; padding-top: 15px; font-size: 23px;}
    .Sous_titre{font-size: 22px;}
    .Explication{font-size: 16px;}

    .quote {width: 70px; height: 60px;}
    .btn_contact {padding-bottom: 20px;}
    li::before {font-size: 20px; padding: 6px 15px 7px;}
    .header-fin {padding-top: 35px;}
    .padding-b-50{padding-bottom: 50px;}

    .carousel-inner>.item {height: 310px !important;}
}

@media screen and (max-width: 716px) {
    .desktop-foyer-academy {display: none;}
    .Rectangle {margin: 25px; padding-top: 8px;}
}
@media screen and (min-width: 717px) {
    #carousel-foyeracademy {display: none;}
    .Rectangle {margin: 10px; padding-top: 20px;}
}

@media screen and (max-width: 957px) {
    .Rectangle {height: 375px;}
}
@media screen and (min-width: 958px) {
    .Rectangle {height: 317px;}
}

@media screen and (max-width: 715px) {
    .SECTION .footer-general .logo-foyer-vertical {margin: 25px 0;}
    .SECTION .footer-general .GridFlex-row>div:nth-child(3) {margin-top: 40px;}
    .SECTION .footer-general .social-network {margin-bottom: 40px;}

    .SECTION .footer-legal div div div:first-child {font-size: 16px !important; margin: 10px 0 !important;}
    .SECTION .footer-legal div div div:nth-child(2) {font-size: 10px !important; margin-bottom: 20px;}
}