/* 
	Styles to be used for the top level landing pages.
*/
	h3
	{
		font: normal normal 600 24px myriad-pro!important;
		color: #3B3E3F;
	}

	#LandingHero {
		background-size: cover;
		background-repeat: no-repeat;
	}
	@media only screen and (max-width: 1255px)
	{
		#PageMessageOverlay
		{
			margin-top: 0px;
		}
	}
	@media only screen and (max-width: 769px)
	{
		#LandingHero 
		{
			background-position: center!important;
		}
		#PageMessageOverlay
		{
			width: 100%;
			clear: both;
			padding: 20px;
			margin: auto;
			right: unset;
			left: unset;
			position: relative;
			float: unset;
			font-size: 5px;
		}
		#PageMessageOverlay > img
		{
			display: none;
		}
		#PageMessageOverlay > p
		{
			font-size: 20px;
    		margin-left: 0px;
		}
		
		
		
	}
	div p
	{
		font: normal normal normal 16px myriad-pro;
		letter-spacing: 0.32px;
	}
	.BorderButton
	{
		padding: 12px 40px;
		border: 2px solid #004881;
		font: normal normal normal 15px Myriad Pro;
		letter-spacing: 0.3px;
		color: #004881;
		border-radius: 3px; 
	}
	.BorderButton:hover
	{
		background-color: #004881;
		color: white;
		text-decoration: none;
	}
	.SplitMenuLeftContent
	{
		font: normal normal normal 16px myriad-pro;
		letter-spacing: 0.32px;
		clear: both;
	}
	.row, .row .row
	{
		max-width: 1500px;
	}
	.button:hover
	{
		background-color: #F36B25!important;		
	}
	.BreadCrumb	
	{
		margin-top: 25px;
		letter-spacing: 0.28px;
		color: #eee;	
		left: 291px; 
		position: absolute;
		display: block;
		background-color: transparent;
		margin-left: unset;
		color: #f4f4f4!important;
	}
	.BreadCrumb a
	{
		color: #f4f4f4!important;

	}
	h1
	{
		display: block;
		position: absolute;
		margin-top: -170px;
		font: bold 56px Garamond Premier Pro;
		letter-spacing: -1.4px;
		color: #FFFFFF;
/* 		bottom:40px; */
	}
	h1::after
	{
		content: "";
		width: 237px;
		height: 3px;
		background-color: #F36B25;
		display: block;
		position: absolute;
		
		
	}
	#LandingHero
	{
		width: 100%;
		height: 60vh;
/* 		background-color:	#000; */
		background-color: #2d435d;
		background-image: url(/https/www.clark.edu/landing/template-header.jpg);
		background-position: top center;
		margin-top: 91px;
/* 		position:relative; */
	}
	
	#MainContent
	{
		background-color: #f5f7f8;
		width: 100%; 
		margin: 0;
		padding: 0;
		display: block;
		margin-top: 0px!important;
	}

	#MainContent h1:first-child
	{
		background: #000;
		background-color: rgba(0,0,0,0);
	}

	#TopPageContent
	{
		width: calc(100% - 365px);
		display: inline-block;
		margin-left: 0px;
		margin-right: 0px;
		vertical-align: top;
		padding: 20px;
		margin-top: -75px;
	}
	#RightNavContainer
	{
		width: 360px;
		margin-left: 0px;
		margin-right: 0px;
		display: inline-block;
		margin-top: -60px;
		padding-bottom: 30px;
	}
	#RightNavContainer li
	{
		margin-left: 0px;		
	}
	#TopRightNav
	{
		background-color: white;
		padding: 26px 50px;
		-webkit-box-shadow: 9px 20px 33px -17px rgba(86,86,86,0.66); 
		box-shadow: 9px 20px 33px -17px rgba(86,86,86,0.66);
		border-radius: 2px;
		margin-bottom: 40px;
	}
	#TopRightNav ul
	{
		list-style: none;
	}
	#TopRightNav > ul li a
	{
		font: normal normal normal 15px myriad-pro;
		letter-spacing: 0.3px;
		color: #004881;
		line-height: 30px;
		display: block;
		padding: 3px 3px 3px 10px;
		margin-left: -10px;
		
	}
	#TopRightNav ul li a:hover
	{
		text-decoration: underline;
	}
	#TopRightNav > ul li a:hover::before
	{
		content: "";
		position: absolute;
		display: block;
		width: 5px;
		height: 15px;
		background-color: #F36B25;
		margin-left: -25px;
		margin-top: 7px;
		text-decoration: underline;
	}
	#TopRightNav > ul > li > a
	{
		color:#004881;
		text-align: left;
		font: bold 19px myriad-pro;
		line-height: 120%;
		margin-top: 5px;
	}
	#TopRightNav > ul > li > a:hover::before
	{
		content: "";
		position: absolute;
		display: block;
		width: 5px;
		height: 17px;
		background-color: #F36B25;
		margin-left: -10px;
		margin-top: 4px;
		
	}
	#RightNavContainer .RightContainerOption
	{
		padding: 10px 50px;
	}
	#RightNavContainer .RightContainerOption h2
	{
		font: 600 22px Myriad Pro;
		letter-spacing: 0.44px;
		color: #3B3E3F;	
		margin-bottom: 12px;
		padding-bottom: 10px;
		border-bottom: 1px solid #c9c9c9;
	}
	.RightContainerOption ul
	{
		list-style: none;

	}
	.RightContainerOption li a
	{
		display: block;
		padding: 5px 5px 5px 25px;	
		font: normal normal normal 14px Myriad Pro;
		letter-spacing: 0.3px;
		color: #004881;
	}
	.RightContainerOption li a:before
	{
		content: "";
		width: 6px;
		background-color: #004881 ;
		height: 15px;
		position: absolute;
		display: block;
		vertical-align: middle;
		margin-top: -1px;
    	margin-left: -15px;
	}
	.RightContainerOption li a:hover
	{
		text-decoration: underline;
	}
	.RightContainerOption li a:hover:before
	{
		background-color: #F36B25;
	}
	#HeroCallouts
	{
		position: relative;
		display: block;
		width: calc(100%);
		margin: unset;
		padding: 0px;
		margin-left: unset;
	}
	#HeroCallouts li
	{
		position: relative;
		padding: 3px;
		float: left;
		list-style: none;
		margin-left: .5vw;
	}
	#HeroCallouts li a
	{
		
		display: block;
		background-color: #004881;
		width: 140px;
		height: 140px;
		padding: 17px 20px 5px 20px;
		color: #fff;
		font-size: 18px; 
		font-family: myriad-pro;
		letter-spacing: 0.18px;
		font-weight: bold;
	}
	#HeroCallouts li a:hover, #HeroCallouts li a:focus, #HeroCallouts li a:active
	{
		background-color: #F36B25!important;
		color: #000!important;
		font-weight: bold!important;
		text-decoration: none;
	}
	#HeroCallouts li a p
	{
		font-weight: bold;
	}

	#HeroCallouts li a i, #HeroCallouts li a span
	{
		position: absolute;
    	display: block;
    	bottom: 17px;
	}
	#HeroCallouts li a i:first-child, #HeroCallouts li a span:first-child
	{
		top: -4px;
		position: relative;
		font-size: 45px;
		text-align: right;
		width: 100%;
	}
	
	.DiscoverMoreLink
	{
		padding: 3px 5px;
		text-align: left;
		margin-left: 10px;
	}
	.DiscoverMoreLink::before 
	{
		content: "";
		width: 2px;
		height: 20px;
		position: absolute;
		background-color: #004881;
		margin-left: -10px;
	}	
	.DiscoverMoreLink::after 
	{
		font-family: "Font Awesome 5 Pro";
		content: "\f178";
		position: relative;
		font-size: 13px;
		padding-left: 11px;
		text-decoration: none;
	}
	hr
	{
		border: 0px;
	}
	.DiscoverMoreLink:hover
	{
		background-color: #004881!important;
		color: white!important;
	}
	.FullContainer
	{
		width: 100%;
		margin: 0px;
		padding: 0px;
		clear: both;
	}
	.WithRightNav
	{
		padding-right:230px;
		display: block;
		clear: both;
	}
	.CardsContainer
	{
		background-color: #edeeec;
		padding: 20px 0px;
	}
	
	@media only screen and (max-width: 1199px)
	{
		
		#RightNavContainer
		{
			
		}
		#RightNav
		{

		}
	}   
	@media only screen and (max-width: 1125px)
	{
		#HeroCallouts
		{
			
    		margin: auto;
		}	
	}  	
	@media only screen and (max-width: 976px)
	{
		#HeroCallouts
		{
			
    		margin: auto;
		}
	}	
	@media only screen and (max-width: 822px)
	{
		#HeroCallouts
		{
			width: 100%;
    		margin: auto;
		}
	}	
	@media only screen and (max-width: 769px)
	{
		.BreadCrumb	
		{
			margin-top: 52px;
			letter-spacing: 0.28px;
			color: #eee;	
			left: 10px; 
			position: absolute;
			display: block;
		}
		#HeroCallouts
		{
			margin: auto;
		}
		#RightNavMenuButton
		{
			text-align: left;
			background-color: white;
			position: absolute;
			margin: auto;
			margin-top: -117px;
			width: calc(87vw);
			left: 0;
			margin-left: 5vw;
			border: none;
			color: black;
			padding: 8px;
			height: 30px;
		    line-height: 100%;
		}
		#RightNavMenuButton i
		{
			margin-right: 19px;
			float: right;
			font-size: 22px;
			height: 30px;
		    line-height: 100%;
			margin-top: -3px;
		}
		.RightNavButtonSelected
		{
			width: 100%!important;
			border: none;
			border-bottom: 1px solid #ddd!important;
			margin-left: 0px!important;
			top: 160px!important;
			margin-top: -45px!important;
			position: fixed!important;
			z-index: 101;
			padding-top: 20px!important;
			height: 50px!important;
		}
		h1
		{
 			margin-top: -221px; 
		    font-size: 41px;
			line-height: 100%;
		    margin-left: 14px;
		}
		#TopPageContent 
		{
			width: 100%;
		}
		h1::after
		{
			width: 140px;
		}
		#LandingHero
		{
			height: 334px;
			width: 100%;
			background-position: -1017px -6px;
			background-repeat: no-repeat;

		}
		#TopRightNav
		{
			-webkit-box-shadow: none;
	    	box-shadow: none;
		}
		#RightNavContainer
		{
			left: -999999px;
			position: fixed;
			width: 100vw;
			display: block;
			top: 190px;
			z-index: 100;
			background-color: white;
			overflow: auto;
			height: calc(100vh - 130px);
			padding-top: 30px;
		}
		.RightContainerOption
		{
			background-color: #F5F7F8;	
		}
	}
	@media only screen and (max-width: 611px)
	{
		#HeroCallouts li 
		{
			margin: 0px;
		}
		#HeroCallouts {
    		
    		margin: auto;
		}
	}
	@media only screen and (max-width: 461px)
	{
		/*
		#HeroCallouts li 
		{
			margin: 0px;
		}
		#HeroCallouts
		{
			width: 100%;
    		margin-left: 0px;
		}
		*/
	}	
	@media only screen and (max-width: 311px)
	{
		#HeroCallouts li 
		{
			margin: 0px;
		}
		#HeroCallouts
		{
			width: 148px;
    		margin: auto;
		}
	}