html, body {
	width:100%;
	height: 100%;
	margin:0;
	padding:0;
	}


body {
	background-color:#fff;
	border:0;
	box-sizing:inherit;
	}

img	{
	max-width:100%;
	height:auto;
	}

h1.category	{
	margin-top:0;
	padding-top:20px;
	padding-bottom:0;
	margin-bottom:0;
	margin-left:3em;
	font-family: 'Darker Grotesque',sans-serif;
	font-size:2vw;
	font-weight:400;
	z-index:5000;
	}

.sidebar {
	width:18%;
	position:relative;
	float:left;
	background-color:#ebe9ea;
 	min-height: 100%;
	}

#wrapper	{
	position:relative;
	float:right;
	width:82%;
	margin-top:0px;
	clear:right;
	background-color:#fff;
	}

h1.logo1	{
	font-family: 'Darker Grotesque',sans-serif;
	font-size:2.3vw;
	font-weight:600;
	margin-top:0;
	padding-top:30px;
	margin-left:20px;
	letter-spacing:4px;
	padding-bottom:0;
	margin-bottom:0;
	}

h1.logo2	{
	font-family: 'Darker Grotesque',sans-serif;
	font-size:1.5vw;
	font-weight:400;
	margin-left:20px;
	margin-top:0;
	padding-top:0;
	letter-spacing:5px;
	}

h2	{
	font-family: 'Darker Grotesque',sans-serif;
	font-size:1.5vw;
	font-weight:400;
	margin-left:3em;
	}

h3	{
	font-family: 'Darker Grotesque',sans-serif;
	font-size:1.2vw;
	font-weight:400;
	margin-left:3em;
	}

nav	{
	font-family: 'Darker Grotesque';
	font-size:18px;
	}

nav ul	{
	list-style-type:none;
	color:#6b4156;
	}

nav a:link	{
	text-decoration:none;
	outline:none;
	color:#6b4156;
	}

nav a:visited {
	color:#6b4156;
	text-decoration:none;
	}

nav  a:hover  {
	color:#6b4156;
	text-decoration:none;
	border-bottom:1px solid #6b4156;
	}

nav a:active {
	color:#6b4156;
	text-decoration:none;
	}


.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.fill-height-or-more > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.some-area > div {
  padding: 1em;
}
.some-area > div:nth-child(1) {
 background-color:#ebe9ea;
}
.some-area > div:nth-child(2) {
  background-color:#ebe9ea;
}
.some-area > div:nth-child(3) {
  background-color:#ebe9ea;
}
.some-area > div:nth-child(4) {
  background-color:#ebe9ea;
}
.some-area > div:nth-child(5) {
  background-color:#ebe9ea;
}
.some-area > div h1, .some-area > div h2 {
margin: 0 0 0.2rem 0;
}
.some-area > div p {
  margin: 0;
}



a:link.foot	{
	text-decoration:none;
	outline:none;
	color:#6b4156;
	}

 a:visited.foot {
	color:#6b4156;
	text-decoration:none;
	}

 a:hover.foot  {
	color:#6b4156;
	text-decoration:none;
	border-bottom:1px solid #6b4156;
	}

 a:active.foot {
	color:#6b4156;
	text-decoration:none;
	}


a:link	{
	text-decoration:none;
	outline:none;
	color:purple;
	}

 a:visited {
	color:purple;
	text-decoration:none;
	}

 a:hover  {
	color:purple;
	text-decoration:none;
	border-bottom:0;
	}

 a:active {
	color:purple;
	text-decoration:none;
	}

@media only screen and (min-width: 760px) {


#scroll {
	height:736px;
	margin-top:0;
	margin-bottom:0;
	margin-right:30px;
	padding-bottom:0;
	margin-left:auto;
	background:#fff;
	border:0px solid #c2c0c1;
	overflow:auto;
	
	}

}

#scroll ul {
	float:left;
	margin-right:-5000em;
	white-space:nowrap;
	list-style:none;
	}

#scroll li {
	margin:15px;
	text-align:center;
	float:left;
	display:inline;           
	}

#scroll img {
	border:0;
	display:block;
	border:0px solid #A3CBE0;
	}

#scroll a:active img, #scroll a:focus img, #scroll a:hover img {
	border:0px solid #000;
	}

#scroll a {
	text-decoration:none;
	font-weight:bold;
	color:#000;
	}

#scroll a:active, #scroll a:focus, #scroll a:hover {
	color:#000;
	}

#scroll span {
	padding:5px 0 0;
	display:block;
	}


/* ------------- Flexcroll CSS ------------ */
.scrollgeneric {
	line-height:1px;
	font-size:1px;
	position:absolute;
	top:0px;
	left:0;
	}

.hscrollerbase {border:1px solid #000;
	height:30px;
	background:white;
	visibility: visible !important; 
	}



.hscrollerbar {
	height:28px;
	background:#ddd;
	cursor:ew-resize;
	padding:1px;
	border:0px solid #000;
	}


.hscrollerbar:hover {
	background:#000;
	border:0px solid #000;
	}

/* -------------end  Flexcroll CSS ------------ */


.titles	{
	margin-top:1em;
	padding:0;
	margin-left:10px;
	font-family: helvetica, arial,sans-serif;
	font-size:13px;
	}

.quotes	{
	font-family: 'Bellota Text', cursive;
	padding-right:1em;
	padding-left:1em;
	padding-top:4px;
	padding-bottom:4px;
	font-size:14px;
	line-height:1.4;
	vertical-align:top;
	height:auto;
	}

.center	{
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	display:block;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:0;
	vertical-align:top;
	
	}

img.portrait	{
	display:inline;
	float:left;
	margin-top:3em;
	padding-right:4em;
	padding-bottom:2em;
	}

.topper	{
	margin-top:40px;
	}

.gene	{
	font-family: 'Bellota Text', cursive;
	font-size:2vh;
	line-height:1.6;
	margin-left:1em;
	margin-right:4em;
	}


.credit	{
	font-family: 'Bellota Text', cursive;
	font-size:15px;
	font-weight:500;
	margin-top:18em;
	}

* 	{
  	box-sizing: border-box;
	}

/* Create four equal columns that float next to each other */

.column {
  	float: left;
  	width: 25%;
  	padding: 0;
  	height: 280px; 
	}

/* Clear floats after the columns */
	
.row:after {
  	content: "";
  	display: table;
  	clear: both;
	}

.row	{
	position:relative;
	float:left;
	width:100%;
	}


p.footer	{
	font-family: 'Darker Grotesque',sans-serif;
	width:80%;
	margin-left:1em;
	padding-bottom:2em;
	}

.info	{
	display:block;
	}

p.howto	{
	line-height:17px;
	font-family: 'Darker Grotesque',sans-serif;
	width:80%;
	margin-left:1em;
	padding-bottom:0;
	}