/* Variables */

$accordion: 700px; // Accordion width
$panelheight: 200px; // Applied to "max-height" - Must be larger than the panel content
$items: 5; // Specify the number of panels present in HTML

$panel_bg: darken(white, 5%); // bg color of the accordion panel
$label_bg: lighten(#ccc, 10%); // bg color of the accordion labels

// Don't edit below
$label_bg_active: darken($label_bg,7.5%);
$num_bg: darken($label_bg_active,15%);
$border_col: darken($label_bg,40%);
$label_color: black;
// Don't edit above

$gutter: 15px; // General padding around items
$ts: all 0.2s ease; // General transition effect

/* Styles */

* {
box-sizing: border-box;
}

%reset {
margin: 0;
padding: 0;
}

html,
body {
min-height: 100%;
}

body {
font-family: Sans-Serif;
font-size: 14px;
letter-spacing: 0.5px;
line-height: 1.4;
color: darken(white, 50%);
@extend %reset;
}

h1 {
font-weight: 700;
font-size: 24px;
color: black;
padding: 15px 15px 0;
margin: 0;
}

.block {
max-width: $accordion;
width: 100%;
height: 100%;
float: left;
padding: $gutter;
z-index: 10;
background-color: white;
overflow: hidden;

@media screen and (max-width: 599px) {
max-width: 100%;
}

> div {
display: block;
position: relative;
padding: 0 0 0 20px+$gutter;
//border: 1px solid $border_col;
//border-bottom: none;
//border-top: 1px solid $border_col;
//background-color: $panel_bg;
@extend %reset;

&:not(:last-of-type) {
margin: 0 0 10px;
}

@if lightness($panel_bg) Frequently Asked Questions