* {
	box-sizing: border-box;
}

/* For mobile phones: */
[class*="col-"] {
  width: 90%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
	/* For desktop: */
	.highlight {height:500px;}
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.bodyHome {
	background-color: #e9e9e9;
	background-image: url("../img/back.png");
	background-repeat: repeat-x;
}

.bodyInside {
	background-color: #ffffff;
	background-image: url("../img/backInside.png");
	background-repeat: repeat-x;
}

#headerArea {
	position: fixed;
	/*top:0;*/
	width: 100%;
	background: white;
	vertical-align: middle;
	z-index: 10;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#mainSection {
	position: relative;
	display: table;
	top: 90px;
	/*width: 90%;*/
	z-index: 0;
	margin: auto;
	width: 90%;
	margin-bottom: 1em;
	text-align: center;
}

.mainSectionTextDiv {
	display: inline-block;
	width: 90%;
	max-width: 900px;
	text-align: left;
}

.mainSectionImage {
	display:none;
	float:right;
}

.mainSectionButton {
    margin: 0 auto;
}

.highlightButton {
    margin: 0 auto;
}

.mainSectionButtonDiv {
	text-align: center;
	width:100%;
}

/*#mainSectionTable {
	margin: auto;
}
*/
/*#mainSectionTextCell {
	position: relative;
	top: -50px;
}
*/
/*#mainSectionImageCell {
}
*/
#headerArea {
	width: 100%;
	background-image: url("../img/bengal-header-straight.svg");
	background-size: cover;

}

#headerBlock {
	margin:auto;
	height:auto;
	width: 90%;
	vertical-align: middle;
	display:flex;
	align-items:center;
	padding-top:1em;
	padding-bottom:1em;
}

#logoImg {
	width:60px;
	margin: 0.75em;
}
.headerLogoDiv {
	display: inline-block;
	vertical-align: middle;
}

.headerLogoTextDiv {
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;
	text-align:left;
}

.menuDiv {
    font-family: 'museo-slab', serif;
	vertical-align: middle;
	flex-grow:1;
}

#headerText {
    font-family: 'museo-slab', sans-serif;
	font-size: 1.75em;
	line-height: 1.3em;
	text-decoration: none;
	color: #ffffff;
	/* font-variant-caps: small-caps; */
}

#headerText a {
	text-decoration: none;
	color: #ffffff;
}

#subHeaderText {
    font-family: 'museo-slab', serif;
	font-size: 1em;
}

#subHeaderText a {
	text-decoration: none;
    color: #f47920;
}

#mainMenu {
    font-family: 'museo-slab', serif;
    /*font-family: 'Crimson Text', serif;*/
	text-align: center;
	margin:auto;
	overflow-wrap: normal;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.navbar {
	display:none;
}

.navbarSmall {
	display:flex;
	align-items:center;
	float:right;
}

#headerSmallMenuBlock {
	position:fixed;
	display:none;
	opacity: 0.95;
	width:100%;
	background-color: #333;
	padding:1em;
	top:100px;
	bottom:0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index:2;
	overflow-y:scroll;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
}

#headerSmallMenuDiv {
	width:100%;
	text-align: center;
	font-family: 'museo-slab', serif;
	/* font-variant-caps: small-caps; */
}

#mainSection {
	height: 200px;
}

.menu-link {
	display:block;
	text-align:left;
	color:#ffffff;
	padding:0.5em;
	text-decoration: none;
	border-top: solid 1px #444;
}

.submenu-link {
	display:block;
	text-align:left;
	color:#ffffff;
	padding:0.5em;
	text-decoration: none;
	border-top: solid 1px #444;
	padding-left:2em;
}

.submenu-category-link {
	display:block;
	text-align:left;
	color:#f47920;
	padding:0.5em;
	text-decoration: none;
	border-top: solid 1px #444;
	font-weight:bold;
	background-color:transparent;
}

.highlight {
	display: inline-block;
	background-color: #333;
	border: solid 1px lightgray;
	vertical-align: top;
	margin: 0.75em;
	padding-bottom:1.25em;
	overflow-y: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.highlightImageHeader {
	width:100%;
}

.highlightVideoHeader {
	width:100%;
}

/*
    font-family: 'Roboto', sans-serif;

    font-family: 'Montserrat', sans-serif;

    font-family: 'Raleway', sans-serif;

    font-family: 'Muli', sans-serif;

    font-family: 'Quicksand', sans-serif;

    font-family: 'Muli', sans-serif;

*/

.highlight_header {
	display: block;
	text-align: left;
    font-size: 1.5em;
	margin: 16px;
    font-family: 'museo-slab', sans-serif;
    /* font-variant-caps: small-caps; */
    color: #f47920;
}

.highlight_blurb {
	display: block;
	text-align: left;
	padding: 0 16px 16px 16px;
    font-family: 'museo-slab', sans-serif;
    color:#ddd;

}

#highlights, #footer {
	position: relative;
	top: 100px;
	vertical-align: top;
	text-align: center;
}

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

#insidepage {
	position: relative;
	top:120px;
	width:90%;
	margin: auto;
}

#sidebar {
	display:none;
}

#sidebarSmallScreen {
	display:inline-block;
	width: 100%;
}

.box {
    font-family: 'museo-slab', sans-serif;
	border: solid 1px silver;
	background-color: #333;
	border: solid 1px silver;
	padding: 1em;
	margin-bottom: 1em;
	overflow-y: all;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boxheader {
    font-family: 'museo-slab', sans-serif;
    /* font-variant-caps: small-caps; */
    color: #f47920;
	display: block;
	font-size: 1.5em;
}

.boxlink {
	text-decoration: none;
	color: #ddd;
	display: block;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

.boxlink:hover {
	color: #f47920;
}

#content {
	float: left;
	width: 100%;
    font-family: 'museo-slab', sans-serif;
}

#content h1 {
    font-family: 'museo-slab', sans-serif;
	font-size: 2em;
    color: #f47920;
	display: block;
	/* font-variant-caps: small-caps; */
}

#content h2 {
	font-size: 1.25em;
    color: #f47920;
	/* font-variant-caps: small-caps; */
}

#content h3 {
    font-family: 'museo-slab', sans-serif;
	font-size: 1.35em;
	color: #f47920;
	display: block;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 1.75em;
	font-weight: normal;
	letter-spacing: 0.02em;
}

#content h4 {
    font-family: 'museo-slab', sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	font-style: italic;
	margin-top: 0.25em;
    color: #f47920;
	display: block;
	font-weight: normal;
}

#content .box {
    font-family: 'museo-slab', sans-serif;
	background-color: white;
	border: solid 1px silver;
	padding: 0 1.5em 1em;
	overflow-y: all;
	margin: 1.25em 1em 1em 0;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#content .author {
	font-style:italic;
	font-size:0.85em;
	color:#888888;
	margin-bottom: 1em;
}

#content p {
	letter-spacing: 0.025em;
	line-height: 1.5em;
	text-align: justify;
}

#content ul {
	padding-left: 1em;
	text-indent: 0;
}

#content li {
	list-style-type: disc;
	list-style-position: outside;
	color: #666666;
}

#content img.floater {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	width: 80%;
	float: none !important;
	clear:all;
	margin:auto;
	text-align:center;
	display:block;
}

#content a {
	text-decoration: none;
    color: #f47920;
}

#content a:hover {
	text-decoration: underline;
	color: #666;
}

#footer {
	clear: both;
    font-family: 'museo-slab', sans-serif;
    font-variant-caps: small-caps;
    font-size: 0.85em;
	padding: 2em;
    color: #888888;
	text-align:center;
	width: 90%;
	margin: auto;
	margin-bottom: 2em;
	margin-top: 1em;
}

#footer a {
	color: #f47920;
	text-decoration: none;
}

#footer a:hover {
	color: #000000;
}

.legalize {
	display: block;
	white-space: nowrap;
}

.copyright {
	display: block;
	white-space: nowrap;
}

h2 {
    font-family: 'museo-slab', sans-serif;
    font-size: 1.75em;
    color: #f47920;
}

.boxoutheader {
    font-family: 'museo-slab', sans-serif;
    font-variant-caps: small-caps;
    font-size: 1.5em;
    color: #444444;
    display: block;
    letter-spacing: 0.02em;
    padding-top:0.5em;
/*    margin-bottom: 0;
    padding-bottom: 0;
*/}

li {
	list-style: none;
    font-family: 'museo-slab', sans-serif;
	letter-spacing: 0.05em;
}

button, input[type=submit] {
    font-family: 'museo-slab', sans-serif;
	font-variant-caps: small-caps;
	margin-top:1.25em;
	padding: 0.75em 1.25em;
	/*font-weight: bold;*/
	background-color: #333;
	color: #fff;
	border: solid 1px #fff;
	cursor: pointer;
}

button:hover, input[type=submit]:hover {
	background-color: #f47920;
}

.categoriesCount {
	font-size: 0.85em;
	color: #f47920;
}


@media only screen and (max-width: 480px) {
	.smallMenuLabel {display:none;}
	#headerText { font-size: 1.25em; }
	#logoImg { width: 50px; }
	#subHeaderText { font-size: 0.7em; }
}

@media only screen and (min-width: 768px) {
	/* For desktop: */
	/* @@@@@ Medium Sized @@@@@ */

	#mainSection {top:140px;}
	#highlights, #footer {top: 90px;}

	.mainSectionImage {display:inline;}
	.mainSectionButton {text-align:left;}
	.highlightButton {text-align: left;}
	.mainSectionButtonDiv {text-align: left;}
	.highlightImageHeader {max-width:480px; max-height:270px;}
	.highlightVideoHeader {max-width:480px; max-height:270px;}
	.legalize {float:left;}
	.copyright {float:right;}
}

@media only screen and (min-width: 1280px) {
	/* For desktop: */
	/*@@@@@ Large Size @@@@@*/
	#mainSection {top:180px;}
	#highlights, #footer {top: 110px;}

	#headerText { font-size: 2.5em; }
	#logoImg { width: 100px; }
	#subHeaderText { font-size: 1em; }
	.navbar { display:inline-block; float:right;}
	.navbarSmall {display:none;}
	#headerSmallMenuBlock {display:none;}
}

 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

@media only screen and (min-width: 1124px) {
	#sidebar {float:left; width: 25%; height: 100%; display:inline-block;}
	.box {margin: 3em 2em 2em 0;}
	#insidepage {top: 160px;}
	#sidebarSmallScreen {display:none;}
}

@media only screen and (min-width: 1124px) {
	#content {width: 73%; margin: 1em 0 1em 0; }
}

@media only screen and (min-width:480px) {
	#content img.floater {width:auto;float:right !important;}
}