﻿
/* ---------------------------------- */
/* ==Responsive small                 */
/* ---------------------------------- */
@media (max-width: 1000px) {
body{background-image:none}     
.wrapH{background: #fff;}

    img{
        max-width:100%;
        height:auto;   
    }
    header, footer{width:100%;clear:both}
    .wrapH{
        width: 100%;
    }
    

    .logosully{
        margin: 0 0 0 60px;
    }
    h1.home{
    padding: 0 0 0 60px;
}


    div#wrap{
        width: 95%;
    }
    section#main{
        float:left;
        width:100%;
    }

        aside{
        float:left;
        width:95%;
        margin-top:20px
    }
    nav.main{
        position:relative;
        width: 90%;
    clear:both;
	padding: 5px 0 0 5px;
	margin: 0;
    border-bottom: 0;
	font-family:'Open Sans', Sans-Serif;
	font-size:11px;
	z-index:999;
	color:#cfcfcf;

}


.animenu__toggle {
    position:absolute;
    top:-40px;left:5px;
   display:block;
  cursor: pointer;
  background-color: #111111;
  border: 0;
  padding: 10px;
  height: 40px;
  width: 40px;
  z-index:9999;
}
.animenu__toggle:hover {
  background-color: #333;
}

.animenu__toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
  transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
}
.animenu__toggle__bar + .animenu__toggle__bar {
  margin-top: 4px;
}

.animenu__toggle--active .animenu__toggle__bar {
  margin: 0;
  position: absolute;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {
  opacity: 0;
}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}



/* LEVEL ONE */

nav.main ul.dFb                          { position: relative;margin:0;}

nav.main ul.dFb li                       {float:left;width:200px;margin: 0 20px 1px 20px; height:25px;zoom: 1;}
nav.main ul.dFb li:hover{background:none} 
nav.main ul.dFb a:hover		            { color: #000; }
nav.main ul.dFb a:active                 { color: #ffa500; }
nav.main ul.dFb li a                     {display:block; width:100%;margin: 0 3px 1px 3px;padding: 3px 11px 10px 11px;height:12px; font-size:1em; color:#fff;font-weight:normal; background:#8A9589; text-decoration:none;}
nav.main ul.dFb li.hover, nav.main ul.dFb li:hover{color: #fff; position: relative; }
    nav.main ul.dFb li.hover a {
        color: #A13138;text-shadow:none;
    }
nav.main ul.dFb ul {width:250px;}
nav.main ul.dFb ul li {clear:both;width:100%;}
									  


nav.main ul.dFb ul li a, nav.main ul.dFb li.hover ul li a { background: inherit;height:14px;border-right: none; width: 100%; color:#8A9589; padding: 2px 3px 2px 3px;display: inline-block; text-transform:none; } 
nav.main ul.dFb li.hover ul li.hover a { color:#fff;} 
nav.main ul.dFb ul li a, nav.main ul.dFb li.hover ul li:hover{ background: #8A9589;overflow:hidden;width:100%} 

  .animenu__nav,
  .animenu__nav__child {
    display: none;
  }





}

@media (max-width: 800px) {
    nav.main {
        display: block;
    }

    .bLivre div.infos{
    float:left;
    width:90%;
}

}

@media (max-width: 640px) {

nav.main ul.dFb li                       {float:left;width:95%;margin: 0 2px 1px 2px; height:25px;zoom: 1;}

    .logosully{
        max-width:250px;
        margin:0 0 0 5px;
    }
    h1.home{
    padding: 0 0 0 5px;
    margin:0 0 10px 0;
}

.animenu__toggle {
    position:absolute;
    top:-30px;left:5px;
}


form#fCommander label{
    width:90%;
    text-align:left;
    float:none;
    display:block;
    padding: 10px 6px 0 0;
}
    form#fCommander input, form#fCommander select {
        width:95%
    }
        #monPanier{display:none}
        #btnPanier{width:30px}

.bSearch{
    padding:10px 10px 0 0;
}


form#fAbo label{
    clear:left;
    width:80%;
    text-align:left;
    margin: 0 5px 0 0;
    padding: 15px 0 0 0
}
form#fAbo input{
    clear:left;
    width:80%;
}
button#iInscription{
    margin: 15px 0 0 5px;
}

#bCentre{ clear:left;padding: 0}
form#fAbo #bCentre label{width:auto;text-align:left;padding: 0}
#bCentre label input[type=checkbox]{clear:both;width:20px;}



}


@media (max-width: 400px) {



}

