@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

  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;
}


/*----------------------------RELIQUAT---------------------------------*/

body{margin-top: 0;overflow: initial;}

.contenu{box-shadow: 0px 0px 1em 1em rgba(0,0,0,0.25); border-radius: 1em; margin: auto;
    margin-top: 5em;}

.all{text-align: center;}

.ligne{display: inline-block;}

.deroul {
width: 100%;background-color: transparent;
appearance: unset;
    -moz-appearance: unset;
    -o-appearance: unset;
    -ms-appearance: unset;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    box-sizing: border-box;
    -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
    border:none;border-bottom: 0.12em solid #999;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    margin-bottom: 0em;
    margin-left: 0em;
    color: #999;
}

      div#deco, div#decobas{display: none;}

      table.reliquat tr td{text-align: center;border-collapse: collapse; padding: 0.5em;}
      table.reliquat{border-spacing: 0em;margin: auto; width: 100%;padding:2em;padding-left: 4em;}
      .contenu{width: 80%}
      table.reliquat tr td.left{border: 1px solid; border-color:  black transparent black black ; border-top-left-radius: 0.5em;border-bottom-left-radius: 0.5em;}
      table.reliquat tr td.right{border: 1px solid; border-color:  black black black transparent ; border-top-right-radius: 0.5em;border-bottom-right-radius: 0.5em;}
      table.reliquat tr td.top{border: 1px solid; border-color:  black transparent transparent transparent ;width: 3em;}
      table.reliquat tr td.middle{border: 1px solid; border-color: transparent black  transparent transparent ;}
      table.reliquat tr td.topright{border: 1px solid; border-color:  black black transparent transparent ; border-top-right-radius: 0.5em;}
      table.reliquat tr td.bottomright{border: 1px solid; border-color: transparent black black  transparent ; border-bottom-right-radius: 0.5em;}
      table.reliquat tr td.bottomright svg{fill :white;}
      table.reliquat tr td#totalreliquat{padding-left: 1em;width: 8em;font-size: 15px;}
      
      table.reliquat tr td#totalrune{padding-left: 1em;width: 8em;font-size: 15px;}
      

      .no{display: none;}

      input.plusline {opacity: 0; margin-left: -2em; width: 2em; cursor: pointer;}

      .espace{width: 2em;}

      table#reliquatprem{padding-bottom: 1em;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
      table#reliquatdeux{border-top-left-radius: 0;border-top-right-radius: 0;margin-top: -3em;border-top: transparent;}

.result{color: #F1F1F1; font-weight: bolder;}

#deb{border-right: solid 0.1em #666;}

.reliquat tr:hover {color: #F1F1F1;}  
.reliquat {text-align: center; border-spacing: 1em; border: solid 0.5em #640043; margin-left: 2em; background-color: #333;color: #F1F1F1;border-radius: 1em;}
.reliquat tr td.nombre {width: 3em;padding-left: 1em;}
.nbr{
width: 100%;background-color: transparent;
appearance: unset;
    -moz-appearance: unset;
    -webkit-appearance: unset;
    -o-appearance: unset;
    -ms-appearance: unset;
    outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    box-sizing: border-box;
    -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
    border:none;border-bottom: 0.12em solid #999;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0em;
    margin-left: 0em;
    color: #F1F1F1;
  }

  input.nbr:focus{
  border-bottom: 0.1em solid #2bb33e;
}

nav.navigation{margin-top: 0;}


#reliquatprempetit{display: none;}
#reliquatprem{display: table;}
#reliquatdeuxpetit{display: none;}
#reliquatdeux{display: table;}

@media only screen and (min-width: 1024px) {
  
  body{margin-top: 0em;margin-bottom: 5em;}

  .contenu, div#deco, div#decobas{display: inline-block;}
  .contenu{width: 45em;}

  table.reliquat{border-spacing: 0em;margin: auto; width: 45em;padding:2em;padding-left: 4em;}
  div#decobas{padding: 0;}
      ul.deco li {margin-top: 3em;}
      ul.deco li {margin-bottom: 3em;}
      ul.deco img{border-radius: 0.5em;}
      .deco{margin: 2em;}
      div#deco{padding: 0; }      

      #decobas{margin-left: -4em;
          margin-top: 6em;
          position: absolute;}
      #deco{margin-left: -4em;
          margin-top: 6em;
          position: absolute;}

}

.navigation{display: block;}

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

  #reliquatprempetit{display: table;padding: 1em;}
  #reliquatprem{display:none ;}
  #reliquatdeuxpetit{display: table;border-top-left-radius: 0;border-top-right-radius: 0;margin-top: -5em;border-top: transparent;padding: 1em;}
  #reliquatdeux{display:none ;}
}

nav.navigation {font-size: 0.9em;} nav.navigation a{color: #333;} nav.navigation:hover span{color: #F1F1F1;}