/* General Demo Style */

/*===============================================
  TABLE OF CONTENT

  A. Text Helpers
  B. Padding Helpers
  C. Margin Helpers
  D. Width Helpers
  E. Height Helpers
  F. Fontt Helpers
  Z. Theme

================================================= */


/*===============================================
  A. Text Helpers
================================================= */
.text-uppercase {
    text-transform: uppercase !important;
  }
  .fw100 {
    font-weight: 100 !important;
  }
  .fw200 {
    font-weight: 200 !important;
  }
  .fw300 {
    font-weight: 300 !important;
  }
  .fw400 {
    font-weight: 400 !important;
  }
  .fw600 {
    font-weight: 600 !important;
  }
  .fw700 {
    font-weight: 700 !important;
  }
  .fs3 {
    font-size: 4px !important;
  }
  .fs4 {
    font-size: 4px !important;
  }
  .fs5 {
    font-size: 5px !important;
  }
  .fs6 {
    font-size: 6px !important;
  }
  .fs7 {
    font-size: 7px !important;
  }
  .fs8 {
    font-size: 8px !important;
  }
  .fs9 {
    font-size: 9px !important;
  }
  .fs10 {
    font-size: 10px !important;
  }
  .fs11 {
    font-size: 11px !important;
  }
  .fs12 {
    font-size: 12px !important;
  }
  .fs13 {
    font-size: 13px !important;
  }
  .fs14 {
    font-size: 14px !important;
  }
  .fs15 {
    font-size: 15px !important;
  }
  .fs16 {
    font-size: 16px !important;
  }
  .fs17 {
    font-size: 17px !important;
  }
  .fs18 {
    font-size: 18px !important;
  }
  .fs20 {
    font-size: 20px !important;
  }
  .fs22 {
    font-size: 22px !important;
  }
  .fs24 {
    font-size: 24px !important;
  }
  .fs26 {
    font-size: 26px !important;
  }
  .fs28 {
    font-size: 28px !important;
  }
  .fs30 {
    font-size: 30px !important;
  }
  .fs35 {
    font-size: 35px !important;
  }
  .fs40 {
    font-size: 40px !important;
  }
  .fs45 {
    font-size: 45px !important;
  }
  .fs50 {
    font-size: 50px !important;
  }
  .fs60 {
    font-size: 60px !important;
  }
  .fs70 {
    font-size: 70px !important;
  }
  .fs80 {
    font-size: 80px !important;
  }
  .fs90 {
    font-size: 90px !important;
  }
  .fs100 {
    font-size: 100px !important;
  }
  
  /*===============================================
    B. Padding Helpers
  ================================================= */
  .pn {
    padding: 0 !important;
  }
  .p1 {
    padding: 1px !important;
  }
  .p2 {
    padding: 2px !important;
  }
  .p3 {
    padding: 3px !important;
  }
  .p4 {
    padding: 4px !important;
  }
  .p5 {
    padding: 5px !important;
  }
  .p6 {
    padding: 6px !important;
  }
  .p7 {
    padding: 7px !important;
  }
  .p8 {
    padding: 8px !important;
  }
  .p10 {
    padding: 10px !important;
  }
  .p12 {
    padding: 12px !important;
  }
  .p15 {
    padding: 15px !important;
  }
  .p20 {
    padding: 20px !important;
  }
  .p25 {
    padding: 25px !important;
  }
  .p30 {
    padding: 30px !important;
  }
  .p35 {
    padding: 35px !important;
  }
  .p40 {
    padding: 40px !important;
  }
  .p50 {
    padding: 50px !important;
  }
  .ptn {
    padding-top: 0 !important;
  }
  .pt5 {
    padding-top: 5px !important;
  }
  .pt7 {
    padding-top: 7px !important;
  }
  .pt10 {
    padding-top: 10px !important;
  }
  .pt15 {
    padding-top: 15px !important;
  }
  .pt20 {
    padding-top: 20px !important;
  }
  .pt25 {
    padding-top: 25px !important;
  }
  .pt30 {
    padding-top: 30px !important;
  }
  .pt35 {
    padding-top: 35px !important;
  }
  .pt40 {
    padding-top: 40px !important;
  }
  .pt50 {
    padding-top: 50px !important;
  }
  .pt60 {
    padding-top: 60px !important;
  }
  .pt65 {
    padding-top: 65px !important;
  }
  .pt70 {
    padding-top: 70px !important;
  }
  .pt80 {
    padding-top: 80px !important;
  }
  .pt100 {
    padding-top: 100px !important;
  }
  .prn {
    padding-right: 0 !important;
  }
  .pr3 {
    padding-right: 3px !important;
  }
  .pr5 {
    padding-right: 5px !important;
  }
  .pr10 {
    padding-right: 10px !important;
  }
  .pr15 {
    padding-right: 15px !important;
  }
  .pr20 {
    padding-right: 20px !important;
  }
  .pr25 {
    padding-right: 25px !important;
  }
  .pr30 {
    padding-right: 30px !important;
  }
  .pr35 {
    padding-right: 35px !important;
  }
  .pr40 {
    padding-right: 40px !important;
  }
  .pr50 {
    padding-right: 50px !important;
  }
  .pbn {
    padding-bottom: 0 !important;
  }
  .pb5 {
    padding-bottom: 5px !important;
  }
  .pb10 {
    padding-bottom: 10px !important;
  }
  .pb15 {
    padding-bottom: 15px !important;
  }
  .pb20 {
    padding-bottom: 20px !important;
  }
  .pb25 {
    padding-bottom: 25px !important;
  }
  .pb30 {
    padding-bottom: 30px !important;
  }
  .pb35 {
    padding-bottom: 35px !important;
  }
  .pb40 {
    padding-bottom: 40px !important;
  }
  .pb50 {
    padding-bottom: 50px !important;
  }
  .pb70 {
    padding-bottom: 70px !important;
  }
  .pb100 {
    padding-bottom: 100px !important;
  }
  .pln {
    padding-left: 0 !important;
  }
  .pl5 {
    padding-left: 5px !important;
  }
  .pl10 {
    padding-left: 10px !important;
  }
  .pl15 {
    padding-left: 15px !important;
  }
  .pl20 {
    padding-left: 20px !important;
  }
  .pl25 {
    padding-left: 25px !important;
  }
  .pl30 {
    padding-left: 30px !important;
  }
  .pl35 {
    padding-left: 35px !important;
  }
  .pl40 {
    padding-left: 40px !important;
  }
  .pl50 {
    padding-left: 50px !important;
  }
  /* Axis Padding (both top/bottom or left/right) */
  .pv5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  .pv8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .pv10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .pv15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .pv20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .pv25 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  .pv30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .pv40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .pv50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .pv70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
  .pv100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
  .ph5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .ph8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .ph10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .ph15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .ph20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .ph25 {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  .ph30 {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  .ph40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .ph50 {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
  .ph100 {
    padding-left: 100px !important;
    padding-right: 100px !important;
  }
  /* responsive padding helpers */
  @media (min-width: 1140px) {
    .ptn-lg {
      padding-top: 0 !important;
    }
    .prn-lg {
      padding-right: 0 !important;
    }
    .pbn-lg {
      padding-bottom: 0 !important;
    }
    .pln-lg {
      padding-left: 0 !important;
    }
    .pt5-lg {
      padding-top: 5px !important;
    }
    .pr5-lg {
      padding-right: 5px !important;
    }
    .pb5-lg {
      padding-bottom: 5px !important;
    }
    .pl5-lg {
      padding-left: 5px !important;
    }
  }
  @media (min-width: 992px) {
    .ptn-md {
      padding-top: 0 !important;
    }
    .prn-md {
      padding-right: 0 !important;
    }
    .pbn-md {
      padding-bottom: 0 !important;
    }
    .pln-md {
      padding-left: 0 !important;
    }
    .pt5-md {
      padding-top: 5px !important;
    }
    .pr5-md {
      padding-right: 5px !important;
    }
    .pb5-md {
      padding-bottom: 5px !important;
    }
    .pl5-md {
      padding-left: 5px !important;
    }
  }
  
  /*===============================================
    C. Margin Helpers
  ================================================= */
  /* margin center helper */
  .mauto {
    margin-left: auto;
    margin-right: auto;
  }
  .mn {
    margin: 0 !important;
  }
  .m1 {
    margin: 1px !important;
  }
  .m2 {
    margin: 2px !important;
  }
  .m3 {
    margin: 3px !important;
  }
  .m4 {
    margin: 4px !important;
  }
  .m5 {
    margin: 5px !important;
  }
  .m8 {
    margin: 8px !important;
  }
  .m10 {
    margin: 10px !important;
  }
  .m15 {
    margin: 15px !important;
  }
  .m20 {
    margin: 20px !important;
  }
  .m25 {
    margin: 25px !important;
  }
  .m30 {
    margin: 30px !important;
  }
  .m35 {
    margin: 35px !important;
  }
  .m40 {
    margin: 40px !important;
  }
  .m50 {
    margin: 50px !important;
  }
  .mtn {
    margin-top: 0 !important;
  }
  .mt3 {
    margin-top: 3px !important;
  }
  .mt5 {
    margin-top: 5px !important;
  }
  .mt10 {
    margin-top: 10px !important;
  }
  .mt15 {
    margin-top: 15px !important;
  }
  .mt20 {
    margin-top: 20px !important;
  }
  .mt25 {
    margin-top: 25px !important;
  }
  .mt30 {
    margin-top: 30px !important;
  }
  .mt35 {
    margin-top: 35px !important;
  }
  .mt40 {
    margin-top: 40px !important;
  }
  .mt50 {
    margin-top: 50px !important;
  }
  .mt60 {
    margin-top: 60px !important;
  }
  .mt70 {
    margin-top: 70px !important;
  }
  .mt75 {
    margin-top: 75px !important;
  }
  .mt100 {
    margin-top: 100px !important;
  }
  .mt150 {
    margin-top: 150px !important;
  }
  .mt300 {
    margin-top: 300px !important;
  }
  .mt500 {
    margin-top: 500px !important;
  }
  .mrn {
    margin-right: 0 !important;
  }
  .mr1 {
    margin-right: 1px !important;
  }
  .mr5 {
    margin-right: 5px !important;
  }
  .mr10 {
    margin-right: 10px !important;
  }
  .mr15 {
    margin-right: 15px !important;
  }
  .mr20 {
    margin-right: 20px !important;
  }
  .mr25 {
    margin-right: 25px !important;
  }
  .mr30 {
    margin-right: 30px !important;
  }
  .mr35 {
    margin-right: 35px !important;
  }
  .mr40 {
    margin-right: 40px !important;
  }
  .mr50 {
    margin-right: 50px !important;
  }
  .mr60 {
    margin-right: 60px !important;
  }
  .mbn {
    margin-bottom: 0 !important;
  }
  .mb3 {
    margin-bottom: 3px !important;
  }
  .mb5 {
    margin-bottom: 5px !important;
  }
  .mb8 {
    margin-bottom: 8px !important;
  }
  .mb10 {
    margin-bottom: 10px !important;
  }
  .mb15 {
    margin-bottom: 15px !important;
  }
  .mb20 {
    margin-bottom: 20px !important;
  }
  .mb25 {
    margin-bottom: 25px !important;
  }
  .mb30 {
    margin-bottom: 30px !important;
  }
  .mb35 {
    margin-bottom: 35px !important;
  }
  .mb40 {
    margin-bottom: 40px !important;
  }
  .mb50 {
    margin-bottom: 50px !important;
  }
  .mb70 {
    margin-bottom: 70px !important;
  }
  .mb85 {
    margin-bottom: 85px !important;
  }
  .mb100 {
    margin-bottom: 100px !important;
  }
  .mln {
    margin-left: 0 !important;
  }
  .ml5 {
    margin-left: 5px !important;
  }
  .ml10 {
    margin-left: 10px !important;
  }
  .ml15 {
    margin-left: 15px !important;
  }
  .ml20 {
    margin-left: 20px !important;
  }
  .ml25 {
    margin-left: 25px !important;
  }
  .ml30 {
    margin-left: 30px !important;
  }
  .ml35 {
    margin-left: 35px !important;
  }
  .ml40 {
    margin-left: 40px !important;
  }
  .ml50 {
    margin-left: 50px !important;
  }
  .ml60 {
    margin-left: 60px !important;
  }
  .ml100 {
    margin-left: 100px !important;
  }
  /* Axis Margins (both top/bottom or left/right) */
  .mv5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  .mv10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .mv15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .mv20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .mv25 {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
  }
  .mv30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .mv40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .mv50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .mv70 {
    margin-top: 70px !important;
    margin-bottom: 70px !important;
  }
  .mh5 {
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
  .mh10 {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  .mh15 {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
  .mh20 {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .mh25 {
    margin-left: 25px !important;
    margin-right: 25px !important;
  }
  .mh30 {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  .mh40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .mh50 {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  .mh70 {
    margin-left: 70px !important;
    margin-right: 70px !important;
  }
  /* Negative Margin Helpers */
  .mtn5 {
    margin-top: -5px !important;
  }
  .mtn10 {
    margin-top: -10px !important;
  }
  .mtn15 {
    margin-top: -15px !important;
  }
  .mtn20 {
    margin-top: -20px !important;
  }
  .mtn30 {
    margin-top: -30px !important;
  }
  .mtn60 {
    margin-top: -60px !important;
  }
  .mrn5 {
    margin-right: -5px !important;
  }
  .mrn10 {
    margin-right: -10px !important;
  }
  .mrn15 {
    margin-right: -15px !important;
  }
  .mrn20 {
    margin-right: -20px !important;
  }
  .mrn30 {
    margin-right: -30px !important;
  }
  .mbn5 {
    margin-bottom: -5px !important;
  }
  .mbn10 {
    margin-bottom: -10px !important;
  }
  .mbn15 {
    margin-bottom: -15px !important;
  }
  .mbn20 {
    margin-bottom: -20px !important;
  }
  .mbn30 {
    margin-bottom: -30px !important;
  }
  .mbn60 {
    margin-bottom: -60px !important;
  }
  .mbn80 {
    margin-bottom: -80px !important;
  }
  .mbn100 {
    margin-bottom: -100px !important;
  }
  .mln3 {
    margin-left: -3px !important;
  }
  .mln5 {
    margin-left: -5px !important;
  }
  .mln10 {
    margin-left: -10px !important;
  }
  .mln15 {
    margin-left: -15px !important;
  }
  .mln20 {
    margin-left: -20px !important;
  }
  .mln30 {
    margin-left: -30px !important;
  }
  .mln60 {
    margin-left: -60px !important;
  }
  /* Vertical Negative Margin "mv" + "n" + "x" */
  .mvn5 {
    margin-top: -5px !important;
    margin-bottom: -5px !important;
  }
  .mvn10 {
    margin-top: -10px !important;
    margin-bottom: -10px !important;
  }
  .mvn15 {
    margin-top: -15px !important;
    margin-bottom: -15px !important;
  }
  .mvn20 {
    margin-top: -20px !important;
    margin-bottom: -20px !important;
  }
  .mvn30 {
    margin-top: -30px !important;
    margin-bottom: -30px !important;
  }
  /* Horizontal Negative Margin "mh" + "n" + "x" */
  .mhn5 {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }
  .mhn10 {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
  .mhn15 {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
  .mhn20 {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
  .mhn30 {
    margin-left: -30px !important;
    margin-right: -30px !important;
  }
  
  
  /*==================================================
    D. Width Helpers
  ==================================================== */
  
  .w30{ width: 30px !important; }
  .w40{ width: 40px !important; }
  .w50{ width: 50px !important; }
  .w60{ width: 60px !important; }
  .w70{ width: 70px !important; }
  .w80{ width: 80px !important; }
  .w100{ width: 100px !important; }
  .w150{ width: 150px !important; }
  .w200{ width: 200px !important; }
  
  
  /*==================================================
    E. Height Helpers
  ==================================================== */
  
  .h30 { height: 30px !important; }
  
  
  /*==================================================
    F. Font Helpers
  ==================================================== */
  
  .font-open { font-family: 'Open Sans', sans-serif; }

  @font-face {
    font-family: MadeLight;
    src: url("../fonts/made-light.otf") format("opentype");
    font-weight:100;font-style:normal;
  }
  
  @font-face {
    font-family: MadeMedium;
    src: url("../fonts/made-medium.otf") format("opentype");
    font-weight:400;font-style:normal;
  }
  
  @font-face {
    font-family: MadeRegular;
    src: url("../fonts/made-rg.otf") format("opentype");
    font-weight:600;font-style:normal;
  }

  .font-made-light{font-family: 'MadeLight', sans-serif;}
  .font-made-medium{font-family: 'MadeMedium', sans-serif;}
  .font-made-rg{font-family: 'MadeRegular', sans-serif;}
 
  .text-dark-blue { color: #1c46a1; }
  
  /*==================================================
    Z. Theme
  ==================================================== */
  

  body { background: url(/img/background/home.jpg); background-position: 40% 0%; background-size:cover; background-repeat:no-repeat; }

  .bw3 {border-width: 3px !important; }

  .bg-light-blue { background: #3974dc; }
  .bg-dark-blue { background: #1c46a1; }
  .bg-yellow { background: #efc916; }
  
  /* Huawei P20 */
  @media (min-width: 360px) and (max-height: 760px) {
    #welcome { font-size: 24px !important; }
    #logo { width: 100px !important; }
    #questionContainer { padding: 10px 20px !important; }
  }
   
  /* Huawei P10 */
  @media (min-width: 360px) and (max-height: 640px) {

  }
   
  /* Iphone X */
  @media (min-width: 370px) and (max-height: 820px) {
    #welcome { font-size: 30px !important; }
    #logo { width: 100px !important; }
    #questionContainer { padding: 10px 20px !important; }
  }
   
  /* Iphone 6/7/8+ */
  @media (min-width: 410px) and (max-height: 740px) {
  }
   
  /* Iphone 6/7/8 */
  @media (min-width: 375px) and (max-height: 670px) {

  }
   
  /* Iphone 5 */
  @media (min-width: 320px) and (max-height: 570px) {
    #welcome { font-size: 20px !important; }
    #logo { width: 80px !important; }
    #questionContainer { padding: 10px 20px !important; }
  }
   
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
  }
   
  /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
  @media (min-width: 768px) {

  }
   
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    #logo { width: 150px !important; }
    #questionContainer { padding: 50px 100px !important; }
  }
   
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {

  }
   
  /* Résolution de 1920*1080 zoomé à 150% = PC PORTABLE FRANCK */
  @media (min-width: 1265px) {
  }
   
  @media (min-width: 1350px) {
  }
   
  @media (min-width: 1420px) {

  }
   
  /* Résolution de 1920*1080 zoomé à 125% */
  @media (min-width: 1515px) {
  }
   
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1580px) {

  }
  
  @media (min-width: 1880px) {

  }