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

/* ----------------------Fichier commun des medias-queries pour le responsive----------------------*/

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

@media(min-width:1280px) {
  /* large */
  body {
    width: 1100px;
  }
  /* bureau */
}

@media(max-width:1480px) {}

@media(max-width:768px) {
  /* small */
  /* GNote portrait */
}

@media(max-width:480px) {
  /* tiny */
  /* MTT */
}

@media(max-width:1024px) {
  /* iPad, GNote, MTT */
  /*body:before {
      content: " max_width_1024 ";
      display: block;
      text-align: center;
      font-style: italic;
      color: #777;
    }*/
}

@media(min-device-width:480px) {
  /* bureau, iPad, GNote */
  /*body:before {
      content: " min_device_width_480 ";
      display: block;
      text-align: center;
      font-style: italic;
      color: #777;
    }*/
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  /* Style adjustments for retina devices */
  /* GNote */
  /*body:before {
      content: " retina ";
      display: block;
      text-align: center;
      font-style: italic;
      color: #777;
    }*/
}

@media (min-width: 768px) {
  /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
  /* bureau, iPad */
  /*body:before {
      content: " min_width_768 ";
      display: block;
      text-align: center;
      font-style: italic;
      color: #777;
    }*/
}

/*----------------------------------------------------------------------------*/

/*@media (min-width: 1200px) {*/

@media(min-width:1024px) {
  /* large */
  body {
    /* width: 960px; */
    margin: 1.0em auto 1.0em auto;
  }
}

@media(min-width:480px) {
  aside {
    /*width: 200px;*/
    width: 160px;
  }
}

/*----------------------------------------------------------------------------*/

/*@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {*/

/* Style adjustments for retina devices */

@media(max-width:768px) {
  /* small */
  nav {
    height: auto;
  }
  #nav-top a {
    padding: 0 0.5em;
  }
  .icon-house:before, .icon-house.after:after, .icon-nav:before, .icon-nav.after:after {
    content: initial;
  }
}

/*----------------------------------------------------------------------------*/

/*@media (max-width: 768px) {*/

@media(max-width:480px) {
  /* tiny */
  body {
    font-size: 1.5em;
    text-align: left;
  }
  h1, .h1-like {
    font-size: 1.8rem;
  }
  p {
    text-align: left;
  }
  #nav-top {
    font-weight: bold;
  }
  #nav-top a, #nav-top #accueil a, #nav-top #contact a {
    text-shadow: 0.1em 0.1em 0.1em #000000;
  }
  #nav-top li a {
    line-height: 2.5em;
  }
  .icon-house:before, .icon-house.after:after, .icon-nav:before, .icon-nav.after:after {
    content: initial;
  }
  aside {
    position: initial;
    /*top: 160px;*/
    width: available;
  }
}

/*@media (min-width: 768px) {*/

/* here go rules for big resources and big screens like: background-images, font-faces, etc. */

@media(min-width:768px) {
  /* large */
  body {
    /* margin: 1.0em; */
    /*margin-top: 0px;*/
  }
  article {
    margin-right: 1.0em;
  }
  #nav-top {
    line-height: 3.3em;
    /*2.5em;*/
    text-align: left;
  }
  #nav-top li {
    display: inline-block;
  }
  #nav-top a {
    /*float: left;*/
    /*height: 4.0em;*/
    padding: 0 1em;
  }
  #nav-top li:hover>ul {
    display: block;
  }
}

@media (min-width: 768px) {
  /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
  .img-milesys-batiment {
    display: none;
  }
  #header2 #nav-logo-milesys {
    display: none;
  }
}

@media (max-width: 836px) {
  #div-logo {
    display: flex;
    justify-content: center;
    height: 120px;
    width: 100%;
    align-items: center;
  }
  #logo-entreprise {
    display: flex;
    width: 300px;
    height: 100%;
  }
}

@media (max-width: 836px) {
  /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
  #lang-header {
    display: none;
  }
  #groupemap {
    display: none;
  }
  #divmap {
    display: none;
  }
  #header2 {
    margin-bottom: 0.5em;
    height: 120px;
  }
  nav {
    height: auto;
  }
  #nav-top a {
    padding: 0 0.0em;
  }
  #nav-top {
    line-height: 2.5em;
    text-align: center;
  }
  .icon-house:before, .icon-house.after:after, .icon-nav:before, .icon-nav.after:after {
    content: initial;
  }
  #Aside {
    display: none;
    width: 0px;
  }
  #slidy-container {
    display: none;
  }
  #div-map {
    display: none;
  }
  #map {
    display: none;
  }
}

@media (max-width: 768px) {
  /* quick reset in small resolution and less */
  .w600p, .w700p, .w800p, .w960p, .mw960p {
    width: auto;
    float: none;
  }
  #header2 {
    margin-bottom: 0em;
    height: 120px;
  }
  #header, #header2, nav, #nav-top, aside, article {
    margin-bottom: 0.3em;
    ;
  }
  aside, article, #domaines ul, #produits ul, #techniques ul, #competences ul, #societe ul, #sites ul, #recrutement ul, #contact ul, nav, header, #header2 {
    /*  margin-bottom: 20px;*/
    box-shadow: 0 0.0em 0.0em #1c1a19;
    border-radius: 0.4em;
  }
  /* layouts for small screens */
  .small-hidden {
    display: none !important;
  }
  .small-visible {
    display: block !important;
  }
  .small-no-float {
    float: none;
  }
  .small-inbl {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .small-row {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .small-col {
    display: table-cell !important;
    vertical-align: top !important;
  }
  /* you shall not pass */
  div, textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
  }
  /* widths for small screens */
  .small-w25 {
    width: 25% !important;
  }
  .small-w33 {
    width: 33.3333% !important;
  }
  .small-w50 {
    width: 50% !important;
  }
  .small-w66 {
    width: 66.6666% !important;
  }
  .small-w75 {
    width: 75% !important;
  }
  .small-w100, .small-wauto {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0;
  }
  /* margins for small screens */
  .small-ma0 {
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  /* quick tiny resolution reset */
  .size-scroll {
    height: 62px;
    width: 62px;
  }
  #lang-header {
    display: none;
  }
  #openStore {
    display: none;
  }
}

@media (max-width: 480px) {
  /* quick tiny resolution reset */
  .PaddingProduits {
    padding: 4%;
  }
  #openModal {
    display: none;
  }
  .mod, .col, fieldset {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0;
  }
  .w300p, .w400p, .w500p {
    width: auto;
    float: none;
  }
  .row {
    display: block !important;
    width: 100% !important;
  }
  /* layouts for tiny screens */
  .tiny-hidden {
    display: none !important;
  }
  .tiny-visible {
    display: block !important;
  }
  .tiny-no-float {
    float: none;
  }
  .tiny-inbl {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .tiny-row {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
  .tiny-col {
    display: table-cell !important;
    vertical-align: top !important;
  }
  th, td {
    display: block !important;
    width: auto !important;
    text-align: left !important;
  }
  thead {
    display: none;
  }
  /* widths for tiny screens */
  .tiny-w25 {
    width: 25% !important;
  }
  .tiny-w33 {
    width: 33.3333% !important;
  }
  .tiny-w50 {
    width: 50% !important;
  }
  .tiny-w66 {
    width: 66.6666% !important;
  }
  .tiny-w75 {
    width: 75% !important;
  }
  .tiny-w100, .tiny-wauto {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0;
  }
  /* margins for tiny screens */
  .tiny-ma0 {
    margin: 0 !important;
  }
}

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