/*** === 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 {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
		background: #a01d21;
        height: 25vh;
	}

    #schwa {
        clip-path: polygon(14% 0%,100% 0%,86% 43%,0% 43%);
        z-index: 1;
        grid-column:2/2;
        grid-row: 3/3;
        background-color: var(--jifsan-red-lighttwo)
    }

	#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);
	}
    header a img {
        max-width: 40vw;
        max-height: 15vh;
    }

	#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; overflow-x:hidden;}
	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 ***
    **************/
    #nav {
        display: block;
    }
    #sidenav-div{
        display:none;
    }
    .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: 40vh;
        /*width: 35vw;*/
        align-self:center;
	}

    div.flexslider ul.slides img {
        height: 40vh;
    }

    .carousel-inner > .item >img{
        /*min-height : 300px;*/
        /*max-height : 300px;*/
        /*width : 100%;*/
    }

    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 { justify-content: center; width: 100%; }
    /*#home-flex { display: flex; flex-direction: column;  }*/
    #home-flex-ccc{
        width:70%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        transform:translateX(21%);

        overflow-wrap:break-word;
    }
    #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-news {
        margin-bottom: 1em;
    }

    .home-foodrisk.desktop {
        display: inline-block;
        margin: 0;
        width: 70%;
        /*transform:translate3d(12vw, 30vh, 0);*/
    }
    .home-foodrisk.mobile { display: none; }


    /***************
     *** 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: column;
        justify-content: space-between;
        height:inherit;
    }

    /********************
     *** 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; }
    /*#mission_statement {height:500px;}*/
    /*******************
     *** 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;
        padding: 0 0 1em 0;
        width: 300px;
    }
    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: 10px solid #2c2c2c;
        color: #2c2c2c;
    }
    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: 20px solid #a01d21;
        color: #a01d21;
        font-weight: bold;
    }
    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 ***
     **********************/

    #nav {
        list-style: none inside;
        margin: 0;
        padding: 0;
        text-align: center;
        align-content: space-between;
    }

    #nav li {
        display: block;
        position: relative;
        float: left;
        background: var(--jifsan-black);
        height: 65px;
    }

    #nav li a {
        display: block;
        padding: 0px 10px 0px 10px;
        text-decoration: none;
        min-width: 100px;
        line-height: 65px;
        color: #fff;
    }

    #nav li li a {
        min-width: 100px;
        line-height: 65px;
    }

    #nav li:hover {
        background: var(--jifsan-black-lighten);
    }

    #nav ul {
        position: absolute;
        padding: 0;
        left: 0;
        display: none;
    }

    #nav li:hover ul ul {
        display: none;
    }

    #nav li:hover ul {
        display: block;
    }

    #nav li li:hover ul {
        display: block;
        margin-left: 100px;
        margin-top: -65px;
    }

    #nav li li:hover ul a {
        min-width: 380px;
    }

    #flex-right {
        background-color: var(--jifsan-black);
    }

    .nav-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        z-index: 4;
        background-color: var(--jifsan-black);
        align-self: flex-start;
        width: 100vw;
    }

    .nav-wrapper ul li a span {
        font-size: 0.85em;
        font-weight: bold;
    }
    #nav #research-nav li:hover ul {
        display: block;
        margin-left: 100px;
        margin-top: -130px;
    }

    #collab-nav:hover li{
        width: 112px;
    }

    #partnerships:hover li{
        width:380px;
    }

    #me-nav:hover li{
        width:250px;
    }

    #nav #interco-nav:hover ul{
        margin-top: -130px;
        margin-left: 112px;
    }

    #nav #interco-nav:hover ul li{
        display: block;
        width: 480px;
    }

    #nav #partnerships:hover ul{
        margin-top: -65px;
        margin-left: 112px;
    }

    #nav #partnerships:hover ul li{
        display: block;
        min-width: 380px;
    }

    #news-nav:hover li {
        width:112px;
    }

    #train-nav:hover li{
        width:140px;
    }

    #train-nav li:hover li{
        width: 500px;

        margin-left: 40px;
    }
    #inttra-nav li a span{
        width:112px;
    }

    #research-nav:hover li{
        width:180px;

    }
    #research-nav li:hover li{
        width:400px;
        margin-left: 80px;
        top: 65px;
    }
    #about-nav:hover li{
        width:180px;
    }
    #people-nav:hover li{
        width:400px;
        margin-left: 80px;
    }



}