* {
    box-sizing: border-box;
}


.container {
  background-color: #f3cd38;
  //background-image:  linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),url('http://prenotazioni.aktivarium.it/image/sfondo.png');
  //background-image:  url("http://prenotazioni.aktivarium.it/image/sfondo.png");
  //background-repeat: repeat;
  //background-size: cover;

}

.header {
    border: 1px solid #000000;
    padding: 0px;
}

.main {
    width: 100%;
    float: left;
    padding: 15px;
    border: 1px solid #000000;
}


input.hint {

    color: grey;

    font-style:italic;

}



table {

  border: 1px solid #ccc;

  border-collapse: collapse;

  margin: 0;

  padding: 0;

  table-layout: fixed;

  width: 100%;

}

table tr {

  background: #f8f8f8;

  border: 1px solid #ddd;

  padding: .35em;

}

table th,

table td {

  padding: .625em;

  text-align: center;

}





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

  table thead {

    border: none;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

  }

  table tr {

    border-bottom: 3px solid #ddd;

    display: block;

  }

  table td {

    border-bottom: 1px solid #ddd;

    display: block;

    text-align: right;

  }

  table td:before {

    content: attr(data-label);

    float: left;

  }

}





.column-left{ float: left; width: 33%; }

.column-right{ float: right; width: 33%; }

.column-center{ display: inline-block; width: 33%; }