hmtl {
	height: 100%;
}

body {
	height: 100%;
}

#wrapper {
	min-height: 100%;
}

.bbslides {
	background: #fff;
	border: thin solid #8d896c;
}

.price {
	background: #8d896c;
	padding: 5px 10px;
	color: #fff;
	width: 132px;
}

.logo {
	text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 200px;
	height: auto;
}

.top100 {
	padding-top: 100px;
}

.top50 {
	padding-top: 50px;
}

.top20 {
	padding-top: 20px;
}

.colorsub {
	color: #8d896c;
	text-transform: uppercase;
}

.nopad {
	padding: 0;
}

.footer {
	position: relative;
	bottom: 0;
	border-top: thin solid #ccc; 
	text-align: center;
	width: 100%;
	padding-top: 10px;
}

.footer p {
	font-size: 70%;
	letter-spacing: 2px;
}

/**************** MENU ****************/

.header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
	max-width: 880px;
}

.header li a {
  display: block;
  padding: 20px 10px;
  text-decoration: none;	
	text-align: center;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/********************* MENU	 48em = 768px *********************/

@media (min-width: 48em) {
  .header li {
    float: left;
	text-align: center;
  }
  .header li a {
    padding: 20px 30px;
	text-align: center;
  }
  .header .menu {
    clear: none;
    float: none;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

@media (man-width: 48em) {
  .header li {
    float: none;
  }
}


/****************** accordion*****************/
/**
 * Tabs
 */
.tabs {
	display: flex;
	flex-wrap: wrap; // make sure it wraps
}
.tabs label {
	order: 1; // Put the labels first
	display: block;
	padding: 1rem 2rem;
	margin-right: 0.2rem;
	cursor: pointer;
  background: #fff;
	color: #444;
  font-weight: bold;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99; // Put the tabs last
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 1rem;
  background: #fff;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label {
	color: #fff;
	background: #8d896c;
}
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

/****************** slideshow ******************/
.page {
  width: 640px;
  margin: 0 auto;
}

.slideshow {
	width:640px;
	height:360px;
	position:relative;
	text-align:center;
	line-height:750px;
	padding-bottom:30px
}
.slideshow input[type=radio] {
	font-size:.75em;
	width:1em;
	height:1em;
	display:inline-block;
	position:relative;
	z-index:99;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background:#ccc;
	border-radius:1em;
	transition:.3s ease-out background,.3s ease-out transform
}
.slideshow input[type=radio]:checked {
	background:#999;
	outline:none;
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	transform:scale(1.3)
}
.slideshow .slideshow-item {
	width:640px;
	height:360px;
	line-height:1.5;
	position:absolute;
	top:0;
	opacity:0;
	transition:.3s ease-out opacity
}
.slideshow .slideshow-item label {
	position:absolute;
	top:0;
	bottom:0;
	width:50%;
	display:none;
	z-index:88;
	cursor:pointer;
	color:transparent;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.slideshow .slideshow-item label:after {
	display:block;
	content:'\25B6';
	font-size:2em;
	color:#fff;
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-.5em
}
.slideshow .slideshow-item label.previous {
	left:0;
	display:block
}
.slideshow .slideshow-item label.previous:after {
	-webkit-transform:scaleX(-1);
	-moz-transform:scaleX(-1);
	transform:scaleX(-1);
	right:auto;
	left:10px
}
.slideshow .slideshow-item label.next {
	left:50%;
	display:block
}
.slideshow input[type=radio]:checked+.slideshow-item {
	opacity:1
}