/* Show it is fixed to the top */
body {
 /* min-height: 79.5rem;*/
  background: #6699cc;
}

@media (max-width:767px){
body {
padding-top: 55px;
}
}


ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-top: 15px;
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
	box-shadow:#666 0px 0px 3px;

}
ul.nav li {
	border-bottom: 1px solid #666; /* this creates the button separation */
	width: 100%;
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
	background: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background: #6F7D94;
	color: #FFF;
}
.button {
  position: relative;
  margin: 15px auto;
  display: block;
  width: 450px;
  height: 82px;
  text-decoration: none !important;
  background-color: #fafafa;
  color: #131313;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 4px #e7e7e7, 0 6px 1px #d0d0d2;
  -webkit-box-shadow: 0 4px #e7e7e7, 0 6px 1px #d0d0d2;
  box-shadow: 0 4px #e7e7e7, 0 6px 1px #d0d0d2;
}
.button * {
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
.button .title {
  display: block;
  padding: 15px 0 0 20px;
  font-size: 2em;
}
.button .price {
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 2.5em;
  font-weight: 700;
  color: #9a9ca2;
}
.button .price strong {
  display: inline-block;
  height: 100%;
  width: 36px;
  line-height: 82px;
  font-size: 1.25em;
  text-align: center;
  background-color: #eee;
  color: #ddd;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0;
  border-radius: 0 10px 10px 0;
  text-shadow: 0 -1px #8d8f96;
  -moz-box-shadow: 0 4px #d7d4d4;
  -webkit-box-shadow: 0 4px #d7d4d4;
  box-shadow: 0 4px #d7d4d4;
}
.button:before {
  position: absolute;
  content: "";
  display: block;
  width: 6px;
  height: 100%;
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px 0 0 10px;
  -moz-transition: all 0.075s linear;
  -o-transition: all 0.075s linear;
  -webkit-transition: all 0.075s linear;
  transition: all 0.075s linear;
}
.button.blue:before {
  background-color: #7daee9;
  -moz-box-shadow: 0 4px #719dd2;
  -webkit-box-shadow: 0 4px #719dd2;
  box-shadow: 0 4px #719dd2;
}
.button.blue:hover:before {
  background-color: #719dd2;
  -moz-box-shadow: 0 4px #6085b3;
  -webkit-box-shadow: 0 4px #6085b3;
  box-shadow: 0 4px #6085b3;
}
.button.blue:active:before {
  -moz-box-shadow: 0 2px #6085b3;
  -webkit-box-shadow: 0 2px #6085b3;
  box-shadow: 0 2px #6085b3;
}

.button:hover {
  -moz-box-shadow: 0 4px #e2e2e2, 0 6px 1px #ccccce;
  -webkit-box-shadow: 0 4px #e2e2e2, 0 6px 1px #ccccce;
  box-shadow: 0 4px #e2e2e2, 0 6px 1px #ccccce;
}

.button:hover .price strong {
  background-color: #e9e9e9;
  -moz-box-shadow: 0 4px #d3d0d0;
  -webkit-box-shadow: 0 4px #d3d0d0;
  box-shadow: 0 4px #d3d0d0;
}

.button:active {
  top: 1px;
  -moz-box-shadow: 0 2px #e2e2e2, 0 4px 1px #ccccce;
  -webkit-box-shadow: 0 2px #e2e2e2, 0 4px 1px #ccccce;
  box-shadow: 0 2px #e2e2e2, 0 4px 1px #ccccce;
}
main table {}
main table tr td { border: #ccc 1px solid; padding: 10px 10px; text-align: justify; width: 180px; max-width: 180px; word-wrap: break-word;}
main table tr td:first-child { padding: 0px 0px;}

.beton td{ text-align:center; vertical-align:middle;} 
.beton tr td.b1 { background-color: #0bb4c1; }
.beton tr td.b2 { background-color: #ffffff; }
.beton tr td.b3 { background-color: #f5f835; }
.beton tr td.b4 { background-color: #fce15f; }
.beton tr td.b5 { background-color: #b8f872; }
.beton tr td.b6 { background-color: #70fa6b; }

@media (max-width:767px){
.beton { display:none;}
}

.page-header  { padding: 10px 10px;}

@media (max-width:767px){
main { background:#fff; width:100%;}
}
@media (min-width:768px){ main {background: #9F9;}}

@media (min-width:768px){.hidden-xs-up{display:none!important}}
@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}