table, th, td {
  border: 1px solid black;
  padding: 2px;
}

th {
  background: #333; 
  color: white; 
  font-weight: bold; 
}

table {
   width:100%;
}

.two-table tr , .two-table th {
   width:50%;
}

tr:nth-child(odd){ 
    background: #dae5f4;
}

tr:nth-child(even){
    background: #ffffff;
}

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


    .tableall table, .tableall thead, .tableall tbody, .tableall th, .tableall td, .tableall tr {
      display: block;
    }

    .three table, .three thead, .three tbody, .three th, .three td, .three tr {
      display: block;
    }

    .tableall thead tr, .three thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    .tableall th, .three th {
      display: none;
    } 

    .tableall tr, .three tr { border: 1px solid #ccc; }

    .tableall td, .three td {
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
    }

    .tableall td:before, .three td:before {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
    }


    .tableall td:nth-of-type(1):before { content: "Ingrédient"; }
    .tableall td:nth-of-type(2):before { content: "1 tasse"; }
    .tableall td:nth-of-type(3):before { content: "3/4 tasse"; }
    .tableall td:nth-of-type(4):before { content: "2/3 tasse"; }
    .tableall td:nth-of-type(5):before { content: "1/2 tasse"; }
    .tableall td:nth-of-type(6):before { content: "1/3 tasse"; }
    .tableall td:nth-of-type(7):before { content: "tasse  1/4 tasse"; }
    .tableall td:nth-of-type(8):before { content: "2 c.table"; }

    .three td:nth-of-type(1):before { content: "Terme"; }
    .three td:nth-of-type(2):before { content: "Température"; }
    .three td:nth-of-type(3):before { content: "Appréciation visuelle"; }
}


  .parameters {
    padding-bottom: 12px;
    float: left;
    width: 100%;
  }

  .sort-by {
    float: left;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    overflow: hidden;
  }

  .sort-by a.a {
    background: linear-gradient(to top, #ececec 0%, #fcfcfc 100%);
    pointer-events: none;
    cursor: default;
    color: #000;
  }

  .sort-by a:first-child {
    border-left: 0px;
  }


.sort-by a, .category .select {
  display: inline-block;
  padding: 10px 14px;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  background-color: #fefefe;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fafafa), color-stop(1, #fefefe));
  background-image: -ms-linear-gradient(bottom, #fafafa, #fefefe);
  background-image: -moz-linear-gradient(center bottom, #fafafa 0, #fefefe 100%);
  background-image: -o-linear-gradient(#fefefe, #fafafa);
  background-image: linear-gradient(to top, #fafafa, #fefefe);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe',endColorstr='#fafafa',GradientType=0);
  border: solid 1px;
  border-color: #cccccc #c5c6c8 #b6b7b9;
  color: #4e5665;
  text-shadow: 0 1px 0 #fff;
  float: right;
}

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

  .sort-by {
    width: 100%;
  }

  .sort-by a {
    width: 50%;
    box-sizing: border-box;
  }

}

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

  .sort-by {
    width: auto;
  }

  .sort-by a {
    width: auto;
  }
}


@media screen and (max-width: 550px) {
  .sort-by {
    width: 100%;
  }

  .sort-by a {
    width: 50%;
    box-sizing: border-box;
  }
}

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

  .sort-by a {
    width: 100%;
  }

  .sort-by a:first-child {
    border-bottom: 0px;
    border-left: solid 1px #c5c6c8;
  }
}