/* Minification failed. Returning unminified contents.
(123,29): run-time error CSS1046: Expect comma, found '0'
(123,33): run-time error CSS1046: Expect comma, found '/'
(3141,1): run-time error CSS1019: Unexpected token, found '}'
(5911,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(5912,8): run-time error CSS1035: Expected colon, found '{'
(5929,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5930,8): run-time error CSS1035: Expected colon, found '{'
(5957,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(5958,8): run-time error CSS1035: Expected colon, found '{'
(5975,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5976,8): run-time error CSS1035: Expected colon, found '{'
(6003,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(6004,8): run-time error CSS1035: Expected colon, found '{'
(6021,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6022,8): run-time error CSS1035: Expected colon, found '{'
(6140,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6141,8): run-time error CSS1035: Expected colon, found '{'
(6145,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(6146,8): run-time error CSS1035: Expected colon, found '{'
(6447,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6448,8): run-time error CSS1035: Expected colon, found '{'
(6452,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(6453,8): run-time error CSS1035: Expected colon, found '{'
(6457,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6458,8): run-time error CSS1035: Expected colon, found '{'
(6462,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(6463,8): run-time error CSS1035: Expected colon, found '{'
 */
/*======================================================================= 
===                    le header                      ===
========================================================================*/

header {
    background: url(/Content/images/design/bg/bg-header-ionis-stm-ecole-gestion-technique-management.jpg) no-repeat center bottom;
    height: 880px;
    /*880px; 768px*/
}

header.homeBio {
    background: url(/Content/images/design/bg/bg-header-ionisstm-ecole-biologie-management.jpg) no-repeat center center;
    height: 775px;
}

header.homeEnergie {
    background: url(/Content/images/design/bg/bg-header-ionisstm-ecole-energie-management.jpg) no-repeat center center;
    height: 775px;
}

header.homeInformatique {
    background: url(/Content/images/design/bg/bg-header-ionis-stm-ecole-informatique-management.jpg) no-repeat center center;
    height: 775px;
}

header.MbaDigi {
    background: url(/Content/images/design/bg/bg-header-ionis-stm-ecole-management-digital.jpg) no-repeat center center;
    height: 775px;
}

h1 {
    text-transform: uppercase;
}

.home-banner {
    margin-top: 50px;
}

/*===========    les chiffres   =====================*/

.chiffresHeader {
    width: 724px;
    margin: 50px auto 10px;
    padding-top: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.chiffresHeader h2 {
    padding: 0 30px 0 0;
    text-align: right;
}

@media (min-width: 990px) {
    .chiffresHeader h2 {
        border-right: 1px solid #fff;
    }
}

.chiffresHeader .mbaHeader {
    margin-top: 0;
    /*background: url(/Content/images/design/bg/bg-mba-header.png) no-repeat center center;*/
    height: 121px;
    display: block;
    /* float: left; */
    /* width: 46%; */
    padding: 0 0 0 30px;
}

.chiffresHeader .mbaHeader p {
    padding: 0;
    text-align: left;
    margin: 5px 0 0;
}

.chiffresHeader .mbaHeader p a {
    color: #fff;
}

.chiffresHeader .mbaHeader p a:hover {
    color: #fff;
    text-decoration: underline;
}

.chiffresHeader .h-secteurs {
    margin: 20px 0 0;
    padding: 0;
}

.chiffresHeader .formationHeader {
    margin-top: 0;
    /*background: url(/Content/images/design/bg/bg-mba-header.png) no-repeat center center;*/
    height: 121px;
    display: block;
    float: right;
    width: 46%;
    padding: 0 0 0 30px;
}

.chiffresHeader .formationHeader p {
    padding: 0;
    text-align: left;
    margin: 5px 0 0;
}

.chiffresHeader .formationHeader p a {
    color: #fff;
}

.chiffresHeader .formationHeader p a:hover {
    color: #fff;
    text-decoration: underline;
}

.chiffresHeader .h-secteurs {
    margin: 20px 0 0;
    padding: 0;
}

.chiffresHeader .mbaHeader .formationCard {
    margin-top: 50px;
    background-color: rgb(0 0 0 / 5%);
    backdrop-filter: blur(10px);
    padding: 10px;
}

@media (max-width: 480px) {
    .chiffresHeader .mbaHeader .formationCard {
        margin-top: 10px;
    }

    .chiffresHeader .mbaHeader+.mbaHeader {
        margin-top: 10px;
    }
}

.chiffresHeader .mbaHeader .formationCard .TexteNiveau {
    margin-top: 0px;
}

.chiffresHeader .mbaHeader .TexteNiveau {
    font-size: 24px;
    font-weight: 300;
    margin-top: 50px;
}

.chiffresHeader .mbaHeader p.TexteNiveau {
    padding: 0;
    text-align: left;
    width: 100%;
}

@media (max-width: 640px) {
    .chiffresHeader .mbaHeader p.TexteNiveau {
        text-align: center;
    }
}

.chiffresHeader .showOnMobile {
    display: none;
}

.container-h2 {
    margin: 55px auto;
    width: 458px;
}

@media screen and (max-width: 640px) {
    .container-h2 {
        margin: 0 auto;
        width: 100%;
        text-align: center;
        margin-top: 40px;
    }
}

h2.middle-title {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: #fff;
    font-weight: 300;
}


/*=================      les profils du header  ===========================*/

.profilHeader {
    width: 1044px;
    margin: 324px auto 10px;
}

.profilHeader .pHeader {
    margin: 12px auto 0;
    padding: 8px 10px 28px;
    color: #222423;
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    text-align: center;
    width: 78%;
}

.profilHeader .profils {
    height: 115px;
    margin: -18px 0px 10px;
}

.profils .profilGestion,
.profils .profilTic,
.profils .profilPro {
    width: 32.5%;
    float: left;
    text-align: center;
    -moz-box-shadow: 0px 0px 4px 1px #666;
    -webkit-box-shadow: 0px 0px 4px 1px #666;
    -o-box-shadow: 0px 0px 4px 1px #666;
    box-shadow: 0px 0px 4px 1px #666;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#666, Direction=NaN, Strength=4);
}

.profils .profilGestion,
.profils .profilTic {
    margin-right: 8px;
}

.profils .profilGestion a,
.profils .profilTic a,
.profils .profilPro a {
    color: #fff;
    width: 100%;
}

/*.profils .profilGestion a:hover, .profils .profilTic a:hover {
    color:#363938;
}*/
/*.profils .profilGestion {
    background-color: #ea5904;    
}
.profils .profilTic {
    background-color: #19d2e5;
}*/
.profils .profilGestion a {
    background-color: #0058a6;
}

.profils .profilGestion a:hover {
    background-color: #2a7dc7;
}

.profils .profilTic a {
    background-color: #009ee3;
}

.profils .profilTic a:hover {
    background-color: #0db4fd;
}

.profils .profilPro a {
    background-color: #4cb278;
}

.profils .profilPro a:hover {
    background-color: #5cd490;
}

.profils .profilGestion .ptitle,
.profils .profilTic .ptitle,
.profils .profilPro .ptitle {
    margin: 15px 0 5px;
    padding: 0;
    text-transform: none;
}

.profils .profilGestion p:nth-child(2),
.profils .profilTic p:nth-child(2),
.profils .profilPro p:nth-child(2) {
    margin: 5px 0 25px;
    padding: 0;
}

/*==================     Titres home     ==============================*/
.titresHome {
    width: 1024px;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    z-index: 10;
}

.titresHomeBio,
.titresHomeEnergie,
.titresLeftHomeInfo,
.titresRightHomeInfo {
    width: 1024px;
    margin: 10px auto;
    position: relative;
}

.titresHomeInfo {
    width: 1024px;
    /*margin: 0 auto;*/
    position: absolute;
    left: 23%;
    top: 19%;
}

.titresLeftHomeInfo {
    margin: 60px 0 0 0;
    padding-bottom: 20px;
    padding-top: 5px;
    width: 520px;
}

.titresRightHomeInfo {
    padding-bottom: 20px;
    /*background: #fff;*/
    width: 750px;
}

.titresHomeBio h2,
.titresHomeEnergie h2 {
    line-height: 1.1em;
    color: #4d5051;
    padding: 5px 0 10px 142px;
    background: #fff;
    -webkit-border-top-left-radius: 70px;
    -moz-border-top-left-radius: 70px;
    -o-border-top-left-radius: 70px;
    border-top-left-radius: 70px;
    -webkit-border-bottom-left-radius: 70px;
    -moz-border-bottom-left-radius: 70px;
    -o-border-bottom-left-radius: 70px;
    border-bottom-left-radius: 70px;
}

.titresHomeEnergie h2 {
    width: 510px;
}

.titresHomeBio h2 {
    width: 520px;
}

.titresLeftHomeInfo h2 {
    line-height: 1.1em;
    color: #4d5051;
    padding: 8px 0 10px 142px;
    margin: 0px 0 30px;
    background: #fff;
    -webkit-border-top-left-radius: 70px;
    -moz-border-top-left-radius: 70px;
    -o-border-top-left-radius: 70px;
    border-top-left-radius: 70px;
    -webkit-border-bottom-left-radius: 70px;
    -moz-border-bottom-left-radius: 70px;
    -o-border-bottom-left-radius: 70px;
    border-bottom-left-radius: 70px;
}

.titresLeftHomeInfo h2:before {
    background: url("/Content/images/design/icon/icon-info.png") no-repeat scroll 28px 33px #f39700;
    content: "";
    height: 114px;
    left: 18px;
    position: absolute;
    top: 25px;
    width: 114px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.titresRightHomeInfo h2 {
    line-height: 1.1em;
    color: #4d5051;
    padding: 8px 142px 10px 0;
    text-align: right;
    margin-top: 0;
    margin-bottom: 30px;
    background: #fff;
    -webkit-border-top-right-radius: 70px;
    -moz-border-top-right-radius: 70px;
    -o-border-top-right-radius: 70px;
    border-top-right-radius: 70px;
    -webkit-border-bottom-right-radius: 70px;
    -moz-border-bottom-right-radius: 70px;
    -o-border-bottom-right-radius: 70px;
    border-bottom-right-radius: 70px;
}

.titresRightHomeInfo h2:after {
    background: url("/Content/images/design/icon/icon-tic.png") no-repeat scroll 25px 20px #ed4622;
    content: "";
    height: 84px;
    right: 18px;
    position: absolute;
    top: 22px;
    width: 84px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.titresLeftHomeInfo h2 span {
    color: #f39700;
}

.titresRightHomeInfo h2 span {
    color: #ed4622;
}

.titresLeftHomeInfo .more:after {
    background: url("/Content/images/design/morelightbleu.png") no-repeat 0 0px;
    content: "";
    height: 32px;
    right: 10px;
    position: absolute;
    top: 7px;
    width: 32px;
}

.titresLeftHomeInfo .more {
    background: #fff;
    left: 56%;
    text-indent: 0;
    width: 260px;
    color: #222423;
    line-height: 1.2em;
    padding: 9px;
    display: block;
    position: relative;
    border-radius: 0%;
}

.titresLeftHomeInfo .more:hover {
    text-decoration: underline;
}

.titresRightHomeInfo .more:after {
    background: url("/Content/images/design/moredarkbleu.png") no-repeat 0 0px;
    content: "";
    height: 32px;
    right: 10px;
    position: absolute;
    top: 8px;
    width: 32px;
}

.titresRightHomeInfo .more {
    background: #fff;
    left: 53%;
    text-indent: 0;
    width: 260px;
    color: #222423;
    line-height: 1.2em;
    padding: 9px;
    display: block;
    position: relative;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    -o-border-radius: 0%;
    border-radius: 0%;
}

.titresRightHomeInfo .more:hover {
    text-decoration: underline;
}

.MbaDigi .titresLeftHomeInfo {
    width: 500px;
    margin: 40px 0 0 0;
}

.MbaDigi .titresLeftHomeInfo h2 span {
    color: #ed4622;
}

.MbaDigi .titresLeftHomeInfo h2::before {
    background: url("/Content/images/design/icon/icon-tic.png") no-repeat scroll 40px 30px #ed4622;
}

.Cercle {
    /*-webkit-border-radius: 50%;
    border-radius: 50%;*/
    width: 835px;
    height: 290px;
    padding-top: 16px;
    color: #fff;
    /*text-align: center;*/
}

.blocManaDig {
    float: left;
}

.Cercle.MbaDigi {
    background-color: #ed4622;
    width: 330px;
    height: 330px;
    padding-top: 50px;
    /* left: -11px; */
    padding-left: 75px;
    color: #fff;
    /* text-align: center; */
    border-radius: 50px;
    margin: 20px 40px;
    /* position: relative; */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.Cercle.HomeInfo {
    background-color: #f39700;
    width: 330px;
    height: 330px;
    padding-top: 50px;
    padding-left: 75px;
    color: #fff;
    border-radius: 50px;
    margin: 10px 20px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.Cercle.HomeInfo ul {
    margin-left: -20px;
    margin-top: 6px;
    width: 345px;
}

.Cercle ul {
    text-align: left;
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    font-weight: 100;
}

.Cercle li {
    list-style: none;
    background: url(/Content/images/design/white-arrow-li.png) 0 7px no-repeat;
    padding: 0 0 0 12px;
}

.Cercle li a {
    color: #fff;
}

.Cercle h2 {
    margin: 10px;
    color: #fff;
    border-bottom: 1px #fff solid;
    display: inline-block;
    font-weight: 100;
    margin-bottom: 0;
    font-size: 50px;
    margin-left: 20px;
}

.formations.MbaDigi .blocRightHome .more {
    width: 335px;
}

.formations.MbaGestio .more {
    width: 360px;
}

.formations.MbaGestio .blocRightHome .more {
    width: 335px;
}

.formations.MbaGestio .formt {
    margin: 0 auto 80px;
}

.formations.MbaDigi .formt {
    margin: 0 auto 80px;
}

.formations .more.MscBio {
    width: 340px;
}

section.MbaDigi h3 {
    font-size: 2.7em;
    margin-bottom: 0;
    color: #419499;
    line-height: 1.4em;
}

section.MbaDigi p {
    margin-top: -5px;
    font-size: 1.4em;
    font-weight: 300;
    padding-right: 30px;
}

section.MbaDigi p span {
    color: #419499;
    font-weight: 700;
}

section.MbaDigi a.plus {
    bottom: 15px;
    height: 63px;
    line-height: 63px;
    right: 15px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: 1.4em;
    font-weight: 300;
    color: #419499;
}

section.MbaDigi a.plus::after {
    content: ' ';
    display: inline-block;
    height: 40px;
    width: 40px;
    background: url(/Content/images/design/moredarkvert.png) no-repeat center center #fff;
    margin-top: 12px;
    margin-left: 12px;
    float: right;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

section.MbaDigi a.plus:hover::after {
    background: url(/Content/images/design/more.png) no-repeat center center #419499;
}

.profilsMBA .blocLeftHome.MbaDigi {
    width: 100%;
    border: none;
    height: auto;
    margin-bottom: 10px;
}

.profilsMBA .blocLeftHome.MbaDigi h4 {
    margin-bottom: 20px;
}

.profilsMBA .blocLeftHome.MbaDigi p {
    margin-bottom: 40px;
    font-size: 1.4em;
    font-weight: 300;
}

.profilsMBA .blocLeftHome.MbaDigi h4 span {
    color: #222423;
    font-size: 1em;
}

.profilsMBA .blocLeftHome.MbaDigi ul li {
    background: url(/Content/images/design/black-arrow-li.png) no-repeat 0 14px;
    padding-left: 35px;
}

.profilsMBA .blocLeftHome.MbaDigi ul li a {
    text-transform: uppercase;
    font-family: 'Anton', sans-serif;
    color: #ed4622;
    font-size: 1.6em;
}

.profilsMBA .blocLeftHome.MbaDigi ul li a span {
    text-transform: initial;
    color: #000000;
    font-size: 0.8em;
}

.profilsMBA .blocLeftHome.ExecutiveMBAli {
    margin-top: 30px;
}

.profilsMBA .blocLeftHome.ExecutiveMBAli ul li {
    line-height: 20px;
    margin-bottom: 40px;
}

.profilsMBA .blocLeftHome.ExecutiveMBAli ul li a:after {
    font-family: 'FontAwesome';
    content: "\f08e";
    font-size: 0.8em;
}

.profilsMBA .blocLeftHome.MbaDigi.InfoMba ul li a {
    color: #f39700;
}


.col2 {
    width: 50%;
    float: left;
}

/*.titresRightHomeInfo .more {
    background: url("/Content/images/design/morerouge.png") no-repeat right 0px;
    bottom: 20px;
    display: block;
    position: absolute;
    right: 16%;
    text-indent: 0;
    width: 270px;
    color: #222423;
    line-height: 0.85em;
    -webkit-border-radius: 0%;
       -moz-border-radius: 0%;
         -o-border-radius: 0%;
             border-radius:0%;
}*/
.titresHomeBio h2:before {
    background: url("/Content/images/design/icon/icon-mba-header.png") no-repeat scroll 40px 25px #8cccc2;
    content: "";
    height: 114px;
    left: 18px;
    position: absolute;
    top: 15px;
    width: 114px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.titresHomeEnergie h2:before {
    background: url("/Content/images/design/icon/icon-mba-header-energie.png") no-repeat scroll 21px 21px #50a9df;
    content: "";
    height: 114px;
    left: 18px;
    position: absolute;
    top: 15px;
    width: 114px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.titresHomeBio h2 span {
    color: #8cccc2;
}

.titresHomeEnergie h2 span {
    color: #50a9df;
}

.mbaHeaderBio,
.mbaHeaderEnergie {
    width: 296px;
    height: 296px;
    margin: 20px 40px;
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.mbaHeaderBio {
    background-color: #8cccc2;
    width: 330px;
    height: 330px;
}

.mbaHeaderEnergie {
    background-color: #50a9df;
}

.mbaHeaderBio h3 {
    color: #ffffff;
    border-bottom: 1px solid #fff;
    display: block;
    width: 135px;
    margin: 0 0 20px 100px;
    padding: 30px 0 0 0;
    line-height: 1.3em;
}

.mbaHeaderEnergie h3 {
    color: #ffffff;
    border-bottom: 1px solid #fff;
    display: block;
    width: 135px;
    margin: 0 0 10px 80px;
    padding: 20px 0 0 0;
    line-height: 1.3em;
}

.mbaHeaderBio ul {
    padding: 0;
    margin: 0 20px;
    margin-left: 55px;
}

.mbaHeaderEnergie ul {
    padding: 0;
    margin: 0 20px 0 50px;
}

.mbaHeaderBio ul li,
.mbaHeaderEnergie ul li {
    list-style: none;
    background: url(/Content/images/design/white-arrow-li.png) 0 7px no-repeat;
    padding: 0 0 0 12px;
}

.mbaHeaderBio ul li a,
.mbaHeaderEnergie ul li a {
    color: #fff;
}


/*--------------------------------------------------------------------------------
                            section contact JPO 
--------------------------------------------------------------------------------*/

.contactJPO {
    width: 100%;
    /*height: 377px;*/
    border-bottom: 1px solid #222423;
    padding-left: 15%;
}

/*========================    contact    ==========================*/
.contactJPO .contact {
    width: 30%;
    margin: 0;
    /*background-color: #222423;*/
    float: left;
    padding-bottom: 70px;
}

.contact .contactContent {
    width: 512px;
    float: right;
}

.contactContent h3 {
    margin-right: 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 37px;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 56px;
}

.contactContent table {
    margin-right: 20px;
    position: relative;
}

.contactContent table tr td:first-child {
    border-right: 1px solid #fff;
}

.contactContent table tr:nth-child(2) td {
    border-top: 1px solid #fff;
}

.contactContent table td {
    position: relative;
}

.contactContent table td a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

/*.contactContent table .tdDocu span {
    background: url("/Content/images/design/icon/icon-contact.png") no-repeat scroll 0 0;
    height: 48px;
    width: 50px;
    display: block;
}------- boutons documentation  --------------*/
/**/
.contactContent table .tdDocu a::before {
    background: url("/Content/images/design/icon/icon-contact.png") no-repeat scroll 0 0;
    content: "";
    height: 48px;
    left: 0;
    position: absolute;
    top: 10px;
    width: 50px;
}

.contactContent table .tdDocu a {
    width: auto;
    margin: 5px 40px 40px 60px;
    display: block;
    text-align: left;
}

.contactContent table .tdDocu a:hover {
    text-decoration: underline;
}

.tdDocu a strong {
    color: #01a3e0;
}

/*--------  bouton candidature en ligne ---------*/
.contactContent table .tdCand a::before {
    background: url("/Content/images/design/icon/icon-contact.png") no-repeat scroll 0 -50px;
    content: "";
    height: 50px;
    left: 30px;
    position: absolute;
    top: 15px;
    width: 50px;
}

.contactContent table .tdCand a {
    display: block;
    margin: 5px 20px 40px 60px;
    padding-left: 30px;
    text-align: left;
    width: auto;
}

.contactContent table .tdCand a:hover {
    text-decoration: underline;
}

.tdCand a strong {
    color: #f74f7e;
}

/*------- bouton être rappelé par téléphone  --------------*/
.contactContent table .tdTel a::before {
    background: url("/Content/images/design/icon/icon-contact.png") no-repeat scroll 0 -99px;
    content: "";
    height: 58px;
    left: 0;
    position: absolute;
    top: 40px;
    width: 50px;
}

.contactContent table .tdTel a {
    display: block;
    margin: 40px 40px 5px 60px;
    text-align: left;
    width: auto;
}

.contactContent table .tdTel a:hover {
    text-decoration: underline;
}

.tdTel a strong {
    color: #ff8301;
}

/*--------  bouton entretien personnalisé ---------*/
.contactContent table .tdEntret a::before {
    background: url("/Content/images/design/icon/icon-contact.png") no-repeat scroll 0 -158px;
    content: "";
    height: 47px;
    left: 30px;
    position: absolute;
    top: 45px;
    width: 50px;
}

.contactContent table .tdEntret a {
    display: block;
    margin: 40px 20px 5px 60px;
    padding-left: 30px;
    text-align: left;
    width: auto;
}

.contactContent table .tdEntret a:hover {
    text-decoration: underline;
}

.tdEntret a strong {
    color: #a0c549;
}


/*========================   meet us JPO    ======================*/
.meetusJPO {
    background-color: #28292D;
    min-height: 460px;
}

.meetusJPO .meetus {}

.meetusJPO .meetusContent {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1024px;
    position: relative;
}

/* bloc jpo */
.displayJpo {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}


/*========================   demande entretien    ======================*/
.meetus .entretien {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
    min-height: 460px;
    position: absolute;
    max-width: 341px;
    min-height: 511px;
    right: 0;
    top: -25px;
    z-index: 1002;
    padding: 23px;
    box-sizing: border-box;
    width: 33.3%;
}

.meetus .entretien .content {
    border: #4CB278 1px solid;
    padding: 18px;
}

.meetus .entretien h3 {
    color: #0058A6;
    font-size: 37px;
    line-height: 37px;
    margin: 0;
}

.meetus .entretien h4 {
    color: #4CB278;
    font-size: 22px;
    line-height: 22px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.meetus .entretien img {
    margin: 0 auto;
    display: block;
}

.meetus .entretien .cta {
    display: block;
    width: 207px;
    /* height: 47px;*/
    margin: 21px auto;
    background: #4CB278 0% 0% no-repeat padding-box;
    border-radius: 35px;
    opacity: 1;
    padding: 6px;
}

.meetus .entretien .cta span {
    display: block;
    background: #4CB278 0% 0% no-repeat padding-box;
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    opacity: 1;
    text-align: center;
    font: normal normal 300 26px/34px Roboto;
    letter-spacing: 0px;
    color: #FFFFFF;
    width: 196px;
    height: 38px;
}




/*========================   JPO    ======================*/
.contactJPO .jpo {
    width: 50%;
    margin: 0;
    background-color: #28292D;
    float: left;
}

.meetusJPO .jpo {
    margin: 0;
    background-color: #28292D;
    float: left;
    min-height: 460px;
    width: 66.6%;
}

.jpo .jpoContent {
    width: 512px;
    position: relative;
}

.meetusJPO .jpoContent {
    width: 100%;
}

.meetusJPO .jpoContent ul {
    overflow: hidden;
}

.meetusJPO .jpoContent li {
    width: 100%;
    position: relative;
    /*  overflow: hidden;*/
    max-width: 90%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #707070;
}

.meetusJPO .jpoContent li.noevent {
    color: white;
    font-size: 1.3em;
    list-style: none;
    left: -40px;
    border: none;
    top: 20px;
}

.jpoContent .no-date {
    /*
        font-size: 32px;
    font-weight: 400;
    line-height: 38px;
    padding-top: 5px;

    */
    font-size: 31px;
    font-weight: 500;
    line-height: 43px;
    margin-top: 45px;
}

.jpoContent .no-date span {
    font-size: 0.7em;
    font-weight: 300;
    display: block;
}

.jpoContent a {
    text-decoration: none;
}

.jpoContent a.more {
    background: url("/Content/images/design/moremarron.png") no-repeat scroll center center #FFF;
    bottom: 0;
    width: 45px;
    height: 45px;
    right: 0;
    position: absolute;
    color: #ae917b;
    border: 1px solid #ae917b;
    text-indent: -10000px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    font-size: 1.2em;
}

.jpoContent a.more:hover {
    background: url("/Content/images/design/more.png") no-repeat scroll center center #ae917b;
    color: #fff;
}

.meetusJPO .jpoContent a.more {
    position: absolute;
    /* transform: translateY(-50%);*/
    /*  top: 50%;*/
    right: 20px;
    background: url("/Content/images/design/more.png") no-repeat scroll center center #00aeef;
    color: #00aeef;
    border: 1px solid #00aeef;
    border-radius: 50%;
    bottom: 20px;
    text-indent: -10000px;
}

.meetusJPO .jpoContent a.more:before {
    content: "S'inscrire";
    text-indent: 0;
    position: absolute;
    left: -88px;
    top: 9px;
    font: normal normal normal 18px/22px Anton;
    letter-spacing: 0px;
    color: #00AEEA;
    text-transform: uppercase;
}

.meetusJPO .jpoContent a.more:hover {
    background: url("/Content/images/design/morelightbleu.png") no-repeat scroll center center #FFF;
    color: #00aeef;
}


.jpoContent h3 {
    color: #00AEEA;
    text-align: left;
    font-size: 37px;
    line-height: 56px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.jpoContent h4 {
    border-bottom: 1px solid #ae917b;
    border-top: 1px solid #ae917b;
    color: #ae917b;
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 1.8em;
    font-weight: 100;
    line-height: 1.1;
    margin: 28px 0 5px 220px;
    padding: 20px 0;
    text-align: left;
    width: auto;
}

.jpoContent h4::before {
    background: url("/Content/images/design/bg/bg-home-jpo.png") no-repeat scroll 0 0;
    content: "";
    height: 150px;
    left: 40px;
    position: absolute;
    top: 80px;
    width: 150px;
}

.jpoContent h5 {
    color: #ae917b;
    font-family: "Roboto", sans-serif;
    font-size: 2.8em;
    margin: 0px auto;
    font-weight: 700;
    line-height: 0.7em;
    text-align: center;
}

.meetusJPO .jpoContent h5 {
    position: relative;
    text-align: left;
    font: normal normal bold 25px/33px Roboto;
    letter-spacing: 0.8px;
    color: #FFFFFF;
    opacity: 1;
    line-height: 28px;
}

.meetusJPO .jpoContent h5:before {
    background: url("/Content/images/media/home/icone_date@2x.png") no-repeat scroll 0 0;
    content: "";
    height: 24px;
    left: -40px;
    position: absolute;
    width: 20px;
}

.meetusJPO .jpoContent em {
    display: block;
    text-align: left;
    font: normal normal 500 25px/21px Roboto;
    letter-spacing: 0px;
    color: #4CB278;
    font-style: normal;
    padding: 4px 0;
    text-transform: capitalize;
}

.meetusJPO .jpoContent em span {
    display: block;
    text-align: left;
    font: normal normal 400 16px/21px Roboto;
    letter-spacing: 0px;
    color: #4CB278;
    padding: 4px 0;
}


.jpoContent .dateEvent {
    color: #ae917b;
    font-family: "Roboto", sans-serif;
    font-size: 3em;
    margin: 15px 0 5px 0;
    font-weight: 400;
    line-height: 1.5em;
    text-align: center;
    border-bottom: 1px solid #ae917b;
    width: 80%;
    padding-bottom: 20px;
}

.date-arrow {
    display: inline-block;
    position: relative;
}

.date-arrow:before {
    background: url("/Content/images/design/double-arrow-jpo.png") no-repeat scroll 0 0;
    content: "";
    height: 30px;
    left: -45px;
    position: absolute;
    top: 5px;
    width: 30px;
}

.jpoContent h5 span.small {
    font-size: 0.4em;
    font-weight: 500;
}


/*div contact mobile*/
.contactMobile {
    display: none;
}


@media (max-width : 960px) {
    .meetusJPO {
        min-height: inherit;
    }

    .meetusJPO .jpo {
        margin: 0;
        background-color: #28292D;
        float: none;
        min-height: inherit;
        width: 100%;
        padding: 23px;
        position: relative;
        z-index: 2;
        display: block;
    }

    .meetusJPO .jpo .jpoContent {
        width: 100%;
    }

    .meetusJPO .jpoContent li.noevent {
        font-size: 1em;
        left: -30px;
        border: none;
        top: 10px;
    }

    .meetus .entretien {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 6px #00000029;
        opacity: 1;
        min-height: inherit;
        max-width: inherit;
        min-height: inherit;
        right: inherit;
        top: inherit;
        z-index: inherit;
        width: 100%;
        position: relative;
    }

    .meetus .entretien img {
        margin: 0 auto;
        display: block;
        max-width: inherit;
        width: auto;
    }

    .meetus .jpoContent h3 {
        margin: inherit;
        text-align: inherit;
        padding-left: inherit;
    }

    .meetusJPO .jpoContent h5 {
        font-size: 1.1em;
    }

    .meetusJPO .jpoContent h3::before {
        background: none;
    }

    .meetusJPO .jpoContent a.more {
        right: -56px;
        top: 25px;
    }

    .meetusJPO .jpoContent a.more::before {
        content: '';
    }

    .meetusJPO .jpoContent h5::before {
        left: -31px;
    }
}


/*======================================================================================
                section présentation 
========================================================================================*/
.presentation {
    width: 1024px;
    margin: 0 auto;
    position: relative;
}

.presentation h3 {
    margin: 50px 0 30px;
    /*color: #419499;*/
    line-height: 1.2em;
    font-size: 3em;
}




/*========================================================================================
                            Section Profils MBA
==========================================================================================*/

.profilsMBA {
    width: 1024px;
    margin: 40px auto;
}

.profilsMBA h3 {
    margin: 70px 0 10px 0;
}

.profilsMBA .blocLeftHome,
.profilsMBA .blocRightHome {
    width: 502px;
    height: 680px;
    float: left;
    border-top: 1px solid #222423;
    border-right: 1px solid #222423;
    border-bottom: 1px solid #222423;
}

.profilsMBA .blocLeftHome {
    margin-right: 20px;
}

.profilsMBA .blocLeftHome h4,
.profilsMBA .blocRightHome h4 {
    line-height: 1em;
    margin: 30px 28px 0;
}

.profilsMBA p,
.profilsMBA ul {
    margin: 5px 28px;
}

.profilsMBA p,
.profilsMBA a {
    color: #222423;
}

.profilsMBA ul {
    padding: 0;
}

.profilsMBA .redUl li {
    background: url(/Content/images/design/red-arrow-li.png) no-repeat 0 7px;
    padding-left: 22px;
    list-style: none;
    position: relative;
}

.profilsMBA .redUl li a:hover {
    text-decoration: underline;
    color: #ed4622;
}

.profilsMBA .orangeUl li {
    background: url(/Content/images/design/orange-arrow-li.png) no-repeat 0 7px;
    padding-left: 22px;
    list-style: none;
    position: relative;
}

.profilsMBA .orangeUl li a:hover {
    text-decoration: underline;
    color: #f39700;
}


/*------------------------------------------------------------------------------
                Section doublez votre potentiel
------------------------------------------------------------------------------*/

/*En utilisant des table, tabl-cells et table-rox pour faire des tableaux*/

#potentiel {
    display: table;
    width: 100%;
    margin: 0 auto;
}

#potentiel .l1,
#potentiel .l2 {
    display: table-row;
    width: 100%;
}

#potentiel .l1>div,
#potentiel .l2>div {
    display: table-cell;
    width: 50%;
}

#potentiel .l1>div p,
#potentiel .l2>div p {
    font-size: 1.35em;
    font-weight: 300;
}

#potentiel .l1>div p strong,
#potentiel .l2>div p strong {
    color: #419499;
}

#potentiel .l1 .double-competence {
    border-right: 1px solid #222423;
    border-bottom: 1px solid #222423;
}

#potentiel .l1 .reorientez {
    border-bottom: 1px solid #222423;
}

#potentiel .l1 .reorientez p,
#potentiel .l2>div:nth-child(2n+2) p {
    margin-left: 30px;
}

#potentiel .l2>div:first-child {
    border-right: 1px solid #222423;
}


.potentiel {
    width: 1024px;
    margin: 0 auto;
    position: relative;
}

.potentiel h3 {
    margin: 50px 0 20px;
}

.potentiel table {
    width: 100%;
}

.potentiel table tr td {
    height: auto
        /*305px*/
    ;
    padding-top: 5px;
    vertical-align: top;
    position: relative;
    width: 50%;
    float: left;
}

.potentiel .double-competence,
.potentiel div.reorientez,
.potentiel div.differenciez,
.potentiel div.boostez {
    height: auto
        /*305px*/
    ;
    min-height: 305px;
    padding-top: 5px;
    vertical-align: top;
    position: relative;
    width: 50%;
    float: left;
}

.potentiel .p1

/*.double-competence p, .potentiel .reorientez p, .potentiel .differenciez p, .potentiel .boostez p*/
,
.potentiel figure {
    position: relative;
    z-index: 1;
}

/*.potentiel .double-competence:hover .p1, 
 .potentiel .reorientez:hover .p1, 
 .potentiel .differenciez:hover .p1, 
 .potentiel .boostez:hover .p1, 
 .potentiel .double-competence:hover figure, 
 .potentiel .reorientez:hover figure, 
 .potentiel .differenciez:hover figure, 
 .potentiel .boostez:hover figure {
    position: relative;
    z-index: -3;
} */
.potentiel table tr td strong,
.potentiel div strong {
    color: #419499;
}

.potentiel table tr td:first-child,
.potentiel div.reorientez,
.potentiel div.boostez {
    border-left: 1px solid #4d5051;
}

.potentiel table tr:nth-child(2) td,
.potentiel div.differenciez,
.potentiel div.boostez {
    border-top: 1px solid #4d5051;
    padding-top: 30px;
    vertical-align: bottom;
}

.potentiel table tr:first-child td:nth-child(2),
.potentiel table tr:nth-child(2) td:nth-child(2),
.potentiel div.reorientez,
.potentiel div.boostez {
    padding-left: 48px;
}

/*---------------------------*/
.reorientez figure img {
    margin: 10px auto;
    display: block;
}

.potentiel figure {
    position: relative;
}

.potentiel .rectangle-out {
    padding: 20px;
}

.potentiel .rectangle-out a {
    bottom: 0;
    height: 99.9%;
    left: 0;
    position: absolute;
    top: 0;
    width: 99.9%;
}

/*Le petit rond noir au milieu du tableau*/
.potentiel aside {
    position: absolute;
    top: 53%;
    left: 46.5%;
    background: url(/Content/images/design/bg/bg-rond-noir.png) no-repeat 0 0;
    width: 71px;
    height: 71px;
    z-index: 4;
}

.potentiel aside span {
    color: #ffffff;
    display: block;
    margin: 24px 26px;
}

.potentiel #asideInfo {
    top: 52.5%;
    left: 46.7%;
}

.potentiel #asideEnergie {
    top: 52.5%;
    left: 46.5%;
}

.potentiel #asideBio {
    top: 52.5%;
    left: 46.5%;
}

.potentiel .rectangle-out {
    bottom: 0;
    /* display: table; */
    height: 305px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    vertical-align: middle;
    width: 100%;
}

.potentiel .hvr-rectangle-in {
    background: -webkit-linear-gradient(right, #9be270, #01ade8);
    -webkit-text-fill-color: #fff;
}

.potentiel .hvr-rectangle-in:before {
    background: #FFF;
}

.rectangle-out * {
    display: none;
}

.potentiel td.active .rectangle-out *,
.potentiel div.active .rectangle-out * {
    display: block;
}


.potentiel td.active .rectangle-out p,
.potentiel div.active .rectangle-out p {
    font-size: 19px;
    line-height: 24px;
    padding: 0 20px;
}

.potentiel td .rectangle-out,
.potentiel div .rectangle-out {
    z-index: 0;
}

.potentiel td *,
.potentiel .double-competence,
.potentiel .reorientez,
.potentiel .differenciez,
.potentiel .boostez {
    z-index: 1;
}

.potentiel td>p,
.potentiel div>p {
    position: relative;
}

.potentiel .active .rectangle-out {
    z-index: 2;
}

.potentiel .double-competence figure {
    margin-top: 38px;
    padding-left: 20px;
}

.potentiel .double-competence-mobile {
    display: none;
}


/*--------------------------------------------------------------------------------------
                    Section Formations 
-------------------------------------------------------------------------------------*/

.formations {
    width: 100%;
    margin-top: 100px;
    margin-bottom: 50px;
    border-bottom: 1px solid #222423;
}

.formations .formt {
    width: 1024px;
    margin: 0px auto;
    position: relative;
}

.formations .formtEnergie {
    margin: 0px auto 80px;
}

.formations .blocLeftHome,
.formations .blocRightHome {
    float: left;
    position: relative;
    height: 280px;
}

.formations .blocLeftHome {
    width: 512px;
    margin: 0px 48px 0 0;
    padding-right: 48px;
    border-right: 1px solid #4d5051;
}

.formations .blocRightHome {
    width: 464px;
}

.formations h3 {
    color: #419499;
    line-height: 1.2em;
    margin: 0;
}

.formations p {
    margin-top: 10px;
    padding-bottom: 80px;
}

.formations p strong {
    color: #419499;
    font-weight: 500;
}

.formations .more {
    background: none;
    bottom: 10px;
    display: block;
    position: absolute;
    right: 0;
    text-indent: 0;
    width: 315px;
    height: 50px;
    color: #419499;
    line-height: 41px;
}

.formations .more:hover {
    text-decoration: underline;
}

.formations .more::after {
    background: url("/Content/images/design/more.png") no-repeat center center #419499;
    content: "";
    height: 45px;
    right: 5px;
    position: absolute;
    bottom: 5px;
    width: 45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.formations .blocLeftHome .more {
    width: 275px;
    right: 48px;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    -o-border-radius: 0%;
    border-radius: 0%;
}




/*-------------------------------------------------------------------------
            Section les chiffres clées  -  Intégration pro
---------------------------------------------------------------------------*/

.chiffresCles {
    width: 1024px;
    margin: 0 auto;
}

.chiffresCles h3 {
    margin: 40px 0 20px;
}

.chiffresCles ul,
.carriereBio .blocRightHome ul,
.carriereEnergie .blocRightHome ul {
    margin: 0;
    padding: 0;
}

.chiffresCles ul li {
    display: block;
    width: 155px;
    height: 225px;
    float: left;
    background: url(/Content/images/design/bg/bg-chiffres-cles-home.png) no-repeat 0 0;
    margin-right: 18px;
    border-bottom: 1px solid #4d5051;
    text-align: center;
}

.chiffresCles ul li a {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 23px;
    margin: 32px 15px;
    text-decoration: none;
    color: #222423;
    pointer-events: none;
}

.chiffresCles ul li.small-number a {
    margin: 44px 15px;
}

.carriereBio .blocRightHome ul li.small-number a,
.carriereEnergie .blocRightHome ul li.small-number a {
    margin: 34px 15px;
}

.chiffresCles ul li:first-child {
    background: url(/Content/images/design/bg/bg-chiffres-cles-home.png) no-repeat -1px 0;
}

.chiffresCles ul li:last-child {
    margin-right: 0px;
}

.chiffresCles ul li .size1,
.chiffresCles ul li .size2,
.chiffresCles ul li .size3,
.carriereBio .blocRightHome ul li .size1,
.carriereBio .blocRightHome ul li .size2,
.carriereBio .blocRightHome ul li .size3,
.carriereEnergie .blocRightHome ul li .size1,
.carriereEnergie .blocRightHome ul li .size2,
.carriereEnergie .blocRightHome ul li .size3,
.carriereInfo .blocHome ul li .size1,
.carriereInfo .blocHome ul li .size2,
.carriereInfo .blocHome ul li .size3 {
    color: #419499;
}

.chiffresCles ul li .size1,
.carriereBio .blocRightHome ul li .size1,
.carriereEnergie .blocRightHome ul li .size1,
.carriereInfo .blocHome ul li .size1 {
    font-size: 65px;
    font-weight: 900;
}

.chiffresCles ul li .size2 {
    font-size: 35px;
    font-weight: 700;
}

.carriereBio .blocRightHome ul li .size2,
.carriereEnergie .blocRightHome ul li .size2,
.carriereInfo .blocHome ul li .size2 {
    font-size: 3em;
    font-weight: 700;
}

.chiffresCles ul li .size3,
.carriereBio .blocRightHome ul li .size3,
.carriereEnergie .blocRightHome ul li .size3,
.carriereInfo .blocHome ul li .size3 {
    font-size: 30px;
    font-weight: 100;
}

.chiffresCles ul li .size4,
.carriereBio .blocRightHome ul li .size4,
.carriereEnergie .blocRightHome ul li .size4,
.carriereInfo .blocHome ul li .size4 {
    font-size: 35px;
    line-height: 50px;
}

.hidebr {
    display: none;
}

.slideContainer {
    display: none;
}


/*------------------------------------------------------------------------------------
                    Section les grands secteurs d'avenir 
-------------------------------------------------------------------------------------*/

.secteurAvenir {
    width: 1024px;
    margin: 30px auto;
    position: relative;
}

.secteurAvenir h3 {
    margin: 50px 0 10px;
}

.secteurAvenir .intro {
    color: #222423;
    margin: 10px 0px 30px 0;
}

.secteurAvenir h4,
.secteurAvenir h5,
.secteurAvenir p,
.secteurAvenir li,
.secteurAvenir a {
    color: #fff;
}

.secteurAvenir h4 {
    margin: 18px 20px;
    text-transform: uppercase;
}

.secteurAvenir h5 {
    margin: 45px 25px 0;
}

.secteurAvenir p {
    margin: 10px 25px 15px;
}

.secteurAvenir ul {
    margin: 0px 25px 15px;
}

.secteurAvenir .blocLeftHome,
.secteurAvenir .blocRightHome {
    width: 488px;
    float: left;
    height: 475px;
}

.secteurAvenir .more {
    background: none;
    bottom: 5px;
    display: block;
    position: absolute;
    left: 8%;
    text-indent: 0;
    width: 70%;
    height: 50px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    margin: 30px auto 10px;
    padding: 12px 25px;
    border: 1px solid #fff;
    text-align: center;
    font-size: 1.2em;
}

.secteurAvenir .more:hover {
    background: none
        /*url("/Content/images/design/moredarkbleu.png") no-repeat center center #ffffff*/
    ;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    /*-webkit-transition: all 0.3s ease-in-out 0s;
        -moz-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;*/
}

.secteurAvenir .tic .more:hover {
    background:
        /*url("/Content/images/design/moredarkbleu.png") no-repeat center center*/
        #ffffff;
    color: #0062b0;
}

.secteurAvenir .info .more:hover {
    background:
        /*url("/Content/images/design/morelightbleu.png") no-repeat center center*/
        #ffffff;
    color: #00aeef;
}

.secteurAvenir .biotech .more:hover {
    background:
        /*url("/Content/images/design/moredarkvert.png") no-repeat center center*/
        #ffffff;
    color: #41bb83;
}

.secteurAvenir .energie .more:hover {
    background:
        /*url("/Content/images/design/morelightvert.png") no-repeat center center*/
        #ffffff;
    color: #b2d234;
}

.carriere .tic .more:hover {
    background: url("/Content/images/design/moredarkbleu.png") no-repeat center center #ffffff;
}

.carriere .info .more:hover {
    background: url("/Content/images/design/morelightbleu.png") no-repeat center center #ffffff;
}

.carriere .biotech .more:hover {
    background: url("/Content/images/design/moredarkvert.png") no-repeat center center #ffffff;
}

.carriere .energie .more:hover {
    background: url("/Content/images/design/morelightvert.png") no-repeat center center #ffffff;
}



.secteurAvenir .blocLeftHome .more a,
.secteurAvenir .blocRightHome .more a {
    background: url("/Content/images/design/icon/icon-3-dots.png") no-repeat 0 0;
    bottom: 25px;
    display: block;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    width: 100px;
}

.secteurAvenir .blocLeftHome {
    margin: 48px 48px 0 0;
    position: relative;
}

.secteurAvenir .blocRightHome {
    margin: 48px 0 0 0;
    position: relative;
}

/*--------  Bloc Digital Mana    ----------*/
.secteurAvenir .tic {
    background-color: #0062b0;
    margin: 20px 0px 0px 0px;
}

.secteurAvenir .tic h4::before {
    background: url(/Content/images/design/icon/digital-management.png) no-repeat scroll 0 0px;
    content: "";
    height: 48px;
    left: 25px;
    position: absolute;
    top: 28px;
    width: 50px;
}

.secteurAvenir .tic h4 {
    padding-left: 60px;
}

.secteurAvenir .tic a.targetLink:after,
.secteurAvenir .info a.targetLink:after {
    font-family: 'FontAwesome';
    content: "\f08e";
    font-size: 0.8em;
}

/*---------     Bloc informatique   ---------------*/
.secteurAvenir .info {
    background-color: #00aeef;
    margin: 20px 48px 0 0;
}

.secteurAvenir .info h4::before {
    background: url(/Content/images/design/icon/informatique-management.png) no-repeat scroll 0 0px;
    content: "";
    height: 48px;
    left: 25px;
    position: absolute;
    top: 28px;
    width: 50px;
}

.secteurAvenir .info h4 {
    padding-left: 70px;
}



/*-------   Bloc Biotechnologie     ----------------*/
.secteurAvenir .biotech {
    background-color: #41bb83;
    margin: 0px 48px 0px 0px;

}

.secteurAvenir .biotech h4::before {
    background: url("/Content/images/design/icon/biotech-management.png") no-repeat scroll 0 0px;
    content: "";
    height: 51px;
    left: 25px;
    position: absolute;
    top: 28px;
    width: 27px;
}

.secteurAvenir .biotech h4 {
    padding-left: 40px;
}

/*-------   Bloc Energie     ----------------*/
.secteurAvenir .energie {
    background-color: #b2d234;
    margin: 0px;
}

.secteurAvenir .energie h4::before {
    background: url("/Content/images/design/icon/energie-management.png") no-repeat scroll 0 0px;
    content: "";
    height: 59px;
    left: 25px;
    position: absolute;
    top: 20px;
    width: 59px;
}

.secteurAvenir .energie h4 {
    padding-left: 40px;
}

/*------------------------------------------------------------------------------------
                    Section Actualités
-------------------------------------------------------------------------------------*/

/*les actus à la une */
.actualites {
    width: 1024px;
    margin: 30px auto;
}

.actualites h3 {
    margin: 40px 0 20px 0;
}

.actualites .actus {
    width: 682px;
    float: left;
    margin-right: 42px;
    position: relative;
}

.actualites .actus .mainNews {
    margin-bottom: 30px;
}

.actualites .actus .mainNews p {
    margin: 0 0 35px;
}

.actualites .actus .mainNews img {
    object-fit: cover;
}

.actualites .smallNews {
    width: 320px;
    float: left;
}

.actualites .smallNews p {
    margin-top: 8px;
}

.actus div:nth-child(3) {
    margin-right: 42px;
}

.actualites .actus div,
.actualites .actus figure {
    position: relative;
}

.actualites .actus figure {
    line-height: 0;
}

.actualites .actus p a {
    color: #222423;
}

.actualites .actus .moreActus::after {
    background: url("/Content/images/design/more.png") no-repeat scroll center center #222423;
    bottom: 17px;
    content: "";
    height: 45px;
    position: absolute;
    right: 25px;
    width: 45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.actualites .actus .more {
    -moz-background-color: rgba(65, 148, 153, 0.9);
    -webkit-background-color: rgba(65, 148, 153, 0.9);
    -o-background-color: rgba(65, 148, 153, 0.9);
    background-color: rgba(65, 148, 153, 0.9);
}

.actualites .actus .more:hover {
    background-color: #255a5d;
}

.actualites .actus .moreActus {
    display: block;
    margin: 15px 20px 15px 320px;
    text-decoration: none;
    text-transform: uppercase;
    color: #222423;
}

.actualites .actus .moreActus:hover {
    text-decoration: underline;
}

/*============= bloc Classement HappyAtSchool ================*/
.actualites .happyIndex {
    width: 300px;
    float: left;
    margin-top: 45px;
}

.actualites .happyIndex p {
    margin: 10px 0 0;
    color: #ee1696;
    font-weight: 600;
}

/*================= Suivez nous sur les réseaux sociaux ================ */
.suivezNous h3 {
    color: #d3c2b0;
    text-align: center;
    font-size: 3.5em;
    margin: 30px 0 0px;
}

.actualites .suivezNous {
    width: 300px;
    float: left;
    margin-top: 0px;
}




.suivezNous .socialMedia .facebook a {
    background: url("/Content/images/design/icon/icon-social.png") no-repeat 0 0;
    width: 31px;
    height: 66px;
    margin-right: 25px;
    display: block;
}

.suivezNous .socialMedia .facebook a:hover {
    background-position: 0 -66px;
}

.suivezNous .socialMedia .twitter a {
    background: url("/Content/images/design/icon/icon-social.png") no-repeat -55px 0;
    width: 75px;
    height: 66px;
    margin-right: 15px;
    display: block;
}

.suivezNous .socialMedia .twitter a:hover {
    background-position: -55px -66px;
}

.suivezNous .socialMedia .linkedin a {
    background: url("/Content/images/design/icon/icon-social.png") no-repeat -143px 0px;
    width: 68px;
    height: 66px;
    margin-right: 18px;
    display: block;
}

.suivezNous .socialMedia .linkedin a:hover {
    background-position: -143px -66px;
}

.suivezNous .socialMedia .youtube a {
    background: url("/Content/images/design/icon/icon-social.png") no-repeat -231px 0;
    width: 68px;
    height: 66px;
    display: block;
    margin-top: 15px;
}

.suivezNous .socialMedia .youtube a:hover {
    background-position: -231px -66px;
}


/*Modules Facebook et twitter */

.fcbk {
    width: 298px;
    border: 1px solid #d3c2b0;
}

.StmTweet {
    background-color: #ffffff;
    border: 1px solid #d3c2b0;
    float: left;
    height: 310px;
    margin: 16px 0px 42px 0;
    padding: 0;
    text-align: center;
    width: 298px;
}

.tweets {
    background: none repeat scroll 0 0 #2daae2;
    height: 172px;
    margin: 10px auto 0;
    overflow: hidden;
    padding: 11px 10px;
    width: 258px;
}

.tweets p {
    color: #ffffff;
    font-size: 13px;
    margin-top: 0;
    text-align: left;
}

.tweets p a {
    color: #ffffff;
}

.tweets p a:hover {
    text-decoration: underline;
}

/*------------------------------------------------------------------------------------
                    Section Témoignages de diplômés 
-------------------------------------------------------------------------------------*/

.temoignages {
    width: 1024px;
    margin: 30px auto;
}

.temoignages h3 {
    margin: 50px 0 0px;
}

.temoignages .temoignage-3cols {
    width: 310px;
    margin-right: 46px;
    float: left;
}

.temoignages .temoignage-3cols.lastchild {
    margin-right: 0;
}

.temoignages .temoignage-3cols .temoignage {
    background: url("/Content/images/design/bg/bg-temoignages-home.png") no-repeat 0 0;
    width: 310px;
    height: 316px;
}

.temoignages .temoignage-3cols .temoignageBio {
    background: url("/Content/images/design/bg/bg-temoignages-home.png") no-repeat 0 -632px;
}

.temoignages .temoignage-3cols .temoignageEnergie {
    background: url("/Content/images/design/bg/bg-temoignages-home.png") no-repeat 0 -316px;
}

.temoignages .temoignage-3cols .temoignageInfo {
    background: url("/Content/images/design/bg/bg-temoignages-home.png") no-repeat 0 -948px;
}

.temoignage-3cols .temoignage p {
    padding: 50px 35px 0;
    color: #fff;
    text-align: center;
}

.temoignage-3cols .name {
    padding: 0px 0px 30px;
    border-bottom: 1px solid #419499;
    height: 136px;
    margin: 0;
    text-align: center;
}

.temoignage-3cols .name strong {
    color: #419499;
}

/*-------- Nom Biologie */
.temoignage-3cols .nameBio {
    border-bottom: 1px solid #8cccc2;
}

.temoignage-3cols .nameBio strong {
    color: #8cccc2;
}

/*-------- Nom Energie */
.temoignage-3cols .nameEnergie {
    border-bottom: 1px solid #50a9df;
}

.temoignage-3cols .nameEnergie strong {
    color: #50a9df;
}

/*-------- Nom Informatique */
.temoignage-3cols .nameInfo {
    border-bottom: 1px solid #4e8c90;
}

.temoignage-3cols .nameInfo strong {
    color: #4e8c90;
}



/*------------------------------------------------------------------------------------
                    Section découvrez votre avenir 
-------------------------------------------------------------------------------------*/

.carriere {
    width: 1024px;
    margin: 30px auto;
    position: relative;
}

.carriereBio,
.carriereEnergie,
.carriereInfo {
    padding: 0 0 40px 0;
}

.carriere h3 {
    margin: 60px 0 0;
}

.carriere h4 {
    margin: 0px 0 30px;
    color: #419499;
}

.carriere h5 {
    background: #fff;
    width: 100%;
    color: #222423;
    font-family: Roboto, sans-serif;
    font-size: 1.4em;
    font-weight: 300;
    margin-top: 0;
    padding-bottom: 10px;
}

.carriere .tic .more,
.carriere .info .more,
.carriere .biotech .more,
.carriere .energie .more {
    right: 10px;
    bottom: 10px;
}

.carriereBio h4,
.carriereEnergie h4 {
    margin: 0px 0 30px;
    color: #222423;
    line-height: 1em;
}

.carriereInfo h4 {
    margin: 0px 0 20px;
    color: #222423;
    line-height: 1em;
}

.carriere .blocLeftHome,
.carriere .blocRightHome {
    width: 502px;
    float: left;
    height: 258px;
}

.carriereBio .blocLeftHome,
.carriereBio .blocRightHome,
.carriereEnergie .blocLeftHome,
.carriereEnergie .blocRightHome,
.carriereInfo .blocLeftHome,
.carriereInfo .blocRightHome {
    width: 512px;
    float: left;
    height: auto;
}

.carriere .blocLeftHome a,
.carriere .blocRightHome a {
    color: #ffffff;
}

.carriereBio .blocLeftHome a {
    color: #8cccc2;
    text-transform: uppercase;
    line-height: 1.3em;
}

.carriereEnergie .blocLeftHome a {
    color: #50a9df;
    text-transform: uppercase;
    line-height: 1.3em;
}

.carriereInfo .blocLeftHome a {
    color: #d05338;
    text-transform: uppercase;
    line-height: 1.3em;
}

.carriereInfo .blocRightHome a {
    color: #d69120;
    text-transform: uppercase;
    line-height: 1.3em;
}

/*.carriere .blocLeftHome .more a, .carriere .blocRightHome .more a {
    background: url("/Content/images/design/icon/icon-3-dots.png") no-repeat 0 0;
    bottom: 25px;
    display: block;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    width: 100px;
}*/
.carriereBio .more,
.carriereEnergie .more,
.carriereInfo .more {
    background: none;
    display: block;
    position: relative;
    margin-top: 50px;
    text-indent: 0px;
    width: 640px;
    display: block;
    margin-left: 400px;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    -o-border-radius: 0%;
    border-radius: 0%;
}

.carriereBio .more:hover,
.carriereEnergie .more:hover,
.carriereInfo .more:hover {
    text-decoration: underline;
}

.carriereBio .more:after,
.carriereEnergie .more:after,
.carriereInfo .more:after {
    background: url("/Content/images/design/more.png") no-repeat center center #8cccc2;
    bottom: 10px;
    content: "";
    height: 45px;
    position: absolute;
    right: 25px;
    width: 45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.carriereBio .more {
    color: #88c6bc;
}

.carriereEnergie .more {
    color: #50a9df;
}

.carriereInfo .more {
    color: #4e8c90;
}

.carriere .blocLeftHome {
    margin: 40px 20px 0 0;
    position: relative;
}

.carriereBio .blocLeftHome,
.carriereEnergie .blocLeftHome,
.carriereInfo .blocLeftHome {
    margin: 48px 0px 0 0;
}

.carriere .blocRightHome {
    margin: 40px 0 0 0;
    position: relative;
}

.carriere ul {
    padding-left: 120px;
    margin-top: 32px;
}

.carriereInfo .blocHome {
    margin: 30px 0 15px;
}

.carriereInfo .blocHome ul {
    padding-left: 0px;
}

.carriereBio .blocLeftHome ul,
.carriereEnergie .blocLeftHome ul {
    padding-left: 0;
    margin-top: 45px;
}

.carriereInfo .blocLeftHome ul,
.carriereInfo .blocRightHome ul {
    padding-left: 0;
    margin-top: 20px;
}

.carriereBio .blocRightHome ul,
.carriereEnergie .blocRightHome ul {
    height: 126px;
    margin: 0 0 20px 0;
    padding: 0;
}

.carriere ul li {
    color: #fff;
    background: url("/Content/images/design/white-arrow-li.png") no-repeat 0 10px;
    padding-left: 15px;
    list-style: none;
}

.carriereBio .blocLeftHome ul li,
.carriereEnergie .blocLeftHome ul li,
.carriereInfo .blocLeftHome ul li,
.carriereInfo .blocRightHome ul li {
    background: url("/Content/images/design/black-arrow-li.png") no-repeat 0px 13px;
    padding-left: 25px;
    list-style: none;
}

.carriereBio .blocLeftHome ul li,
.carriereEnergie .blocLeftHome ul li {
    padding-bottom: 19px;
}

.carriereInfo .blocLeftHome ul li,
.carriereInfo .blocRightHome ul li {
    padding-bottom: 10px;
}

.carriereBio .blocRightHome ul li,
.carriereEnergie .blocRightHome ul li,
.carriereInfo .blocHome ul li {
    display: block;
    width: 242px;
    height: 126px;
    float: left;
    background: url(/Content/images/design/bg/bg-chiffres-cles-home.png) no-repeat -192px 0px;
    margin-right: 10px;
    border-bottom: 1px solid #4d5051;
    text-align: center;
}

.carriereInfo .blocHome ul li {
    margin-right: 18px;
}

.carriereInfo .blocHome ul li:last-child {
    margin-right: 0;
}

.carriereBio .blocRightHome ul li a,
.carriereEnergie .blocRightHome ul li a,
.carriereInfo .blocHome ul li a {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    margin: 32px 5px;
    text-decoration: none;
    color: #222423;
}

.carriereBio .blocRightHome p,
.carriereEnergie .blocRightHome p,
.carriereInfo .blocHome p {
    color: #ff6000;
}

.carriereInfo .blocHome p {
    margin-left: 514px;
}

.carriereBio .blocLeftHome .hvr-underline-from-center::before {
    background: none repeat scroll 0 0 #8cccc2;
    height: 2px;
}

.carriereEnergie .blocLeftHome .hvr-underline-from-center::before {
    background: none repeat scroll 0 0 #50a9df;
    height: 2px;
}

.carriereInfo .blocRightHome .hvr-underline-from-center::before {
    background: none repeat scroll 0 0 #d69120;
    height: 2px;
}

.carriereInfo .blocLeftHome .hvr-underline-from-center::before {
    background: none repeat scroll 0 0 #d05338;
    height: 2px;
}


/*--------  Bloc TIC    ----------*/
.carriere .tic {
    background-color: #0062b0;
    margin: 0px 20px 0 0;
}

.carriere .tic ul::before {
    background: url("/Content/images/design/icon/big-icon-mba.png") no-repeat scroll 0 0px #fff;
    content: "";
    height: 87px;
    left: 18px;
    position: absolute;
    top: 90px;
    width: 87px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

/*---------     Bloc informatique   ---------------*/
.carriere .info {
    background-color: #00aeef;
    margin: 0;
}

.carriere .info ul::before {
    background: url("/Content/images/design/icon/big-icon-mba.png") no-repeat scroll -3px -94px #fff;
    content: "";
    height: 87px;
    left: 18px;
    position: absolute;
    top: 90px;
    width: 87px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

/*-------   Bloc Biotechnologie     ----------------*/
.carriere .biotech {
    background-color: #41bb83;
}

.carriere .biotech ul::before {
    background: url("/Content/images/design/icon/big-icon-mba.png") no-repeat scroll 0 -175px #fff;
    content: "";
    height: 87px;
    left: 18px;
    position: absolute;
    top: 90px;
    width: 87px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

/*-------   Bloc Energie     ----------------*/
.carriere .energie {
    background-color: #b2d234;
}

.carriere .energie ul::before {
    background: url("/Content/images/design/icon/big-icon-mba.png") no-repeat scroll 0 -262px #fff;
    content: "";
    height: 87px;
    left: 18px;
    position: absolute;
    top: 90px;
    width: 87px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

/*--------------------------------------------------------------------------------
                    Section Replay
---------------------------------------------------------------------------------*/

.replay {
    width: 100%;
    margin: 70px auto 0;
    color: #ffffff;
}

.replay iframe {
    border: 0 none;
}


.replay h3 {
    color: #FFF;
    width: 1024px;
    margin: 0 auto;
    padding-top: 20px;
}

.replay .contentReplay {
    width: 100%;
    background-color: #4d5051;
}

.replay .videosReplay,
.carousel {
    width: 1024px;
    margin: 0 auto;
    background: none repeat scroll 0 0 #4d5051;
    /*à effacer*/
}

.bigVideo,
.videoBig {
    float: left;
    height: 383px;
    width: 652px;
    margin: 20px 16px 0 0;
}

.bigVideo a {
    display: block;
    position: relative;
}

.bigVideo a img,
.videoBig iframe {
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.listeVideos,
.pagination {
    float: left;
    width: 356px;
    margin-top: 20px;
}

.carouselVideo .moreVideo::after {
    background: url("/Content/images/design/moredarkvert.png") no-repeat scroll center center #fff;
    bottom: -4px;
    content: "";
    height: 45px;
    position: absolute;
    right: 10px;
    width: 45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.carouselVideo .moreVideo {
    display: block;
    margin: 15px 35px 15px 730px;
    text-decoration: none;
    color: #419499;
    position: relative;
}

.carouselVideo .moreVideo:hover {
    text-decoration: underline;
}

/* à modifier ----------------------------------------------------------------------------*/

/*.carousel .mask {
	width:100%;
	margin-bottom:43px;
	overflow:hidden;
	position:relative;
}
.carousel .slideset {}
.carousel .slide {
	padding:8px 0;
	width:100%;
	position:absolute;
}
.carousel .slide.active {z-index:10;}
.carousel .slide .video {
	float:left;
	width:44.8%;
	margin:0 3.3% 0 14px;
	-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
	position:relative;
	border:10px solid #f60;
}
.carousel .video img {width:100%;}
.carousel .txt {
	color:#545454;
	font-weight:300;
	line-height:16px;
	padding:5px 0 0;
	overflow:hidden;
}
.carousel .txt p {margin:0 0 16px;}
.carousel .txt h3 {
	font:25px/30px 'Open Sans', Arial, Helvetica, sans-serif;
	margin:0 0 8px;
	color:#f60;
}
.toolbar {
	margin-top:-19px;
	width:100%;
}
.toolbar:after{
	display:block;
	clear:both;
	content:'';
}*/


.gallery .mask,
.pagination .gmask {
    overflow: hidden;
    padding: 8px 0;
    position: relative;
    width: 100%;
}

.gallery .slide,
.pagination .tmpl {
    float: left;
    height: 130px;
    width: auto;
}

.gallery .video .play,
.pagination .tmpl .video .play {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 118px;
    margin: -11px 0 0 -11px;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 194px;
}

/* end à modifier */

.listeVideos .videos,
.pagination .slideset {
    margin: 0;
}

.listeVideos .videos a,
.pagination .slideset .videoSmall .video {
    float: left;
    margin-bottom: 18px;
}

.listeVideos .videos h4,
.videoSmall h3 {
    display: none;
}

.listeVideos .videos a img {
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.listeVideos .videos a:hover img {
    border: 10px solid #7fc9bd;
}

.listeVideos .videos span,
.videoSmall .videoText {
    float: left;
    margin-left: 10px;
    width: 150px;
}

/* MENU FIXE */

.menu-fixe .title {
    position: fixed;
    height: 110px;
    background: #fff;
    z-index: 100000;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.1);
}

.menu-fixe .logo {
    overflow: hidden;
    /*height: 78px;
    width: 65px;
    margin-top: 23px;*/
}

/*.menu-fixe .title h1 {
    width:43%;
}*/

@media only screen and (max-width : 920px) {
    /*.menu-fixe .title h1 {
    width:32%;*/
}
}

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

    .menu-fixe h1,
    .menu-fixe .h1menu,
    .menu-fixe .title h1 {
        width: 25%;
    }
}

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

    .menu-fixe h1,
    .menu-fixe .h1menu,
    .menu-fixe .title h1 {
        width: 20%;
    }
}

/*.menu-fixe .logo a img {
    width: 56px;
    height:62px;
}*/

.menu-fixe .title .buttons {
    margin-top: 1.125em;
}

.menu-fixe h1 {
    padding-top: 0.34em;
    font-size: 11px;
}

.title .title-wrap .buttons .form-menu {
    margin-top: -4px;
}

.title .buttons .candidature

/*, .title .buttons nav */
    {
    margin-top: -4.5px;
}




/*==========================================================================================================================================================================
                                         RESPONSIVE DESIGN
============================================================================================================================================================================*/

/*============================ général =======================*/

@media only screen and (min-device-width : 320px) and (max-device-width : 1023px) {

    .allContents {
        width: 100%;
    }


    .titresHome,
    .titresHomeInfo,
    .presentation,
    .potentiel,
    .profilsMBA,
    .chiffresCles,
    .secteurAvenir,
    .actualites,
    .actualites .suivezNous,
    .temoignages,
    .carriere,
    .replay .contentReplay,
    .carouselVideo,
    .formations .formt {
        width: 100%;
    }


    .titresHomeBio,
    .titresHomeEnergie,
    .titresLeftHomeInfo,
    .titresRightHomeInfo {
        width: 100%;
    }

    .chiffresCles h3,
    .presentation h3,
    .potentiel h3,
    .secteurAvenir h3,
    .secteurAvenir .intro,
    .actualites h3,
    .temoignages h3,
    .carriere h3,
    .carriere h4,
    .profilsMBA h3,
    .formations h3 {
        margin-left: 15px;
    }

    .titresLeftHomeInfo,
    .titresRightHomeInfo {
        width: 90%;
    }

    .secteurAvenir .blocLeftHome,
    .secteurAvenir .blocRightHome {
        width: 42%;
    }

    .contactJPO .jpo,
    .contactJPO .contact {
        width: 100%;
    }

    .actualites .actus {
        width: 90%;
        margin: 0 5%;
    }

    .carriere .blocLeftHome,
    .carriere .blocRightHome {
        height: 340px;
        width: 43%;
    }

    .carriereEnergie .blocLeftHome,
    .carriereEnergie .blocRightHome {
        height: auto !important;
        width: 100%;
    }

    .chiffresCles ul li {
        margin-bottom: 20px;
    }

    .formations .blocLeftHome,
    .formations .blocRightHome {
        width: 45%;
        height: auto;
    }

    .carriereEnergie .blocRightHome p {
        margin-left: 15px;
    }

    .potentiel img {
        width: 100%;
        height: auto;
    }

    .menu-fixe h1 {
        font-size: 11px;
    }
}


/*================================ iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {


    .profilHeader {
        width: 100%;
    }

    .profilHeader .pHeader {
        margin-left: 80px;
    }

    .menu-fixe h1 {
        font-size: 11px;
    }

    /*.buttons nav {
        margin-left: 45px;
    }*/

    h2,
    h3 {
        font-size: 3.4em;
    }

    .titresLeftHomeInfo h2,
    .titresRightHomeInfo h2 {
        font-size: 2.6em;
        padding: 22px 10px 28px 142px;
    }


    .titresLeftHomeInfo h2::before {
        left: 14px;
        top: 18px;
    }

    .titresRightHomeInfo h2::after {
        right: 15px;
        top: 13px;
    }

    .profilHeader .profils {
        margin: 10px 15px;
    }

    .profils .profilGestion a,
    .profils .profilTic a,
    .profils .profilPro a {
        height: 115px;
    }

    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle,
    .profils .profilPro .ptitle {
        font-size: 1.8em;
    }

    .profils .profilGestion p:nth-child(2),
    .profils .profilTic p:nth-child(2),
    .profils .profilPro p:nth-child(2) {
        margin: 5px 5px 20px;
    }

    .contactJPO .jpo,
    .contactJPO .contact {
        width: 100%;
    }

    .contact .contactContent {
        width: 460px;
        margin: auto;
        float: none;
    }

    .contactContent table {
        margin-right: 0;
    }

    .jpo .jpoContent {
        margin: auto;
        width: 490px;
    }

    .jpoContent h4::before {
        left: 30px;
    }

    .jpoContent h4 {
        margin: 28px 0 5px 200px;
    }

    .secteurAvenir .intro {
        margin: 10px 0 30px 15px;
    }

    .profilsMBA .blocLeftHome,
    .profilsMBA .blocRightHome {
        width: 45%;
        height: 1000px;
    }

    .profilsMBA .blocLeftHome {
        /*margin-left: 25px;*/
    }

    .potentiel .double-competence figure img {
        width: 100%;
        height: auto;
    }

    .potentiel figure {
        width: 80%;
        height: auto;
    }

    .potentiel aside {
        left: 45.6%;
        top: 60%;
    }

    .potentiel #asideInfo {
        top: 52.5%;
        left: 46.7%;
    }

    .potentiel #asideEnergie {
        top: 52.5%;
        left: 46.5%;
    }

    .potentiel #asideBio {
        top: 52.5%;
        left: 46.5%;
    }

    .potentiel table {
        margin: 0 2.5%;
        width: 95%;
    }

    .formations .blocLeftHome,
    .formations .blocRightHome {
        width: 45%;
        height: auto;
    }

    .formations .blocLeftHome {
        margin: 0 33px 0 0;
    }

    .formations p {
        margin-left: 20px;
    }

    .carriereBio .blocLeftHome,
    .carriereBio .blocRightHome

    /*, .carriereEnergie .blocLeftHome, .carriereEnergie .blocRightHome, .carriereInfo .blocLeftHome, .carriereInfo .blocRightHome*/
        {
        width: 100%;
        height: auto !important;
    }

    .carriereBio .blocRightHome ul li,
    .carriereEnergie .blocRightHome ul li,
    .carriereInfo .blocHome ul li {
        margin: 0 0 20px 20px;
    }

    .secteurAvenir .blocLeftHome,
    .secteurAvenir .blocRightHome {
        height: 580px;
        /*margin: 40px 5% 0;*/
    }

    .secteurAvenir .blocLeftHome {
        margin: 48px 48px 0 38px;
    }

    .secteurAvenir .tic {
        margin: 0 48px 0 38px;
    }

    .suivezNous .socialMedia {
        width: 310px;
        margin: 0 auto 40px;
    }

    .fcbk {
        float: left;
        height: 310px;
        margin: 16px 45px 0 5%;
        width: 40%;
    }

    .StmTweet {
        float: left;
        height: 310px;
        width: 45%;
    }

    .temoignages .temoignage-3cols {
        margin-right: 0;
        margin-left: 46px;
    }

    .carriere .blocLeftHome,
    .carriere .blocRightHome {
        height: 340px;
    }

    .carriere .blocLeftHome {
        margin: 40px 20px 0 40px;
    }

    .carriere .tic {
        margin: 0 20px 0 40px;
    }

    .carriereBio h4,
    .carriereEnergie h4,
    .carriereInfo h4 {
        font-size: 2em;
    }

    .carriereBio .blocRightHome p,
    .carriereEnergie .blocRightHome p,
    .carriereInfo .blocHome p {
        margin-left: 15px;
    }

    .carriereInfo .blocHome ul li {
        margin-bottom: 20px;
        margin-left: 20px;
    }

    .carriereBio .more,
    .carriereEnergie .more,
    .carriereInfo .more {
        margin-left: 15px;
    }

    .replay h3 {
        width: 95%;
    }

    #slideshow-carousel {
        display: none;
    }

    .carouselVideo .moreVideo {
        margin: 15px 35px 15px 62%;
    }

    #slideshow-main {
        margin: 3px 0px;
        width: 100%;
    }

    #slideshow-main ul,
    #slideshow-main li {
        width: 100%;
    }

    #slideshow-main li iframe {
        width: 94%;
    }

    #slideshow-main li .content {
        width: 98%;
        height: auto;
    }
}




@media only screen and (min-device-width : 640px) and (max-device-width : 767px) {

    header.MbaDigi {
        background: rgba(0, 0, 0, 0) url("/Content/images/design/bg/bg-header-ionis-stm-ecole-management-digital.jpg") no-repeat scroll 58% center;
    }

    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle {
        font-size: 1.45em;
    }

    h2,
    h3 {
        font-size: 3.4em;
    }

    .menu-fixe h1 {
        font-size: 11px;
    }

    .titresLeftHomeInfo h2,
    .titresRightHomeInfo h2 {
        font-size: 2.2em;
    }

    .titresRightHomeInfo h2 {
        padding: 14px 115px 16px 0;
    }

    .titresLeftHomeInfo h2 {
        padding: 16px 10px 16px 115px;
    }

    .titresLeftHomeInfo h2::before {
        top: 18px;
        left: 14px;
    }

    .titresRightHomeInfo h2::after {
        right: 14px;
        top: 12px;
    }

    .titresLeftHomeInfo h2 {
        padding: 31px 10px 31px 135px;
    }

    .profilsMBA .blocLeftHome,
    .profilsMBA .blocRightHome {
        width: 90%;
        height: auto;
        margin: 0 5% 20px;
        padding-bottom: 20px;
    }

    .potentiel table {
        width: 95%;
        margin: 0 2.5%;
    }

    .potentiel aside {
        top: 52%;
        left: 44.5%;
    }

    .potentiel #asideInfo {
        top: 49%;
        left: 45.6%;
    }

    .potentiel #asideEnergie {
        top: 51%;
        left: 45.5%;
    }

    .potentiel #asideBio {
        top: 51%;
        left: 45.5%;
    }

    .formations .blocLeftHome,
    .formations .blocRightHome {
        width: 98%;
        height: auto;
        padding-right: 48px;
    }

    .formations .blocLeftHome {
        margin: 0 15px 0 0;
        border: none;
    }

    .formations p {
        margin-left: 20px;
    }

    .formations .more {
        right: 48px;
    }

    .carriereBio .blocLeftHome,
    .carriereBio .blocRightHome

    /*, .carriereEnergie .blocLeftHome, .carriereEnergie .blocRightHome, .carriereInfo .blocLeftHome, .carriereInfo .blocRightHome*/
        {
        width: 100%;
        height: auto !important;
    }

    .carriereBio .blocRightHome ul li,
    .carriereEnergie .blocRightHome ul li,
    .carriereInfo .blocHome ul li {
        margin: 0 0 20px 20px;
    }

    .carriereBio .blocRightHome p,
    .carriereEnergie .blocRightHome p,
    .carriereInfo .blocHome p {
        margin-left: 15px;
    }

    .secteurAvenir .blocLeftHome,
    .secteurAvenir .blocRightHome {
        height: 640px;
    }

    .actualites .smallNews {
        width: 46%;
    }

    .actualites .actus .moreActus {
        margin-left: 36%;
    }

    .secteurAvenir .blocLeftHome {
        margin: 48px 48px 0 25px;
    }

    .secteurAvenir .tic {
        margin: 0px 48px 0 25px;
    }

    .temoignages .temoignage-3cols,
    .temoignages .temoignage-3cols.lastchild {
        margin: 30px auto;
        float: none;
    }

    .carriere h5 {
        font-size: 1.2em;
    }

    .carriere .blocLeftHome,
    .carriere .blocRightHome {
        height: 370px;
    }

    .carriere .blocLeftHome {
        margin: 40px 20px 0 30px;
    }

    .carriere .tic {
        margin: 0 20px 0 30px;
    }

    .carriereInfo .blocHome ul li {
        margin: 0 20px 20px;
    }

    .carriereBio .more,
    .carriereEnergie .more,
    .carriereInfo .more {
        margin-left: 15px;
    }

    /*.chiffresCles ul {
        margin: 0 auto;
        padding-left: 15px;
    }*/
    .suivezNous .socialMedia {
        margin: 0 15% 40px;
    }

    .fcbk {
        margin: 0 auto;
    }

    .StmTweet {
        margin: 30px 26.6%;
    }

    .replay h3 {
        width: 95%;
        line-height: 1.2em;
    }

    #slideshow-carousel {
        display: none;
    }

    .carouselVideo .moreVideo {
        margin: 15px 35px 15px 52%;
    }

    #slideshow-main {
        margin: 3px 0px;
        width: 100%;
    }

    #slideshow-main ul,
    #slideshow-main li {
        width: 100%;
    }

    #slideshow-main li iframe {
        width: 94%;
    }

    #slideshow-main li .content {
        width: 98%;
        height: auto;
    }
}



@media (max-width : 990px) {

    .profils .profilGestion,
    .profils .profilTic,
    .profils .profilPro {
        width: 100%;
    }

    .container-h2 {
        margin: 25px auto;
    }

    header .MbaDigi {
        background: rgba(0, 0, 0, 0) url("/Content/images/design/bg/bg-header-ionis-stm-ecole-management-digital.jpg") no-repeat scroll 58% center;
    }

    .profilHeader {
        margin: 230px auto 10px;
    }

    .profilHeader .pHeader {
        margin-left: auto;
        font-size: 0.9em;
        height: 75px;
    }

    .MbaDigi .titresLeftHomeInfo {
        width: 100%;
    }

    .titresLeftHomeInfo h2,
    .titresRightHomeInfo h2 {
        font-size: 2em;
    }

    .titresLeftHomeInfo .more,
    .titresRightHomeInfo .more {
        left: 40%;
    }


    .Cercle.HomeInfo {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }


    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle {
        font-size: 1.8em;
    }

    .profils .profilGestion,
    .profils .profilTic,
    .profils .profilPro {
        margin-bottom: 10px;
        width: 100%;
    }

    .profilHeader .profils {
        margin: 10px;
    }

    .titresHomeBio h2 {
        width: 90%;
    }

    .titresHomeBio h2,
    .titresHomeEnergie h2 {
        font-size: 2.8em;
    }

    .titresHomeEnergie h2 {
        padding-top: 21px;
        padding-bottom: 21px;
    }

    .titresHomeEnergie h2::before {
        top: 12px;
        left: 14px;
    }


    .profilsMBA .blocLeftHome.MbaDigi ul li a {
        font-size: 1.3em;
    }

    .contact .contactContent {
        width: 90%;
        margin: 0 auto;
        float: none;
    }

    .jpo .jpoContent {
        width: 90%;
    }

    .jpoContent h3,
    .jpoContent h4,
    .jpoContent .no-date,
    .jpoContent h5 {
        font-size: 2.3em;
    }

    h2,
    h3 {
        font-size: 3.4em;
    }

    .profilsMBA .blocLeftHome,
    .profilsMBA .blocRightHome {
        width: 90%;
        height: auto;
        margin: 0 auto 20px;
        padding-bottom: 20px;
    }

    .secteurAvenir .blocLeftHome,
    .secteurAvenir .blocRightHome {
        width: 90%;
        margin: 0px 5% 48px;
        height: auto;
        padding-bottom: 50px;
    }

    .potentiel table {
        margin: 0 2.5%;
        width: 95%;
    }

    .potentiel aside {
        left: 43%;
        top: 57%;
    }

    .secteurAvenir,
    .actualites {
        margin: 0 auto;
    }

    .actualites .smallNews {
        margin: 30px auto !important;
        float: none;
        width: 90%;
    }

    .actualites .actus .moreActus {
        margin: 15px 20px 15px 2%;
    }

    .suivezNous .socialMedia {
        margin: 0 15% 40px;
    }

    .formations .blocLeftHome,
    .formations .blocRightHome {
        width: 98%;
        height: auto;
        padding-right: 20px;
    }

    .formations .blocLeftHome {
        margin: 0 15px 0 0;
        border: none;
    }

    .formations p {
        margin-left: 20px;
    }

    .formations .more,
    .formations .blocLeftHome .more {
        right: 20px;
    }

    .carriere .blocLeftHome,
    .carriere .blocRightHome {
        width: 90%;
        height: 270px;
        margin: 0 5% 40px;
    }

    .carriere h5 {
        font-size: 1.2em;
    }

    .carriereBio .blocRightHome p,
    .carriereEnergie .blocRightHome p,
    .carriereInfo .blocHome p {
        margin-left: 15px;
    }

    .carriereInfo .blocHome ul li {
        margin: 0 20px 20px;
    }

    .carriereBio .more,
    .carriereEnergie .more,
    .carriereInfo .more {
        margin-left: 15px;
        font-size: 1.15em;
        width: auto;
    }

    .carriereBio .more::after,
    .carriereEnergie .more::after,
    .carriereInfo .more::after {
        right: 15px;
    }

    .fcbk {
        margin: 0 auto;
    }

    .StmTweet {
        margin: 30px 20%;
    }

    .temoignages .temoignage-3cols,
    .temoignages .temoignage-3cols.lastchild {
        margin: 30px auto;
        float: none;
    }

    /*.replay {
        display: none;
    }*/
    .replay h3 {
        width: 95%;
        line-height: 1.2em;
    }

    #slideshow-carousel {
        display: none;
    }

    .carouselVideo .moreVideo {
        margin: 15px 35px 15px 2%;
    }

    .carouselVideo .moreVideo::after {
        right: 0;
        left: 205px;
    }

    #slideshow-main {
        margin: 3px 0px;
        width: 100%;
    }

    #slideshow-main ul,
    #slideshow-main li {
        width: 100%;
    }

    #slideshow-main li iframe {
        width: 94%;
    }

    #slideshow-main li .content {
        width: 98%;
        height: auto;
    }

    .col2 {
        width: 48%;
    }
}



@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    header {
        background: url("/Content/images/design/bg/bg-header-ionis-stm-ecole-gestion-technique-management.jpg") no-repeat scroll 29.5% center;
    }

    header.homeInformatique {
        background: url("/Content/images/design/bg/bg-header-ionis-stm-ecole-informatique-management.jpg") no-repeat scroll 54% center;
    }

    header.homeBio {
        background: url("/Content/images/design/bg/bg-header-ionisstm-ecole-biologie-management.jpg") no-repeat scroll 40% center;
    }

    header.homeEnergie {
        background: url("/Content/images/design/bg/bg-header-ionisstm-ecole-energie-management.jpg") no-repeat scroll 63% center;
    }

    .titresLeftHomeInfo {
        width: 85%;
        border-bottom-left-radius: 55px;
        border-top-left-radius: 55px;
    }

    .titresRightHomeInfo {
        width: 85%;
    }

    .titresLeftHomeInfo h2 {
        font-size: 1.4em;
        padding: 29px 5px 29px 110px;
    }

    .titresRightHomeInfo h2 {
        font-size: 1.4em;
        padding: 26px 110px 26px 0;
    }

    .titresLeftHomeInfo h2::before {
        left: 12px;
        top: 16px;
    }

    .titresRightHomeInfo h2::after {
        right: 10px;
        top: 9px;
    }

    .titresLeftHomeInfo .more {
        left: 24%;
    }

    .titresRightHomeInfo .more {
        left: 14%;
        padding-top: 10px;
    }

    .titresRightHomeInfo .more::after {
        top: 8px;
    }

    .Cercle.MbaDigi {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .mbaHeaderBio,
    .mbaHeaderEnergie {
        margin: 20px auto;
    }

    .chiffresHeader {
        width: 200px;
        margin: -50px auto 10px;
    }

    .chiffresHeader h2,
    .chiffresHeader .mbaHeader {
        width: 100%;
    }

    .chiffresHeader h2 {
        border-right: none;
        border-bottom: 1px solid #fff;
    }


    .profilsMBA p,
    .profilsMBA ul {
        margin: 5px 15px;
    }

    .profilsMBA .blocLeftHome.MbaDigi ul li a {
        font-size: 1em;
    }

    .profilsMBA .blocLeftHome.MbaDigi ul li {
        background: rgba(0, 0, 0, 0) url("/Content/images/design/black-arrow-li.png") no-repeat scroll 0 8px;
        padding-left: 25px;
    }

    .contact .contactContent {
        width: 95%;
    }

    .contactContent table {
        margin-right: 0;
    }

    .contactContent table .tdDocu a::before,
    .contactContent table .tdCand a::before,
    .contactContent table .tdTel a::before,
    .contactContent table .tdEntret a::before {
        display: none;
    }

    .contactContent table .tdDocu a,
    .contactContent table .tdCand a,
    .contactContent table .tdTel a,
    .contactContent table .tdEntret a {
        margin: 15px;
    }

    .potentiel table tr:first-child td:nth-child(2),
    .potentiel table tr:nth-child(2) td:nth-child(2) {
        padding-left: 15px;
    }

    .jpoContent h4::before {
        left: 20px;
        /*top: 120px;*/
    }

    .jpoContent h4 {
        margin: 28px 0 5px 0px;
        font-size: 1.5em;
    }

    .jpoContent h3,
    .jpoContent h4,
    .jpoContent .no-date {
        font-size: 2em;
    }

    .jpoContent h5 {
        font-size: 1.6em;
    }

    .actualites .suivezNous {
        display: none;
    }

    /*.suivezNous .socialMedia {
        margin: 0 4% 40px;
    }*/

    .StmTweet {
        margin: 30px 4%;
        width: 298px;
    }

    .carriere .blocLeftHome,
    .carriere .blocRightHome {
        height: auto;
        padding-bottom: 40px;
    }

    .replay h3 {
        width: 95%;
        line-height: 1.2em;
    }

    .carouselVideo .moreVideo {
        margin: 15px 35px 15px 2%;
    }

    .carouselVideo .moreVideo::after {
        right: 0;
        left: 205px;
    }

    #slideshow-main {
        margin: 3px 0px;
        /*margin: 3px 15px;*/
        width: 100%;
    }

    #slideshow-main ul,
    #slideshow-main li {
        width: 100%;
    }

    #slideshow-main li iframe {
        width: 94%;
    }

    #slideshow-main li .content {
        width: 98%;
        height: auto;
    }

    .hidebr {
        display: inline-block;
    }

    /*--------------Doublez votre potentiel------------- */

    .potentiel .double-competence,
    .potentiel div.reorientez,
    .potentiel div.differenciez,
    .potentiel div.boostez {
        height: auto
            /*305px*/
        ;
        min-height: 306px;
        padding-top: 10px;
        vertical-align: top;
        position: relative;
        width: 90%;
        float: left;
        border-bottom: 1px solid #4d5051;
        padding-left: 15px;
        margin: 0 20px;
    }

    .potentiel div.reorientez,
    .potentiel div.boostez {
        border-left: 0px solid #4d5051;
    }

    .potentiel div.differenciez,
    .potentiel div.boostez {
        border-top: 0px solid #4d5051;
        padding-top: 10px;
        vertical-align: top;
    }

    .potentiel div.reorientez,
    .potentiel div.boostez {
        padding-left: 15px;
    }

    .potentiel aside {
        display: none;
    }
}

/*@media (max-device-width : 820px){
    .Cercle{
        width:400px;
        height:780px;
    }
    .blocManaDig{
        clear:both;
    }
}*/

@media only screen and (min-device-width : 320px) and (max-device-width : 360px) {

    .MbaDigi .titresLeftHomeInfo h2 {
        padding: 45px 0 50px 135px;
        width: 72%;
    }

    .titresLeftHomeInfo h2 {
        padding: 45px 0 50px 135px;
        width: 90%;
    }

    .titresRightHomeInfo h2 {
        padding: 2px 110px 4px 0;
    }

    .titresHomeBio h2 {
        width: 98%;
        font-size: 2.1em;
        padding: 5px 0 10px 135px;
    }

    .titresHomeEnergie h2 {
        width: 98%;
        font-size: 2.1em;
        padding: 32px 0 32px 135px;
    }

    .titresHomeEnergie h2::before {
        top: 12px;
        left: 12px;
    }

    .Cercle.HomeInfo {
        height: 420px;
        width: 320px;
    }

    .Cercle.HomeInfo ul {
        padding-right: 35px;
        font-size: 15px;
        font-weight: 300;
    }

    .potentiel div p {
        font-size: 1.20em;
    }

    .potentiel aside {
        left: 40%;
        top: 56%;
    }

    .formations .more {
        width: 285px;
        font-size: 1.4em;
    }

    .formations.MbaGestio .blocRightHome .more,
    .formations.MbaDigi .blocRightHome .more {
        width: 290px;
        font-size: 1.4em;
    }

    .formations.MbaGestio .more {
        width: 290px;
        font-size: 1.3em;
    }

    .carouselVideo .moreVideo {
        margin: 25px 35px 15px 18%;
        font-size: 1.4em;
    }
}

/*======================================================================================================*/
/*============ Cas particuliers : Titre MBA Home & Blocs chiffres clés Home ============================*/

@media only screen and (min-width : 1920px) {

    .titresHomeInfo,
    .titresHome {
        left: 25%;
    }
}

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

    .titresHomeInfo,
    .titresHome {
        left: 23%;
    }
}

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

    .titresHomeInfo,
    .titresHome {
        left: 18%;
    }
}

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

    .titresHomeInfo,
    .titresHome {
        left: 14%;
    }
}

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

    .titresHomeInfo,
    .titresHome {
        left: 12%;
    }
}

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

    .titresHomeInfo,
    .titresHome {
        left: 10%;
    }
}

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

    header {
        height: 770px;
    }

    .chiffresHeader {
        padding-top: 75px;
    }

    .chiffresHeader .mbaHeader .TexteNiveau {
        margin-top: 25px;
    }

    .titresHomeInfo,
    .titresHome {
        left: 0%;
    }

    .profilHeader {
        width: 100%;
        margin: 225px auto 10px;
    }

    .profilHeader .profils {
        margin: 10px 15px;
    }

    .profils .profilGestion a,
    .profils .profilTic a,
    .profils .profilPro a {
        height: 110px;
    }

    .contact .contactContent {
        width: 476px;
    }

    .jpoContent h4,
    .jpoContent h5 {
        font-size: 2.4em;
    }
}


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

    .titresLeftHomeInfo h2 {
        display: inline-block;
    }

    .titresLeftHomeInfo .more {
        left: 35%;
    }

    .chiffresCles ul {
        margin: 0 7%;
    }

    .carriereInfo .blocHome ul {
        margin: 0 20%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 20% 20px;
    }

    #slideshow-main li iframe {
        width: 892px;
        height: 510px;
        margin: 0 35px;
    }

    #slideshow-carousel {
        display: none;
    }

    .contact .contactContent {
        width: 456px;
    }

    .jpoContent h4 {
        font-size: 2em;
    }

    .jpo .jpoContent {
        width: 100%;
    }
}

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

    .menu-fixe .title .buttons {
        /*position: absolute;*/
        top: 0;
        right: 2%;
    }

    .jpo {
        padding: 0 2% 0 0;
    }

    .jpo .jpoContent {
        width: 100%;
    }

    .jpoContent h3 {
        font-size: 2em;
    }

    .jpoContent h4,
    .jpoContent h5 {
        font-size: 2em;
    }

    .jpoContent h4::before {
        top: 50px;
    }

    .jpoContent a.more {
        bottom: 15px;
        right: 0;
    }

    .profilHeader .profils {
        margin: 10px 15px;
    }

    .profils .profilGestion a,
    .profils .profilTic a,
    .profils .profilPro a {
        height: 125px;
        padding: 0 10px;
    }

    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle,
    .profils .profilPro .ptitle {
        font-size: 1.6em;
    }

    .chiffresHeader {
        margin: 30px auto 10px;
    }

    .chiffresHeader h2,
    .chiffresHeader .mbaHeader {
        width: 50%;
    }


    .chiffresCles ul {
        margin: 0 7%;
    }

    .carriereInfo .blocHome ul {
        margin: 0 20%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 20% 20px;
    }

    #slideshow-main li iframe {
        width: 892px;
        height: 510px;
        margin: 0 30px;
    }

    .demandes {
        width: 99%;
    }

    footer .apropos,
    footer .ecoles,
    footer .etablissement {
        width: 90%;
        margin: 0 15px;
    }
}

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

    .profilHeader {
        margin: 200px auto 10px;
    }

    .chiffresCles ul {
        margin: 0 11%;
    }

    .carriereInfo .blocHome ul {
        margin: 0 16%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 16% 20px;
    }

    #slideshow-main li iframe {
        width: 724px;
        height: 416px;
        margin: 0 35px;
    }

    .carriere h4 {
        line-height: 1.2em;
    }

    .Cercle {
        /*-webkit-border-radius: 50%;
    border-radius: 50%;*/
        width: 100%;
        height: auto;
        color: #fff;
        /*text-align: center;*/
    }

    .Cercle h2 {
        font-size: 30px;
    }

    .Cercle.HomeInfo {
        padding-bottom: 0;
        margin-top: -30px;
    }

    .blocManaDig {
        clear: both;
    }

    .titresLeftHomeInfo {
        padding-bottom: 0;
        margin: 20px 0 10px 0;
    }

    .titresLeftHomeInfo h2 {
        padding: 8px 30px 0px 50px;
    }

    .contactJPO {
        margin-top: 0px;
    }

    .titresLeftHomeInfo h2:before {
        /*background: url(/Content/images/design/icon/icon-info.png) no-repeat scroll 15px 24px #f39700;
        content: "";
        height: 91px;
        left: 18px;
        position: absolute;
        top: 25px;
        width: 90px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;*/
        display: none;
    }

    .MbaDigi .titresLeftHomeInfo h2::before {
        display: none;
    }

    .contact .contactContent {
        width: 360px;
    }

    .contactContent h3 {
        font-size: 2em;
    }

    .contactContent table td a {
        font-size: 10px;
    }

}

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

    .chiffresHeader h2,
    .chiffresHeader .mbaHeader {
        width: 50%;
    }

    .profilHeader {
        margin: 280px auto 10px;
    }

    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle,
    .profils .profilPro .ptitle {
        font-size: 1.45em;
        line-height: 0.9em;
    }

    .chiffresCles ul {
        margin: 0 9%;
    }

    .carriereInfo .blocHome ul {
        margin: 0 14%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 14% 20px;
    }

    #slideshow-main li iframe {
        width: 694px;
        height: 430px;
        margin: 0 35px;
    }
}

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

    .chiffresHeader {
        width: 640px;
        margin: 30px auto 10px;
    }

    .chiffresHeader h2,
    .chiffresHeader .h-secteurs {
        font-size: 1.2em;
    }

    .chiffresHeader .mbaHeader .TexteNiveau {
        font-size: 1.2em;
        margin-top: 19px;
    }

    .contact .contactContent {
        width: 350px;
    }

    .contactContent h3 {
        font-size: 1.8em;
        margin-left: 10px;
    }

    .jpoContent h3 {
        font-size: 1.8em;
    }
}

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

    .chiffresHeader {
        width: 640px;
        margin: 30px auto 10px;
    }
}

@media only screen and (max-width : 640px) {
    header {
        height: 710px;
    }

    .chiffresHeader {
        width: 480px;
        margin: 50px auto 10px;
    }

    .chiffresHeader h2,
    .chiffresHeader .mbaHeader {
        width: 50%;
    }

    .chiffresHeader h2 {
        padding: 0 20px 0 0;
    }

    .chiffresHeader .mbaHeader {
        padding: 0 0 0 20px;
    }

    .chiffresHeader h2,
    .chiffresHeader .h-secteurs {
        font-size: 0.9em;
        line-height: 1.6em;
    }

    .chiffresHeader .h-secteurs {
        margin: 10px 0 0;
    }

    .chiffresHeader .mbaHeader p {
        font-size: 0.65em;
        font-weight: 400;
        text-align: center;
        line-height: 1.4em;
    }

    .chiffresHeader .mbaHeader .TexteNiveau {
        font-size: 0.9em;
        margin-top: 15px;
        text-align: center;
    }

    .profilHeader {
        margin: 200px auto 10px;
    }

    .profilHeader .profils {
        margin: 10px 10px;
    }

    .profils .profilGestion,
    .profils .profilTic,
    .profils .profilPro {
        width: 32%;
    }

    .profils .profilGestion a,
    .profils .profilTic a,
    .profils .profilPro a {
        height: 120px;
    }

    .contactJPO .contact,
    .contact .contactContent,
    .jpo .jpoContent,
    .contactJPO .jpo {
        width: 100%;
    }

    .contactContent table td a {
        font-size: 14px;
    }

    /* JPO */
    .jpoContent h4 {
        font-size: 1.5em;
    }

    .jpoContent h5 {
        font-size: 2em;
    }

    .jpoContent a.more {
        bottom: 15px;
        right: 15px;
    }

    .chiffresCles ul {
        margin: 0 17%;
    }

    .carriereInfo .blocHome ul {
        margin: 0 5%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 8% 20px;
    }

    #slideshow-main li iframe {
        width: 568px;
        height: 360px;
        margin: 0 35px;
    }
}

@media only screen and (min-width: 640px) and (max-width: 670px) {

    .profils .profilGestion,
    .profils .profilTic,
    .profils .profilPro {
        width: 32%;
    }
}

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

    .profils .profilGestion a,
    .profils .profilTic a,
    .profils .profilPro a {
        height: 120px;
    }
}

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

    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle,
    .profils .profilPro .ptitle {
        font-size: 1em;
    }

    .potentiel #asideInfo {
        top: 49.5%;
        left: 44.5%;
    }

    .potentiel #asideEnergie {
        top: 50%;
        left: 44.5%;
    }

    .potentiel #asideBio {
        top: 50%;
        left: 44.5%;
    }
}

@media only screen and (max-width : 480px) {
    header {
        background: url("/Content/images/design/bg/bg-header-ionis-stm-ecole-gestion-technique-management.jpg") no-repeat scroll 40% bottom;
    }

    h3 {
        font-size: 3em;
    }

    .titresLeftHomeInfo h2 {
        padding: 46px 10px -16px 135px;
    }

    .titresRightHomeInfo h2 {
        padding: 26px 110px 28px 0;
    }

    .chiffresHeader {
        width: 200px;
        margin: 20px auto 10px;
    }

    .chiffresHeader h2 {
        text-align: left;
        padding: 0 0 10px 8px;
    }

    .chiffresHeader h2.h2-chiffres {
        font-weight: 300;
        font-size: 1.4em;
    }

    .chiffresHeader .mbaHeader {
        padding-left: 10px;
    }

    .chiffresHeader .mbaHeader p {
        font-weight: 400;
    }

    .profilHeader {
        margin: 200px auto 10px;
    }

    .chiffresHeader h2,
    .chiffresHeader .mbaHeader {
        width: 100%;
        text-align: center;
    }

    .chiffresHeader .h-secteurs {
        margin: 0;
    }

    .chiffresCles ul {
        margin: 0 29%;
    }

    .profils .profilGestion,
    .profils .profilTic,
    .profils .profilPro {
        width: 100%;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle,
    .profils .profilPro .ptitle {
        font-size: 0.8em;
    }

    .carriereInfo .blocHome ul {
        margin: 0 20%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 20% 20px;
    }

    .carriereBio .blocRightHome p,
    .carriereEnergie .blocRightHome p

    /*, .carriereInfo .blocHome p*/
        {
        clear: both;
    }

    .carriereBio .blocRightHome ul li,
    .carriereEnergie .blocRightHome ul li

    /*, .carriereInfo .blocHome ul li*/
        {
        margin-bottom: 20px;
    }

    .titresHomeBio h2::before {
        top: 10px;
        left: 10px;
    }

    .titresHomeBio h2 {
        padding: 15px 0 20px 142px;
    }

    .titresHomeEnergie h2 {
        width: 98%;
    }

    #slideshow-main li iframe {
        width: 408px;
        height: 268px;
        margin: 0 35px;
    }

    /* bloc classement Happy At School */
    .actualites .happyIndex {
        margin: 45px 30px 10px;
    }

    .displayJpo {
        padding: 0 10%;
    }

    .jpoContent h4::before {
        display: none;
    }

}

@media only screen and (max-width : 460px) {
    .titresRightHomeInfo h2 {
        padding: 16px 110px 14px 0;
    }
}

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

    header {
        height: 850px;
    }

    .titresHomeBio h2 {
        padding: 30px 0 30px 142px;
        font-size: 2em;
    }

    .titresHomeBio h2::before {
        top: 8px;
        left: 10px;
    }

    .titresHomeEnergie h2 {
        width: 98%;
        padding-bottom: 31px;
        font-size: 2.4em;
    }

    #slideshow-main li iframe {
        width: 340px;
        height: 200px;
        margin: 0 15px;
    }

    .profilHeader {
        margin: 180px auto 10px;
    }
}

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

    /*.titresLeftHomeInfo h2 {
        padding: 45px 10px 43px 135px;
    }*/

    .titresRightHomeInfo h2 {
        padding: 16px 110px 14px 0;
    }

    .actualites .actus .moreActus {
        margin: 15px 20px 18px 2%;
        font-size: 26px;
    }


}

@media only screen and (max-width: 640px) {
    header {
        background: url("/Content/images/design/bg/bg-home-mobile.png") repeat scroll 0 0;
        height: 650px;
        padding-bottom: 20px;
    }
}


@media only screen and (max-width: 990px) {
    header .title {
        background-color: transparent;
    }

    .menu-fixe .title {
        background: #019ee8;
    }

    .fg-button,
    #hierarchy.ui-corner-all {
        background-color: transparent;
    }

    .chiffresHeader {
        width: 70%;
        margin: 0px auto 10px;
    }

    .chiffresHeader h2 span.normalSpan {
        font-weight: 500;
        font-size: 1.2em;
    }

    .chiffresHeader h2,
    .chiffresHeader .h-secteurs {
        font-size: 1em;
        line-height: 1.5em;
        font-weight: 500;
        text-align: center;
    }

    .chiffresHeader h2 span,
    .chiffresHeader .h-secteurs span {
        font-size: 1.7em;
    }

    .chiffresHeader .mbaHeader {
        height: auto;
    }

    .chiffresHeader h2 {
        padding: 0 0 10px 0px;
    }

    .chiffresHeader .showOnMobile {
        display: inline;
        font-size: 25px;
        font-weight: 400;
    }

    .chiffresHeader .hideOnMobile {
        display: none;
    }

    .chiffresHeader .mbaHeader p {
        font-size: 0.7em;
        font-weight: 500;
        line-height: 1.7em;
    }

    .chiffresHeader .mbaHeader p.TexteNiveau {
        display: block;
        text-align: center;
        font-size: 0.9em;
        margin-top: 10px;
        font-weight: 500;
    }

    .profilHeader .pHeader {
        height: auto;
        padding-bottom: 5px;
    }

    .profilHeader {
        margin: 0px auto 10px;
        background-color: #fff;
        width: 350px;
        border-radius: 10px;
    }

    .profils .profilGestion .ptitle,
    .profils .profilTic .ptitle,
    .profils .profilPro .ptitle {
        font-size: 1.2em;
    }

    .profils .profilGestion a,
    .profils .profilTic a,
    .profils .profilPro a {
        height: 75px;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
    }

    /* bloc jpo */
    .displayJpo {
        padding: 0 10%;
    }

    .contactJPO .contact {
        display: none;
    }

    .jpoContent h3 {
        margin: 28px 10% 5px 15%;
        text-align: left;
        padding-left: 20%;
    }

    .apropos .jpo h4 {
        padding: 38px 0 30px;
        font-size: 34px;

    }

    .jpoContent h3::before {
        background: url("/Content/images/design/bg/bg-home-jpo-small.png") no-repeat scroll 0 0;
        content: "";
        height: 75px;
        left: 40px;
        position: absolute;
        top: 0px;
        width: 75px;
    }

    .jpoContent h4::before {
        background: none;

    }


    .contactMobile {
        display: block;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        z-index: 10000;
    }

    .contactMobile p {
        width: 49.6%;
        background-color: #009ee3;
        color: #fff;
        height: 100%;
        margin: 0;
        padding: 5px;
        text-transform: uppercase;
    }

    .contactMobile p a {
        color: #fff;
        position: relative;
        display: block;
        font-size: 13px;
    }

    .contactMobile .downloadDoc {
        float: left;
    }

    .contactMobile .callBack {
        float: right;
    }

    .contactMobile .downloadDoc a:before {
        background: url("/Content/images/design/icon/picto-doc.png") no-repeat scroll 0 0;
        content: "";
        height: 30px;
        left: 10px;
        position: absolute;
        top: 10px;
        width: 20px;
    }

    .contactMobile .callBack a:before {
        background: url("/Content/images/design/icon/picto-appel.png") no-repeat scroll 0 0;
        content: "";
        height: 30px;
        left: 10px;
        position: absolute;
        top: 10px;
        width: 30px;
    }

    .contactMobile .downloadDoc a {
        padding: 9px 0 0 40px;
    }

    .contactMobile .callBack a {
        padding: 9px 0 0 45px;
    }


    /* bloc potentiel */
    .potentiel .double-competence-mobile {
        display: block;
        margin: 10px 20px 40px;
    }

    .potentiel .double-competence-mobile p {
        font-weight: 300;
    }

    .potentiel .double-competence,
    .potentiel .reorientez,
    .potentiel .differenciez,
    .potentiel .boostez {
        display: none;
    }

    h3 {
        font-size: 2.5em;
    }


    /* essai mobile slider chiffres clés  */

    /* * {
    box-sizing: border-box;
    }*/
    .Slide,
    .SlideSA,
    SlideTem {
        display: none;
    }

    .slideContainer {
        max-width: 600px;
        position: relative;
        margin: auto;
    }

    .prevBtn,
    .nextBtn {
        position: absolute;
        top: 35%;
        width: auto;
        padding: 10px 20px;
        background-color: rgba(200, 200, 200, 0.6);
        color: #fff;
        font-weight: bolder;
        font-size: 18px;
    }

    .nextBtn {
        right: 0;
    }

    .Caption {
        color: #fbff09;
        font-weight: bold;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 25px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    .Navdot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #222423;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .selected,
    .Navdot:hover {
        background-color: #419499;
    }

    .prevBtn,
    .nextBtn,
    .Caption {
        font-size: 36px;
    }

    /*fin essai mobile */


    .slideContainer {
        display: block;
    }

    .chiffresCles ul {
        display: none;
    }

    .chiffresCles p {
        display: block;
        width: 190px;
        height: 177px;
        background: url(/Content/images/design/bg/bg-chiffres-cles-home.png) no-repeat 0 0;
        margin: 30px 85px;
        border-bottom: 1px solid #4d5051;
        text-align: center;
    }

    .chiffresCles p a {
        display: block;
        font-family: "Roboto", sans-serif;
        font-size: 18px;
        font-weight: 300;
        line-height: 23px;
        /*margin: 40px 5px;*/
        text-decoration: none;
        color: #222423;
        pointer-events: none;
        padding: 40px 5px;
    }

    .chiffresCles p.small-number a {
        margin: 40px 5px;
    }

    .chiffresCles p:first-child {
        background: url(/Content/images/design/bg/bg-chiffres-cles-home.png) no-repeat -1px 0;
    }

    .chiffresCles p:last-child {
        margin-right: 0px;
    }

    .chiffresCles p .size1,
    .chiffresCles p .size2,
    .chiffresCles p .size3 {
        color: #419499;
    }

    .chiffresCles p .size1 {
        font-size: 65px;
        font-weight: 900;
    }

    .chiffresCles p .size2 {
        font-size: 35px;
        font-weight: 700;
    }

    .chiffresCles p .size3 {
        font-size: 30px;
        font-weight: 100;
    }

    .chiffresCles p .size4 {
        font-size: 35px;
        line-height: 50px;
    }

    /* secteurs d'avenir */

    .block-SA-desktop,
    .temoignagesDesktop {
        display: none;
    }

    .secteurAvenir .blocLeftHome,
    .secteurAvenir .blocRightHome {
        width: 90%;
        margin: 20px 5% 48px;
        height: auto;
        padding-bottom: 80px;
        float: none;
        padding-top: 15px;
    }

    .temoignage-3cols .name {
        padding: 20px 0px 30px;
        border-bottom: none;
    }

    #slideshow-main li iframe {
        border: none;
    }

    #slideshow-main li .content h4 {
        font-size: 16px;
        font-weight: 400;
    }

    #slideshow-main li .content h4 span {
        font-weight: 600;
        font-size: 1.2em;
        padding-bottom: 15px;
    }

    .carouselVideo .moreVideo {
        margin: 25px auto 15px;
        font-size: 1.3em;
        border: 1px solid #419499;
        width: 70%;
        padding: 15px 0;
        text-align: center;
        font-weight: 400;
    }

    .carouselVideo .moreVideo::after {
        background: none;
    }

}



@media (max-width: 475px) {
    .chiffresHeader {
        width: 100%;
        margin: 0px auto 10px;
    }

    .profilHeader {
        max-width: 100%;
    }

    footer .jpo {
        width: 100%;
    }

    .slideContainer .prevBtn,
    .slideContainer .nextBtn,
    .slideContainer.Caption {
        font-size: 25px;
    }

    header {
        height: auto;
        background-size: cover;
    }

    .chiffresHeader h2 {
        text-align: center;
    }

    .meetusJPO .jpo {
        padding: 5px;
    }
}

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

    .titresLeftHomeInfo .more {
        left: 15%;
    }

    .titresLeftHomeInfo h2 {
        padding: 30px 10px 42px 135px;
    }

    .titresRightHomeInfo h2 {
        padding: 10px 110px 12px 0;
    }

    .titresLeftHomeInfo h2::before {
        top: 21px;
    }

    .titresHomeBio h2::before {
        top: 8px;
        left: 8px;
    }

    .titresHomeEnergie h2 {
        font-size: 2.2em;
    }

    .chiffresHeader h2.h2-chiffres {
        font-size: 1.2em;
    }

    .chiffresCles ul {
        margin: 0 23%;
    }

    .carriereInfo .blocHome ul {
        margin: 0 10%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 13% 20px;
    }

    #slideshow-main li iframe {
        width: 328px;
        height: 223px;
        margin: 0 15px;
    }
}

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


    .MbaDigi .titresLeftHomeInfo h2 {
        padding: 45px 0 50px 135px;
        width: 81%;
    }

    .titresLeftHomeInfo h2 {
        padding: 46px 0 50px 135px;
        width: 100%;
    }

    .mbaHeaderBio {
        width: 310px;
        height: 310px;
    }

    .titresHomeEnergie h2 {
        padding: 15px 0 15px 130px;
    }

    .titresLeftHomeInfo .more,
    .titresRightHomeInfo .more {
        left: 5%;
    }

    .chiffresHeader h2.h2-chiffres {
        font-size: 1.1em;
    }

    .chiffresCles ul {
        margin: 0 21%;
    }

    .carriereInfo .blocHome ul {
        margin: 0 6%;
    }

    .carriereBio .blocRightHome ul,
    .carriereEnergie .blocRightHome ul {
        margin: 0 8% 20px;
    }

    .titresHomeBio h2 {
        width: 98%;
        font-size: 1.75em;
        padding: 32px 0 32px 128px;
    }

    .titresHomeBio h2::before {
        top: 6px;
        left: 7px;
    }

    .mbaHeaderBio,
    .mbaHeaderEnergie {
        margin: 20px auto;
    }

    .potentiel aside {
        top: 60%;
        left: 39%;
    }

    .jpoContent h4::before {
        top: 105px;
    }

    .actualites .actus .moreActus {
        margin: 15px 20px 20px 2%;
        font-size: 23px;
    }

    #slideshow-main li iframe {
        width: 288px;
        height: 200px;
        margin: 0 15px;
    }
}
/*============================================================================================
                                        Interactive Form
============================================================================================*/

/* General */

.clearboth { clear: both; }

.story {
    background: #35cbe3;
    display: none;
    left: 0;
    position: fixed;
    top: 50px;
    z-index: 10000;
}

.story * { outline: none; }

.story .cross {
    height: 50px;
    position: fixed;
    right: 40px;
    top: 123px;
    width: 50px;
}

.story .cross:before,
.story .cross:after
{
    background: #FFF;
    content: '';
    display: block;
    height: 50px;
    left: 25px;
    position: absolute;
    top: 0;
    width: 1px;
}

.story .cross:before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.story .cross:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.story .content {
    margin: 0 auto;
    max-width: 950px;
    padding-bottom: 300px;
    width: 100%;
}

.story section,
.story .content .tm-next
{
    display: none;
}

a { text-decoration: none; }

/* Profil */

.story .profile .o,
.story .profile .picto,
.story .profile .choice
{
    display: none;
}

.story .profile {
    height: 235px;
    margin: 0 auto;
    position: relative;
    width: 235px;
}

.story .mec {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat 0 0;
    height: 90px;
    left: 50%;
    margin-left: -37px;
    position: absolute;
    top: -45px;
    width: 74px;
    z-index: 2;
}

.story .profile .o {
    border: 1px dashed #FFF;
    display: block;
    height: 116px;
    left: 59px;
    position: absolute;
    top: 0;
    transition: 10s ease-in-out;
    -webkit-transition: 10s ease-in-out;
    -moz-transition: 10s ease-in-out;
    -o-transition: 10s ease-in-out;
    transform: scale(2);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    width: 116px;
    z-index: 1;
}

.story .choice {
    color: white;
    display: inline-block;
    font-family: 'Roboto';
    font-size: 19px;
    font-weight: 100;
    position: absolute;
    text-align: center;
    top: 55px;
    width: 100%;
}

.story .choice .choix { font-weight: 400; }
.story .choice .choix span { font-weight: 100; }

/* Choix Scientifique ou technique */

.story .choice.scientifique { font-size: 17px; }

.story .profile .picto {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat -74px 0;
    height: 121px;
    width: 119px;
}

.story .profile .picto-gestion {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat -220px 0;
    display: none;
    height: 107px;
    left: 50%;
    margin-left: -62px;
    position: absolute;
    top: 90px;
    width: 124px;
}

.story .profile .rotate {
    display: none;
    height: 121px;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    top: 90px;
    width: 119px;
}

/* Animation échelle cercle profil */

@-webkit-keyframes scaling {
  from {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  to {
    transform: scale(2);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
  }
}

@keyframes scaling {
  from {
    transform: scale(2);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  to {
    transform: scale(2);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
  }
}

.story .scaling {
    -webkit-animation: scaling 0.3s linear;
    -moz-animation: scaling 0.3s linear;
    -ms-animation: scaling 0.3s linear;
    -o-animation: scaling 0.3s linear;
    animation: scaling 0.3s linear;
}

/* Animation échelle picto profil */

@-webkit-keyframes scaling2 {
  from {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

@keyframes scaling2 {
  from {
    transform: scale(1);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
  }

  to {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

.story .scaling2 {
    -webkit-animation: scaling2 0.3s linear;
    -moz-animation: scaling2 0.3s linear;
    -ms-animation: scaling2 0.3s linear;
    -o-animation: scaling2 0.3s linear;
    animation: scaling2 0.3s linear;
}

/* Rotation picto profil */

@-webkit-keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 10s linear infinite;
  -moz-animation: rotating 10s linear infinite;
  -ms-animation: rotating 10s linear infinite;
  -o-animation: rotating 10s linear infinite;
  animation: rotating 10s linear infinite;
}

/* Niveau d'études */

.content .etudes .title span {
    display: inline-block;
    margin-left: 30px;
    position: relative;
}

.content .etudes .title span:before {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat 0 -90px;
    content: '';
    display: block;
    height: 31px;
    left: -60px;
    position: absolute;
    top: 5px;
    width: 44px;
}

.content .etudes .cercle-choix,
.content .etudes .cercle-choix .o,
.content .etudes .opts,
.content .etudes .cercle-choix .picto
{
    display: none;
}

.story .petit-cercle .cercle-choix {
    float: left;
    height: 133px;
    margin-left: 110px;
    position: relative;
    width: 133px;
}

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

.story .etudes .picto {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat 0 -90px;
    bottom: 16px;
    display: block;
    height: 31px;
    left: 50%;
    margin-left: -22px;
    position: absolute;
    width: 44px;
}

.opts.bac ul {
    margin: 0;
    padding: 0;
}

.opts.bac li {
    border: 1px dashed #FFF;
    display: inline-block;
    height: 170px;
    list-style: none;
    margin: 0 6px;
    vertical-align: top;
    width: 170px;
}

.opts.bac li:hover,
.opts.bac li.active
{
    background: #FFF;
    border: 1px solid #FFF;
}

.opts.bac li a {
    color: #FFF;
    display: table;
    font-size: 80px;
    font-weight: 700;
    height: 100%;
    width: 100%;
}

.opts.bac li:hover a,
.opts.bac li.active a
{
    color: #35CBE3 !important;
}

.opts.bac li a span {
    display: table-cell;
    vertical-align: middle;
}

.opts.bac li a:hover { color: #FFF; }
.etudes .cercle-choix { text-align: center; }

@keyframes opacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes opacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

.story .opacity {
    -webkit-animation: opacity 1s linear infinite;
    -moz-animation: opacity 1s linear infinite;
    -ms-animation: opacity 1s linear infinite;
    -o-animation: opacity 1s linear infinite;
    animation: opacity 1s linear infinite;
}

.etudes .choix-multiple,
.etudes .choix-multiple ul,
.etudes .choix-multiple li
{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.etudes .niveau-bac li {
    color: #FFF;
    display: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 25px;
    left: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 39px;
    width: 100%;
}

.etudes .niveau-bac li span { font-weight: 500; }

/* Je suis intéressé par... */

.story .petit-cercle .o {
    border: 1px dashed #FFF;
    height: 130px;
    width: 130px;
}

.story section.interet .cercle-choix .attente-choix { padding-top: 33px; }

.opts.secteur li {
    display: inline-block;
    list-style: none;
    margin-bottom: 5px;
    padding: 0 10px;
    position: relative;
}

.opts.secteur li:last-child { margin-bottom: 0; }

.opts.secteur li:hover:after, .opts.secteur li.active:after{ background-position: 0 -9px; }

.opts.secteur li a:hover, .opts.secteur li .active { color: #FFF; }

.interet .interet-spec { margin: 0; }

.interet .interet-spec li {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat 0 0;
    display: none;
    left: 50%;
    list-style: none;
    position: absolute;
}

.interet .interet-spec .spec1 {
    background-position: -37px -169px;
    height: 79px;
    margin-left: -27px;
    top: 29px;
    width: 52px;
}

.interet .interet-spec .spec2 {
    background-position: 0 -169px;
    height: 79px;
    margin-left: -19px;
    top: 28px;
    width: 37px;
}

.interet .interet-spec .spec3 {
    background-position: -89px -169px;
    height: 79px;
    margin-left: -39px;
    top: 31px;
    width: 76px;
}

.interet .opts .icon {
    background-color: #FFF;
    background-image: url("/Content/images/design/bg/interactive_form/sprite-interactive-form.png");
    background-repeat: no-repeat;
}

.interet .opts li:hover a .icon, .interet .opts li.active a .icon { background-color: #35CBE3; }

.interet .opts .icon.cloud { background-position: -262px -198px; }
.interet .opts li:hover .icon.cloud, .interet .opts li.active .icon.cloud { background-position: -183px -198px; }

.interet .opts .icon.phone { background-position: -244px -124px; }
.interet .opts li:hover .icon.phone, .interet .opts li.active .icon.phone { background-position: -177px -124px; }

.interet .opts .icon.bio { background-position: -393px -126px; }
.interet .opts li:hover .icon.bio, .interet .opts li.active .icon.bio { background-position: -331px -126px; }

.interet .opts .icon.sun { background-position: -425px -197px; }
.interet .opts li:hover .icon.sun, .interet .opts li.active .icon.sun { background-position: -344px -197px; }

.opts.secteur ul {
    margin: 0;
    padding: 0;
}

.opts.secteur li {
    border: 1px dashed #FFF;
    display: inline-block;
    list-style: none;
    margin: 0 6px;
    vertical-align: top;
    width: 300px;
}

.opts.secteur li:hover,
.opts.secteur li.active
{
    border: 1px solid #FFF;
    background: #FFF;
}

.opts.secteur li a {
    color: #FFF;
    display: table;
    font-size: 30px;
    font-weight: 900;
    height: 100%;
    text-align: center;
    width: 100%;
}

.opts.secteur li:hover a,
.opts.secteur li.active a
{
    color: #35CBE3 !important;
}

.opts.secteur li a span.tc {
    display: table-cell;
    padding: 20px;
    vertical-align: middle;
}

.opts.secteur li .icon {
    border-radius: 50%;
    display: inline-block;
    height: 65px;
    margin: 0 3px;
    width: 65px;
}

/* Choix MBA */

.story .mba {
    color: #FFF;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    padding: 30px 0;
    text-align: center;
}

.choix-mba ul {
    display: none;
    margin-bottom: 30px;
}

.choix-mba li { list-style: none; }

.choix-mba li a {
    color: #FFF;
    font-size: 30px;
    font-weight: 100;
    position: relative;
}

.choix-mba li a:hover { color: #34ffff; }
.choix-mba li a:hover:before { background-position: -95px -134px; }

.choix-mba li a:before {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat -65px -134px;
    content: '';
    height: 15px;
    left: -31px;
    position: absolute;
    top: 13px;
    width: 21px;
}

.story .content .mba { display: none; }
.story .last-step { padding-top: 30px; }

.story .encart {
    border-bottom: 1px solid #FFF;
    border-top: 1px solid #FFF;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
}

.story .encart:before,
.story .encart:after
{
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    content: '';
    height: 16px;
    left: 0;
    position: absolute;
    width: 948px;
}

.story .encart:before { top: 0; }
.story .encart:after { bottom: 0; }

/* Autres */

.opts.bac li .active { color: #FFF; }
.story .center { margin: 0 auto; }

.story .title {
    color: #FFF;
    display: none;
    font-size: 30px;
    font-weight: 100;
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
}

.story .title strong { font-weight: 900; }

.story .o {
    border: 1px dashed #FFF;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}
.story .petit-cercle .o {
    border: 1px dashed #FFF;
    height: 130px;
    width: 130px;
}

.story .opts {
    /* border: 1px dashed #FFF; */
    display: none;
    text-align: center;
}

.story .tm-y {
    background: #FFF;
    display: block;
    height: 40px;
    margin: 10px auto;
    width: 1px;
    -webkit-animation: tm-y 0.2s linear;
    -moz-animation: tm-y 0.2s linear;
    -ms-animation: tm-y 0.2s linear;
    -o-animation: tm-y 0.2s linear;
    animation: tm-y 0.2s linear;
}

.story .tm-x {
    background: #FFF;
    display: block;
    float: left;
    height: 1px;
    margin: 68px 10px 0 10px;
    width: 40px;
    -webkit-animation: tm-x 0.2s linear;
    -moz-animation: tm-x 0.2s linear;
    -ms-animation: tm-x 0.2s linear;
    -o-animation: tm-x 0.2s linear;
    animation: tm-x 0.2s linear;
}

/* Animation separation section timeline */

@keyframes tm-y {
  from { height: 0; }
  to { height: 40px; }
}

@-webkit-keyframes tm-y {
  from { height: 0; }
  to { height: 40px; }
}

@keyframes tm-x {
  from { width: 0; }
  to { width: 40px; }
}

@-webkit-keyframes tm-x {
  from { width: 0; }
  to { width: 40px; }
}

.story .tm-next {
    background: url(/Content/images/design/bg/interactive_form/sprite-interactive-form.png) no-repeat 0 -121px;
    display: block;
    height: 47px;
    margin: 30px auto 0;
    width: 44px;
}

.story .cercle-choix .attente-choix {
    color: #FFF;
    font-size: 60px;
    font-weight: 700;
    opacity: 0;
    padding-top: 11px;
    text-align: center;
}
/*CSS MODAL-3*/
.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-perspective body  {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}

.container {
	/*background: #e74c3c;*/
	min-height: 100%;
}

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(143,27,15,0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
    background-color:#fff;
	opacity: 0.5;
	visibility: visible;
}

/* Content styles */
.md-content {
	color: #fff;
	/*background: #363837;*/
	position: relative;
	/*border-radius: 3px;*/
	margin: 0 auto;
}

.md-content h3 {
	margin: 0;
	padding: 0.4em;
	text-align: center;
	font-size: 2.4em;
	font-weight: 300;
	opacity: 0.8;
	background: rgba(0,0,0,0.1);
	border-radius: 3px 3px 0 0;
}

.md-content > div {
	/*padding: 15px 40px 30px;*/
	margin: 0;
	font-weight: 300;
	font-size: 1.15em;
}

.md-content > div p {
	margin: 0;
	padding: 10px 0;
}

.md-content > div ul {
	margin: 0;
	padding: 0 0 30px 20px;
}

.md-content > div ul li {
	padding: 5px 0;
}

.md-content button {
	display: block;
	margin: 0 auto;
	font-size: 0.8em;
}
/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}
/*FIN CSS MODAL*/
a .popUpButton{
    background: -webkit-linear-gradient(right, #9be270, #01ade8);
    padding: 10px 80px;
    border-radius:5px;
    margin-left:auto;
    margin-right:auto;
    box-shadow: 1px 1px 20px #000;
    color:#fff;
    font-weight:bold;

}
a .popUpButton:hover{
    background: #fff;
    padding: 10px 80px;
    border-radius:5px;
    margin-left:auto;
    margin-right:auto;
    box-shadow: 1px 1px 20px #000;
    color:transparent;
    background: -webkit-linear-gradient(right, #9be270, #01ade8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-weight:bold;

}
.blocButton a{
    background-color: white;
    padding: 10px 0px;
    border-radius: 5px;
}
.picto{
    padding: 8px 20px 20px 20px;
    margin-bottom: 26px;
    width: 574px;
    margin-left: auto;
    margin-right: auto;
}

.pictoHat{
    float:left;
    background: url(/Content/images/design/chapeau.png) no-repeat 0px 1px;
    width: 52px;
    height: 45px;
    display: block;

}
.filet{
    float:left;   
    margin-top:20px;
    /*width:70%;
    border-top: 1px solid #9be270;*/
    width: 70%;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, #01ade8, #9be270);
  padding: 0.5px;
}
.pictoPoint{
    float:left;
    background: url(/Content/images/design/points.png) no-repeat 0px 1px;
    width: 52px;
    height: 12px;
    display: block;
    margin-top: 13px;
    margin-left: 20px;
}
.cross{
    background: url(/Content/images/design/cross-pop-up.png) no-repeat 0px 1px;
    width: 52px;
    height: 52px;
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}
a .cross:hover{
    background: url(/Content/images/design/cross-pop-up.png) no-repeat -68px 1px;
    width: 52px;
    height: 52px;
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}
.blocButton{
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 257px;
}
/*VERSION DESKTOP*/
@media screen and (min-width: 580px){
    .popUpDesktop{
        box-shadow: 1px 1px 20px #555;
        padding:50px;
        background-color :#363837;
        opacity: 1;
        font-family: Roboto;
        position:relative;
    }

    .titlePopUp{
        font-family: Roboto;
        color:transparent;
        font-size:56px;
        font-weight:600;
        background: -webkit-linear-gradient(right, #9be270, #01ade8);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

    }
    .titlePopUp-corona {
        font-family: Roboto;
        color: transparent;
        font-size: 30px;
        font-weight: 600;
        color: red;
        padding: 0 10px;
        display: block;
    }
.popUpMobile{
    display:none
}
.picto{
    padding: 8px 20px 20px 20px;
    margin-bottom: 26px;
    width: 574px;
    margin-left: auto;
    margin-right: auto;
}

}
/*VERSION TABLET*/
@media screen and (max-width: 1100px) {
    .filet{
      width:40%;
    }
    .picto{
        width:350px;
    }
}
@media screen and (min-width: 1100px) (max-width: 1220px) {
    .filet{
      width:60%;
    }
    .picto{
        width:450px;
    }
}
/*VERSION MOBILE*/
@media screen and (max-width: 580px){
    .popUpMobile{
        display: block;
        background-color: #363837;
        padding: 80px 20px 60px 20px;
        opacity: 1;
    }

    .popUpDesktop{
        display:none
    }
    .titlePopUp{
        font-family: Roboto;
        letter-spacing: 0px;
        color: transparent;
        font-size: 26px;
        font-weight: 900;
        background: -webkit-linear-gradient(right, #9be270, #01ade8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }
    .picto{
        padding: 26px 0px 10px 0px;
        /* margin-bottom: 26px; */
        width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
    .filet{
        float:left;   
        margin-top:20px;
        /*width:70%;
        border-top: 1px solid #9be270;*/
        width: 54%;
      padding: 1rem;
      position: relative;
      background: linear-gradient(to right, #01ade8, #9be270);
      padding: 0.5px;
    }
    .pictoPoint {
        float: left;
        background: url(/Content/images/design/points.png) no-repeat 0px 1px;
        width: 52px;
        height: 12px;
        display: block;
        margin-top: 13px;
        margin-left: 5px;
    }
    .md-content > div p {
        margin: 0;
        padding: 25px 0;
        width: 225px;
        font-size:23px;
        line-height: 36px;
    }
    .blocButton {
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        width: 227px;
    }
    a .popUpButton {
        padding: 10px 65px;
    }
    a .popUpButton:hover {
        padding: 10px 65px;
    }
}