@media only screen and (max-width: 1024px){

ul{
  margin: 0;
  padding: 0;
  width: auto;
  display: inline-block;
}

nav.navigation{top: 60px;
    position: relative;}

ul.all{margin: 0;}

div.mod{width: 10px;right: -300px;}

header{padding-bottom: 3em;
    padding-top: 2em;}

div.container{display: flex;}

div.body{width: 95%; margin-left: 10px;}

body , div.container , table.tabmetier {width: 100%; padding: 0;margin: 0;}

footer {width: 100%; padding: 0;margin: 0;margin-top: 1em;}

footer div.copy{display: inline-block; padding-bottom: 20px;padding-bottom: 60px; margin-top: 15px;}

div.presentation {text-align: justify;width: 50%;margin: 1em;}
div.item.push-right{margin-left: auto; margin-top: 0.5em;margin-bottom: 1em;}

footer div.push-right{display: inline-block;
    position: absolute;
    right: 10px;}

div.container div.push-right a.boutton {margin: 2em;}


div.container div.push-right div.perso{margin: auto;vertical-align: middle;}

div.container div.push-right div#allblocnotif{margin-bottom: 1em;}

div.container{padding-top: 20px;}

div.perso{margin: auto;margin-top: 100px;}



body div.body table tbody tr td div.titre-box {width: 100%;}

body div.body table tbody tr td div.body-box {width: 100%;}

body div.body table.vrais-dofus tbody tr td{width: 30%;}


body div.cookie-alert {width: 80%;right: auto;left: 6%;padding: 40px;}

div.presentation div.block-bouttons div.lien-page {width: 200px;padding: 10px;}


h2.titre{margin: 20px;padding: 10px;margin-top: 60px; }

.delimitation , .delim{text-align:center;width: 100%;}

.delimitation li.types , .delim li.types{text-align:center;width: 200px;  display: inline-block;}

ul li.types.titregene{
  display: block;
  margin: auto;
}

li.types {
margin-right: 1em;
}


.body, .body::after, .body::before {
    box-sizing: border-box;
}

.delimitation li strong.generation , .delim li strong.generation {padding-bottom: 60px;padding-top: 40px;}

.bull{margin-left: 150px;}

.notification-box{margin-left: auto;}

#block-attitude2{display: block;border: none;}

#block-attitude1 , #block-attitude2 {width: 98%;   margin: 0;padding: 0;}

#block-attitude1 tr td , #block-attitude2 tr td {width: 29%;}

#ssblock-objet {width: 29%;  }

#tableau {  widows: 80% ;margin:auto; margin-top: 60px;}

div.stuff{width: 80%; }

div.stuff div.quet {margin-top: 10px;margin-bottom: 20px;}

table.carac{width: 100%;}

div.alert div.msgattention { }

div.alert{left: 10%; width: 80%;}

a.next , a.prev , a.pre , a.nex {}

body ul.center{width: 100%; margin-top: 10%;}





.box-form {width: 70%; margin: auto;margin-top: 250px;margin-right: -50px;padding-bottom: 30px;}

div#retour a{ left : 50px;}


div#box-perso div.blocint {min-width: 700px; width: 88%;margin: 0;padding: 0;height: 700px;}
.interrieur{margin: 0; padding: 10px;width: 100%;}
div.interrieur table.formperso{padding: 0; margin: 0;}
table.reliquat tr td#totalrune , table.reliquat tr td#totalreliquat {}


#avertissement {
				display: none;
			}


.social {
  position: relative;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; 
  overflow: hidden;
  margin: auto;
  margin-top: 10px;
} 

.social img {z-index: 2; }

.fond_twi{
  top: 0px;
  z-index: 1;
  display: block;
  background-color: #55ACEE;
  position: absolute;
  transition: 0.5s;
}

.fond_disc {
    top: 0px;
    z-index: 1;
    display: block;
    background-color: #7790E1;
    position: absolute;
    transition: 0.5s;
}


.box-filariane{display: none;}

.outilsgroupe , .outilsgroupecoffre{width: 300px;}

.outilsgroupecoffre div.addperso {width: 250px;text-align: center;margin-top: 50px;}


div.boxmembre{margin: auto;height: 500px;}


.textaddmembre{top: 250px; }

div#addunmembre a.fermer {    margin-right: -170px;    margin-top: 50px;}


div#addunmembre .blocint{height: 30em;}

.lienpage:hover {
    z-index: 1;
}

div#addmonperso div.blocint{height: 30em;width: 70%;text-align: center;}


div#addmonperso div.blocint a.fermer{margin-top: 50px;}

p#imageaddpersogroupe{margin-bottom: 0;}

#box-addcoffre div.blocint {width: 70%;}

div#box-addcoffre div.blocint a.fermer{margin-top: 50px;}

#parametregroupe{top: 130px;    margin-left: 10px;}


div#paramgroupe div.blocint{height: 20em;width: 70%;text-align: center;}

div#paramgroupe div.blocint a.fermer{margin-top: 50px;}

.box-indicearchi {
    width: 180px;
        margin-left: 300px;
  }

  .box-indicearchi span {
    margin-left: -64px;
    margin-top: -29px;
  }


.actionall , .recherchemob {margin: 20px;position: initial;display: inline-block;vertical-align: middle;}

button.body{margin-left:  2em;}
button.body.dern{margin-bottom:  2em;}

#eca2 , #zobal2  {margin-bottom: 0;}
#zobal{margin-top: -4em;}
#sacri3 , #hupper3{margin-left: 5px;margin-bottom: 0;}

#hupper2{margin-bottom: -7em;}

#sram2{margin-bottom: 0;margin-left: 5px;}

.navigation {width: 98%;}

table {
    border-spacing: 1em 0em;
}

ul li ul {vertical-align: top;}

.body{text-align: left;}

}

@media only screen and (max-width: 700px){
  #parametregroupe{top: 150px;    margin-left: 10px;}

div.container{display: block;}
div.presentation {width: 88%;margin: auto;display: block;}
div.item.push-right{width: 100%;margin: auto;text-align: center; margin-bottom: 10px;margin-top: 20px;display: block;}


.membregroupe {width: 99%;display: block;}
.outilsgroupecoffre table a.lienpage {margin-left: 60px;}
 #cra, #eca, #eni, #enu, #feca, #hupper, #iop, #iop3, #osa, #ougi, #panda, #panda3, #sram3, #sacri, #sacri3, #sacri4, #roub,  #sadi3, #sram, #steam, #xel, #zobal, #zobal3, #elio2, #cra2, #eca2, #eni2, #enu2, #feca2, #hupper2, #iop2, #osa2, #ougi2, #panda2, #sacri2, #roub2, #sadi2, #sram2, #steam2, #xel2, #zobal2 , #enu3 , #hupper3{display: none;}

#sadi{top: 1em;}

button.body{width: 90%;}

table {
    border-spacing: 0em 0em;
}



}

@media only screen and (max-width: 550px){
  #parametregroupe{top: 125px;    margin-left: 10px;}
}

@media only screen and (max-width: 500px){
.box-indicearchi{display: none;}
#sadi, #elio{display: none;}
}




@media only screen and (max-width: 350px){

footer div.copy{display: block; text-align: center;}

footer div.push-right{display: block;
    position: initial;
}

.actionall{width: 80%;}

.actionall div.checkall input {margin: 5px;}

}


 body {
  background: url(img/co-ins-pro.jpg) no-repeat center center fixed ;
  background-size: cover;
  height: 100%;
  margin: auto;
  margin-top: 6em;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9em;
}