@media (min-width: 1250px) {
.preview-grid {margin-left:150px;margin-right:150px;} 
}

.nav-mobile { display: none; }

@media screen and (max-width: 900px) {
.nav-mobile { display: block ; }
.nav-pc { display: none ;  }

/* CSS Menu Hamburger  */

ul { list-style: none; }
a { text-decoration: none; color: black;}
body {
   font-family: 'Dosis', sans-serif;
   background: #f0f0f0;
}
#menu-wrapper {
    overflow: hidden;
    max-width: 100%;
    cursor: pointer;
}


#menu-wrapper #hamburger-menu {
    position: relative;
    width: 25px;
    height: 20px;
    margin: 15px;
}

#menu-wrapper #hamburger-menu span {
    opacity: 1;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    color: black;
    background-color: black;
    position: absolute;
    transform: rotate(0deg);
    transition: .4s ease-in-out;
}

#menu-wrapper #hamburger-menu span:nth-child(1) {
    top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
    top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
    top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
    transform: translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
    opacity: 0;
    transform: translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-135deg);
}

#menu-container .menu-list .menu-submenu {
    padding-top: 20px;
    padding-bottom: 20px;
}
#menu-container .menu-list {
    padding-left: 0;
    display: block;
    position: absolute;
    width: 100%;
    max-width: 450px;
    background: #f0f0f0;
    box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    left: -100%;
}

#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
    font-size: 16px;
    padding: 20px;
    text-transform: uppercase;
    border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li:first-of-type {
    border-top: 0;
}

.accordion-toggle, .accordion-content {
    cursor: pointer;
    font-size: 16px;
    position: relative;
    letter-spacing: 1px;
}

  .accordion-content {
    display: none;
}

.accordion-toggle a:before, .accordion-toggle a:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    width: 15px;
    height: 2px;
    margin-top: -1px;
    background-color: #5a5858;
    transform-origin: 50% 50%;
    transition: all 0.3s ease-out;
}

.accordion-toggle a:before {
    transform: rotate(-90deg);
    opacity: 1;
    z-index: 2;
}

.accordion-toggle.active-tab {
  background: #a2a2a2;
  transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
    transform: rotate(0deg);
    background: #fff !important;
}

.accordion-toggle a.active:after {
    transform: rotate(180deg);
    background: #fff !important;
    opacity: 0;
}

/* Fin CSS Menu Hamburger  */

}

.cards {
max-width: 100%;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}

@media (min-width: 700px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
.image2 { width:600px; }
}

@media (max-width: 1000px) {
.image2 { width:320px; }
}

a:link {text-decoration:underline; color: #32334c; background-color: transparent;}
a:hover {text-decoration:underline; color: #32334c; background-color: transparent;}
a:visited {text-decoration:underline; color: #32334c; background-color: transparent;}
a:active {text-decoration:underline; color: #32334c; background-color: transparent;}
li.menu:hover {text-decoration:underline;color: #32334c;}
li.menu {color: #32334c;}
.normal {height:0px;margin:0px;}
header {background-color: #f0f0f0;}
footer {background-color: #f0f0f0;vertical-align:bottom;}


.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
 left: 70%;
  margin-top: -1px;
}

 
#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
        padding-left:5px;
        padding-right:5px;
        display: block;
	color:#000;
        background-color:#f0f0f0;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}