html, body {
    max-width: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: relative;
    /*-webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0,0,0);
    -webkit-perspective: 1000;*/
}

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    border: none;
}

div.header {
    float: none;
}

.main.overlay {
    opacity: 0.85;
}

.main.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.85;
    z-index: 100;
}

div.loading {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" width="100" height="100"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect opacity="0" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(0 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite"/></rect><rect opacity="0.08333333333333333" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(30 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.08333333333333333s" repeatCount="indefinite"/></rect><rect opacity="0.16666666666666666" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(60 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.16666666666666666s" repeatCount="indefinite"/></rect><rect opacity="0.25" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(90 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.25s" repeatCount="indefinite"/></rect><rect opacity="0.3333333333333333" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(120 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.3333333333333333s" repeatCount="indefinite"/></rect><rect opacity="0.4166666666666667" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(150 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.4166666666666667s" repeatCount="indefinite"/></rect><rect opacity="0.5" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(180 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5s" repeatCount="indefinite"/></rect><rect opacity="0.5833333333333334" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(210 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5833333333333334s" repeatCount="indefinite"/></rect><rect opacity="0.6666666666666666" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(240 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.6666666666666666s" repeatCount="indefinite"/></rect><rect opacity="0.75" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(270 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.75s" repeatCount="indefinite"/></rect><rect opacity="0.8333333333333334" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(300 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.8333333333333334s" repeatCount="indefinite"/></rect><rect opacity="0.9166666666666666" x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#3fa9f5" transform="rotate(330 50 50) translate(0 -30)"><animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.9166666666666666s" repeatCount="indefinite"/></rect></svg>');
    background-position: top;
    background-repeat: no-repeat;
    text-align: center;
    height: 120px;
    width: 100px;
    color: #fff;
    display: block;
    position: fixed;
    z-index: 1000;
}
div.loading:after {
    content: "Loading...";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    display: block;
}

.panel {
    /*width: 23%;*/
    width: 25%;
    /*padding-right: 2%;*/
    overflow-y: scroll;
    /*background: #9b59b6;*/
    position: absolute;
    display: block;
    border-right: 1px solid #ccc;
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0,0,0);
    -webkit-perspective: 1000;
}

.panel > a {
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0,0,0);
    -webkit-perspective: 1000;
    display: block;
    font-size: 1.125em;
    color: #3fa9f5;
    padding: 1em 0 1em 3em;
    text-decoration: none;
    font-weight: 300;
    border-top: 1px solid #ccc;
    transition-property: background color;
    transition-duration: 0.1s;
    cursor: hand;
    cursor: pointer;
}
.panel > a[data-type=item] {
    display: none;
    border: 0 none;
    font-size: 0.85em;
    padding-left: 4.5em;
}
.panel > a.hover {
    color: #fff;
    background: #7AC1F4;
}
.panel > a.selected {
    color: #fff;
    background: #3fa9f5;
    cursor: default;
}

.panel > a:first-child {
    border-top: 0 none;
}

.main {
    height: auto;
    position: relative;
    /*background: #f1c40f;*/
    width: 100%;
    margin-left: 25%;
    display: block;
}
.area-main h3,
.subpage h3 {
   font-size: 14px;
    padding: 3em 0;
    color:#a3a3a3;
    border-bottom:1px solid #a3a3a3;
    font-weight:100;
    width: 800px;
    /*opacity:.3;*/
    /*transition: opacity 0.2s;*/
    position: relative;
    left: 25%;
    margin: 0 !important;
}
.area-main h3{
    padding: 2em 0;
    color: black;
    border-bottom: none;
    left: 10%;
}
#left-ar{
    display: none;
    left: 0;
    right: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 28px 18px 0;
    border-color: transparent #ffffff transparent transparent;
    line-height: 0px;
    _border-color: #000000 #ffffff #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
#right-ar{
    left: auto;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width:18px 0 18px 28px;
    -webkit-transform:rotate(360deg);
    border-color: transparent transparent transparent #ffffff;
    /* line-height: 0px; */
    _border-color: #000000 #000000 #000000 #ffffff;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');

}
.ar-fixed {
    position: fixed !important;
    top: 1.8% !important;
    display: block !important;
}

/* #about-samples{
    background: #e6e6e6;
} */
/*
	

div.body > div > div {
	height: 1000em;
}*/