/* ========== PREHEADER ========== */
 #preHeader {
     /* position: fixed;*/
     top: 0;
     /*width: 1480px;*/
     height: 45px;
     z-index: 50;
     -moz-box-sizing: content-box;
    /* Couleurs */
    /* background: #000000;*/
    /* Old browsers */
     -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.3);
     -ms-box-shadow: 0 2px 6px rgba(0,0,0,0.3);
     -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.3);
     box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
 #preHeaderPartLeft {
     position: absolute;
     top: 2px;
     left: 70px;
}
 #preHeaderPartRight {
     position: absolute;
     top: 5px;
     right: 20px;
     width: 100%;
}
 #preHeaderPartRight ul {
     display: block;
     position: absolute;
     top: 0;
     right: 0;
}
 #preHeaderPartRight li {
     position: relative;
     display:inline;
}
 #preHeaderPartRight a {
     position: relative;
     line-height: 32px;
     color: #fff;
     display: block;
     float: left;
     height: 32px;
     padding: 0 10px;
     text-decoration: none;
}
 #preHeaderPartRight li:last-child a {
     border: none;
     padding: 0 0 0 5px;
}
 #preHeaderPartRight a:hover {
     text-decoration: underline;
}
 #preHeaderLogo {
     position: absolute;
     top: 1px;
     left:20px;
}
/* ========== BARRE PREMIERE ========== */
.topnav1 {
    background-color: #000000;
    font-size: 20px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

.topnav1 a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 9px 10px;
  text-decoration: none;
  font-size: 20px;
}

.topnav1 a:hover {
  color: white;
}

/* Create a right-aligned (split) link inside the navigation bar */
.topnav1 a.split1 {
  float: right;
  overflow: auto;
  background-color: #000000;
  color: white;
  font-size: 20px;
}


/* Create a right-aligned (split) link inside the navigation bar */
.topnav1 a.split2 {
  float: left;
  overflow: auto;
  color: white;
}


/* ========== BARRE SECONDAIRE ========== */
.topnav2 {
    background-color: #675151;
    font-size: 20px;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 50;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

.topnav2 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  font-size: 19px;
}

.topnav2 a:hover {
  background-color: #675151;
  color: white;
}

.topnav2 a.active {
  background-color: #675151;
  color: white;
}

.topnav2 .icon2 {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav2 a:not(:first-child) {display: none;}
  .topnav2 a.icon2 {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav2.responsive {position: fixed;}
  .topnav2.responsive .icon2 {
    position: relative;
    right: 0;
    top: 0;
  }
  .topnav2.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.topnav2 .search-container2 {
  float: right;
}

.topnav2 input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 15px;
  border: none;
  margin-bottom: 2px;
}

.topnav2 .search-container2 button {
  float: right;
  padding: 7px 10px;
  margin-top: 6px;
  margin-right: 16px;
  background: #998484;
  font-size: 15px;
  border: none;
  cursor: pointer;
}

.topnav2 .search-container2 button:hover {
  background: #ccc;
}

  .topnav2 input[type=text] {
    border: 1px solid #ccc;  
  }
  
}
/* ========== TOPBAR PRE-HEADER ========== */
 body {
    margin:0;
    font-family:Arial
}
 .topnav {
     overflow: auto;
     background-color: #675151;
}
 .topnav a {
     float: left;
     display: block;
     color: #f2f2f2;
     background-color: #675151;
     text-align: center;
     padding: 10px 15px;
     text-decoration: none;
     font-size: 21px;
}
 .topnav .icon {
     display: none;
}
 .dropdown0 {
     float: right;
     overflow: hidden;
}
 .dropdown0 .dropbtn {
     font-size: 20px;
     border: none;
     outline: none;
     color: white;
     padding: 12px 10px;
     background-color: rgba(103, 81, 81, 1);
     font-family: inherit;
     margin: 0;
}
 .dropdown0-content {
     display: none;
     position: absolute;
     background-color: black;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 51;
}
 .dropdown0-content a {
     float: none;
     color: white;
     padding: 14px 10px;
     text-decoration: none;
     display: block;
     text-align: left;
}
 .topnav a:hover, .dropdown0:hover .dropbtn0 {
     color: #675151;
     background-color: #f2f2f2;
}
 .dropdown0-content a:hover {
     background-color: #f2f2f2;
     color: #675151;
}
 .dropdown0:hover .dropdown0-content {
     display: block;
}
 @media screen and (max-width: 550px) {
     .topnav a:not(:first-child), .dropdown0 .dropbtn0 {
         display: none;
    }
     .topnav a.icon {
         display: block;
    }
}
 @media screen and (max-width: 550px) {
     .topnav.responsive {
        position: relative;
    }
     .topnav.responsive .icon {
         right: 0;
         top: 0;
    }
     .topnav.responsive a {
         float: none;
         display: block;
         text-align: left;
    }
     .topnav.responsive .dropdown0 {
        float: none;
    }
     .topnav.responsive .dropdown0-content {
        position: relative;
    }
     .topnav.responsive .dropdown0 .dropbtn0 {
         display: block;
         width: 100%;
         text-align: left;
    }
}
 .topnav .search-container button:hover {
     background: #ccc;
}
 @media screen and (max-width: 550px) {
     .topnav .search-container {
         float: none;
    }
     .topnav a, .topnav input[type=text], .topnav .search-container button {
         text-align: left;
         margin: 0;
         padding: 14px;
    }
     .topnav input[type=text] {
         border: 1px solid #ccc;
    }
}
/* ========== NAVBAR FILTRE ARTICLE ========== */
 body {
     font-family: Arial, Helvetica, sans-serif;
}
 .navbar {
     overflow: hidden;
     background-color: #fff;
}
 .navbar a {
     float: left;
     font-size: 16px;
     color: black;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
}
 .dropdown {
     float: left;
     overflow: hidden;
}
 .dropdown .dropbtn {
     font-size: 14px;
     border: none;
     outline: none;
     color: black;
     padding: 10px 10px;
     background-color: white;
     font-family: inherit;
     margin: 0;
}
 .dark, .dark .dropdown .dropbtn {
     background-color: rgba(37, 34, 34, 0.92);
     color: white;
}
 .navbar a:hover, .dropdown:hover .dropbtn {
     background-color: #ddd;
}
 .dark, .dark .dropdown:hover .dropbtn {
     background-color: #4c4242;
}
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}
 .dark, .dark .dropdown-content {
     background-color: rgba(37, 34, 34, 0.92);
}
 .dropdown-content a {
     float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
}
 .dark, .dark .dropdown-content a {
     color: white;
}
 .dropdown-content a:hover {
     background-color: #ddd;
}
 .dark, .dark .dropdown-content a:hover {
     background-color: #4c4242;
}
 .dropdown:hover .dropdown-content {
     display: block;
}
/* ========== PROGRESS BAR ========== */
 progress {
     z-index: 100;
     position: fixed;
     left: auto;
     top: -1px;
     width: 100%;
     height: .30em;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: none;
}
 progress::-webkit-progress-bar {
     background-color: transparent;
}
 .flat::-webkit-progress-value {
     background-color: red;
}
 .flat::-moz-progress-bar {
     background-color: red;
}
 .single::-webkit-progress-value {
     background-color: transparent;
     background-image: -webkit-linear-gradient(left, transparent, red);
}
 .single::-moz-progress-bar {
     background-color: transparent;
     background-image: -moz-linear-gradient(left, transparent, red);
}
 .multiple::-webkit-progress-value {
     background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(left, green, red);
}
 .multiple::-moz-progress-bar {
     background-image: -moz-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -moz-linear-gradient(left, green, red);
}
 .progress-container {
     width: 100%;
     background-color: transparent;
     position: fixed;
     top: 0;
     left: 0;
     height: .25em;
     display: block;
}
 .progress-bar {
     background-color: red;
     width: 50%;
     display: block;
     height: inherit;
}
/* ========== MENU PRINCIPAL ========== */
 #menuPrincipal {
     position: relative;
}
 #menuPrincipal ul {
     padding: 0;
     margin: 0;
     -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
     -ms-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
     -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
     box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}
 #menuPrincipal ul.menu > li {
     background-color: #ffffff;
     position: relative;
     display: block;
     margin: 0;
}
 #menuPrincipal ul.menu > li > a {
     position: relative;
     display: block;
     width: 200px;
     min-height: 40px;
     padding: 8px 10px 5px 50px;
     line-height: 26px;
     text-decoration: none;
     color: #165a6f;
     font-size: 1.25em;
    /* 20 / 16px */
     background-color: #fff;
     -moz-transition: all .3s;
     -webkit-transition: all .3s;
     -o-transition: all .3s;
     transition: all .3s;
     z-index: 10;
}
 #menuPrincipal ul.menu > li > a:hover, #menuPrincipal ul.menu > li > a.hover {
     padding-left: 55px;
     -moz-transition: all .3s;
     -webkit-transition: all .3s;
     -o-transition: all .3s;
     transition: all .3s;
}
 #menuPrincipal ul.menu > li > a > i {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 40px;
     height: 100%;
     line-height: 40px;
     text-align: center;
     color: #fff;
}
/* Sous menu */
 #menuPrincipal ul.menu > li > ul.sub-menu {
     display: none;
     position: absolute;
     width: 200px;
     left: 200px;
     top: 0;
     padding: 0;
     z-index: 1000;
     background: #fff;
     -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
     -ms-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
     -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
     box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}
 #menuPrincipal ul.menu > li > ul.sub-menu > li {
     position: relative;
     display: block;
     margin: 0;
}
 #menuPrincipal ul.menu > li > ul.sub-menu > li > a {
     position: relative;
     display: block;
     width: 200px;
     padding: 9px 10px 5px 20px;
     line-height: 26px;
     text-decoration: none;
     color: #165a6f;
     font-size: 1.1em;
    /* 20 / 16px */
     background-color: #fff;
     -moz-transition: all .3s;
     -webkit-transition: all .3s;
     -o-transition: all .3s;
     transition: all .3s;
     z-index: 10;
}
 #menuPrincipal ul.menu > li > ul.sub-menu > li > a:hover {
     padding-left: 25px;
     -moz-transition: all .3s;
     -webkit-transition: all .3s;
     -o-transition: all .3s;
     transition: all .3s;
}
 .menu-toggle {
     display: none;
     height: 40px;
     line-height: 40px;
     padding: 0 0 0 10px;
     margin: 0;
     cursor: pointer;
     color: #fff;
     background: #165a6f;
     -webkit-font-smoothing: subpixel-antialiased;
     font-family: 'Quicksand', sans-serif;
     font-weight: 400 !important;
}
 .menu-toggle:after {
     font-family: FontAwesome;
     content: "\f054";
     font-size: 14px;
     padding-left: 8px;
     display: inline-block;
}
 .menuOpen .menu-toggle:after {
     font-family: FontAwesome;
     content: '\f078';
}
 @media (min-width: 992px) {
     #menuPrincipal ul.menu {
         display: block;
         height: auto !important;
    }
}
 @media (max-width: 991px) {
     #sidebar {
         position: relative;
         display: block;
         float: none;
         width: 100%;
         padding: 0 15px 0 15px !important;
         margin-right: -15px !important;
         margin-left: 0 !important;
         margin-bottom: 20px !important;
    }
     #sidebar:after {
         clear: both;
         display: table;
         content: " ";
    }
     #menuPrincipal {
         margin-top: 0;
         height: auto;
         padding: 0;
    }
     #menuPrincipal ul.menu {
         position: relative;
         height: auto;
         padding: 0;
         border-top: 1px solid #165a6f;
    }
     #menuPrincipal ul.menu > li {
         display: block;
         width: 100%;
    }
     #menuPrincipal ul.menu > li > a, #menuPrincipal ul.menu > li > ul.sub-menu > li > a {
         display: block;
        /* line-height: 40px;
         */
         width: 100%;
    }
     #menuPrincipal ul.menu > li > ul.sub-menu {
        /* display: none !important;
         */
         position: absolute;
         top: 40px;
         left: 40px;
         width: calc(100% - 40px);
         width: -moz-calc(100% - 40px);
         width: -webkit-calc(100% - 40px);
    }
     #menuPrincipal ul.menu > li > ul.sub-menu > li > a {
         padding: 8px 10px 5px 30px;
    }
     #menuPrincipal ul.menu > li > ul.sub-menu > li > a:hover {
         padding-left: 35px;
    }
     #blocSearch {
         position: absolute;
         top: 0;
         box-shadow: none;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
    }
}