/*** === DESKTOP === ***/

/* Trigger by minimum width */
@media screen and (min-width: 1041px) {
	/*****************************
	 *** Show Desktop Elements ***
	 *****************************/
	.desktop { display: initial; }
	.desktop.title { display: block; }

	/**************
	 *** Events ***
	 **************/
	span.desktop { display: initial; }

	/**************
	 *** HEADER ***
	 **************/
	header { height: 130px; }
	#header-content {
		width: 1400px;
	}
	#cfs3-button a:hover, #jifsan:hover {
		background: -moz-linear-gradient(top, #6793b5 0%, #5883a5 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6793b5), color-stop(100%, #5883a5));
		background: -webkit-linear-gradient(top, #6793b5 0%, #5883a5 100%);
		background: -o-linear-gradient(top, #6793b5 0%, #5883a5 100%);
		background: linear-gradient(to bottom, #6793b5 0%, #5883a5 100%);
		background: rgba(255, 255, 255, 0.09);
	}
	#jifsan-logo {
		background-size: 90px 90px;
		height: 90px;
		margin-right: 1em;
		width: 90px;
	}
	#jifsan-title {
		height: 63px;
		width: 245px;
	}
	#cfs3-button, #cfs3-button a {
		align-items: center;
		color: white;
		display: flex;
		height: 90px;
		width: 435px;
	}
	#cfs3-button #cfs3-button__cfs3 {
		font-size: 64px;
		padding-right: 34px;
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}
	#cfs3-button #cfs3-button__cfs3 sup {
		font-size: 34.5px;
		position: absolute;
		top: 24.495px;
		vertical-align: baseline;
	}
	#cfs3-button #cfs3-button__right {
		font-size: 23px;
		font-weight: 300;
		padding-left: 15px;
	}
	#center-title {
		width: 300px;
		font-weight: 300;
		font-size: 2.8em;
		color: rgba(138, 185, 222, 0.7);
	}
	#slogan {
		text-align: right;
		font-style: italic;
		color: #a8bac7;
		font-weight: 300;
		font-size: 1.5em;
		width: 350px;
	}

	/**************
	 *** Tables ***
	 **************/
	div.table-wrapper {
		overflow-x: initial;
	}

	/***********************
	 *** JIFSAN Defaults ***
	 ***********************/
	html { box-sizing: border-box; }
	*, *:before, *:after { box-sizing: inherit; }
	img { max-width: none; }
	body { color: #333; font-size: 1em; }
	blockquote, q { quotes: none; }
	blockquote:before, blockquote:after, q:before, q:after {
		content: none;
	}

	/* Inserts */
	ins { text-decoration: none; }
	del { text-decoration: line-through; }

	/**************
	 *** Topbar ***
	 **************/
	.top-menu {
		display: block;
	}

	.top-menu .nav-wrapper > ul {
		margin: 0 auto;
		max-width: 1320px;
		padding: 0 1em;
	}

	.top-menu .top-menu__search {
		background-color: #3d3d3d;
		float: right;
		margin: 0;
	}

	.top-menu .top-menu__search,
	.top-menu .top-menu__search a {
		padding: 0;
		width: 240px;
	}

	.top-menu ul li:hover,
	.top-menu ul li li	{
		background-color: rgba(97, 97, 97, 0.94);
	}

	.top-menu ul li:hover ul {
		display: block;
	}

	.top-menu ul li:not(.top-menu__search) a:hover {
		background-color: rgba(97, 97, 97, 0.94);
		background: var(--jifsan-red);
	}

	.top-menu ul ul li {
		float: initial;
	}

	/****************
	 *** Homepage ***
	 ****************/
	div.flexslider {
		height: 378px;
		width: 756px;
	}

	div.flexslider ul.slides img {
		height: 378px;
	}

	ol.flex-control-nav.flex-control-paging { bottom: 2em; }
	#home-featured .headline { bottom: 4em; font-size: 2em; left: 1.2em; }
	#home-featured .button { bottom: 3em; font-size: 1.4em; left: 1.7em; }
	#home-content { max-width: 1400px; }
	#home-flex { display: flex; flex-direction: row; }
	#home-flex__left {
		justify-content: initial;
		margin-right: 1em;
		min-width: 220px;
		order: 1;
		width: 220px;
	}
	
	#home-flex__top {
		justify-content: initial;
		order: 2;
	}

	#home-flex__right {
		margin: 0 0 0 1em;
		order: 3;
	}

	#home-flex__top {
		margin: 0;
		width: 756px;
	}
	.home-foodrisk.desktop {
		display: initial;
		margin: 0;
	}
	.home-foodrisk.mobile { display: none; }
	#home-meetings-risk ul li a:hover { color: #333; }
	#home-meetings-recent ul li a:hover { color: #333; }
	#home-social .socialPanel { height: 100px; width: 100px; }
	#home-social .socialPanel > a { height: 100px; width: 100px; }

	/***************
	 *** CONTENT ***
	 ***************/
	#content {
		align-items: start;
		background-color: #ebebeb;
		display: grid;
		grid-gap: 20px;
		grid-template-columns: 300px 1fr;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;;
	}

	/*************************************
	 *** Page Content                  ***
	 *** - can be wider than on mobile ***
	 *************************************/
	#page-content { margin: 0 1em 0 1em; max-width: 1120px; padding: 0 2em; }
	#page-content.edit { max-width: 100%; }

	/******************************
	 *** Flex Container         ***
	 *** - move sidebar to left ***
	 ******************************/
	#flex-container {
		flex-direction: row;
		justify-content: space-between;
		margin: 1em 0;
	}

	/********************
	 *** Site Section ***
	 ********************/
	#site-section { background-color: #ccc; height: 80px; }
	#site-section span {
		color: #999;
		display: inline-block;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 80px;
		padding: 0 0.8em;
	}

	/****************************************
	 *** List of Events, News, or Courses ***
	 ****************************************/
	.listed-course:hover, .listed-event:hover, .listed-news:hover {
		background-color: silver;
		transition: background-color 0.1s;
		text-decoration: none;
	}

	/********************************
	 *** Upcoming and Past Events ***
	 ********************************/
	#upcoming-events { margin-bottom: 2em; }
	#upcoming-events .title, #past-events .title { margin-bottom: 0.4em; }

	/***********************
	 *** JifPage Content ***
	 ***********************/
	#jifpage-content table#people { width: 100%;}
	#jifpage-content table#people thead tr th:first-child { display: table-cell; }
	#jifpage-content table#people tbody tr td:first-child { display: table-cell; }

	/*******************
	 *** Biographies ***
	 *******************/
	div#Person div#Person__basicInfo {
		align-items: initial;
		display: flex;
		flex-direction: row;
		text-align: initial;
	}
	div#Person img#Person__portrait {}

	/*****************
	 *** Paginator ***
	 *****************/
	.paginator > ul.page-numbers > li:not(.disabled) > a > span.desktop {
		display: inline;
	}
	.paginator > ul.page-numbers > li > a:hover { background-color: #cccccc; }

	/**************
	 *** Footer ***
	 **************/
	#footer-sections { display: flex; justify-content: space-around; }
	#footer-location, #footer-more {
		min-height: 254px;
		width: 284px;
		border-bottom: none;
		padding: 0;
		margin: 1em;
	}
	#footer-location a:hover, #footer-more a:hover { color: white; }

	/***************
	 *** Sidebar ***
	 ***************/
	div.side-menu {
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-bottom: 0;
		min-width: 360px;
		padding: 0 0 1em 0;
		width: 360px;
	}
	div.side-menu > ul {
		display: block;
	}
	div.side-menu > ul > li.menu__entry-mobile {
		display: none !important; /* overrides JS */
	}
	div.side-menu li.menu__entry-desktop,
	div.side-menu li.menu__entry-desktop#active {
		display: block;
	}
	div.side-menu li > div#menu-title {
		background-color: var(--jifsan-red);
		border-bottom: 0.1em solid #505050;
		border-top-right-radius: 4px;
		display: block;
		margin-bottom: 0.3em;
	}
	div.side-menu li > div#menu-title > span#desktop-title { display: inline; }
	div.side-menu #mobile-title { display: none; }
	div.side-menu > ul > li:not(.show) > a.menu-item,
	div.side-menu > ul > li:not(.show) > a.menu-dropdown {
		border-left: 5px solid #505050;
	}
	div.side-menu > ul > li.show > a.menu-dropdown {
		border-left: 5px solid var(--jifsan-red);
	}
	div.side-menu li.show > a.menu-dropdown {
		border-left: 5px solid var(--jifsan-red);
	}
	div.side-menu li:not(.show) > a.menu-item,
	div.side-menu li:not(.show) > a.menu-dropdown {
		border-left: 5px solid gray;
	}
	div.side-menu li#active > a.menu-item { border-left: 5px solid red; }
	div.side-menu li > a.menu-item, div.side-menu li > a.menu-dropdown {
		border-bottom: 1px solid #444;
	}

	/* menu entries highlighted on hover, and left border changes color */
	div.side-menu li:not(#active) > a.menu-item:hover,
	div.side-menu li:not(#active) > a.menu-dropdown:hover {
		border-left: 0.3em solid red;
		transition: border-left 0.2s ease-in;
	}
	div.side-menu li:not(#active) > a.menu-item:hover,
	div.side-menu li:not(#active) > a.menu-dropdown:hover {
		border-left: 5px solid red;
	}
	div.side-menu a.menu-item:hover,
	div.side-menu a.menu-dropdown:hover { background-color: #616161; }

	/* icon */
	i.fa-plus, i.fa-minus { font-size: 1em; }

	/***************
	 *** Dialogs ***
	 ***************/

	/*************
	 *** Chips ***
	 *************/
	div.chip-filter.close:hover i.fas {
		filter: brightness(150%);
		padding-left: 12px;
	}

	/**************
	 *** Filter ***
	 **************/
	div.filter a.filter-icon-clickable:hover div.filter-icon {
		color: lightgrey;
		cursor: pointer;
	}

	div.filter div.chip-filter:hover {
		background-color: lightgrey;
		cursor: pointer;
	}

	/***************
	 *** Buttons ***
	 ***************/

	/**********************
	 *** Dropdown Menus ***
	 **********************/

	/****************
	 *** Checkbox ***
	 ****************/
}