/* defaults */
.show-xs{ display: none; }
#mobile-menu-top{ display: none; }
#content{ padding-top: 38px; }
#wpadminbar{
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}

.site-branding{ position: absolute; z-index: 9; }
#logo a{ max-width: 621px; }

.hero-image-container .overlay{ height: 150px; }

.narrow {
	max-width: 520px;
	margin: 0 auto;
}

.narrow-report {
	max-width: 350px;
	margin: 0 auto;
}

/* everything larger than medium */
@media (min-width: 979px) {
	#cta-box a{ padding: 1.5em; }
	#section-nav, #search-header{ margin-left: 40px; }

	.big-search{ margin-left: 40px; width: calc(100% - 40px); }
	.entry-content .big-search{ margin-left: 0px; width: 100%; }

	.hero-image-container .overlay{ height: 190px; }
	.hero-image-container .hero-wrap #hero-image{ height: 360px; }

	footer.site-footer{
		max-width: 920px;
		left: 20px;
	}

	/* grapes */
	.search-header-bg{
		width: calc(100% - 40px);
		margin-left: 40px;
	}
}

/* extra small: phones */
@media (max-width: 767px) {

	.no-scroll { overflow: hidden; }

	.show-xs{ display: inherit; }
	.hide-xs{ display: none;}

	html, body{

		/* height: 1px; */ /* this is overridden, but triggers child elements to inherit 100% */
		/* disabled above rule because it's interfering with safari (iOS) smooth scrolling */
		min-height: 100%;
		overflow-x: hidden;

	}

	#page{ min-height: 100%; }

	#content{
		min-height: 80%; /* fallback for older browsers that don't support calc() */
		min-height: calc(100% - 99px);
	}

	#main-content{
		padding: 24px 15px;
	}

	#main-content.grapes{
		position: static;
	}

	h1{ font-size: 2.4em; }
	h2{ font-size: 2em; }
	h3{ font-size: 1.8em; text-transform: uppercase; }
	h4{ font-size: 1.6em; }
	h5{ font-size: 1.4em; }
	h6{ font-size: 1.2em; }

	#wpadminbar{ position: fixed !important; }

	.site-branding{ padding: 0 30px; }

	#section-nav{ display: none; }

	.menu-toggle { display: block; }
	.main-navigation ul ul { display: block; }
	.main-navigation ul ul a { text-indent: 1em; }

	.mobile-signin { display: block; }
	
	.mobile-signin-reader-text {
		height: 30px;
		width: 75px;
		border: 1px solid #FFFFFF;
		border-radius: 15px;
		padding: 5px 10px 5px 10px;
		font-size: 0.7em;
	}

	#cta-box{ display: none; }
	#cta-mobile{ display: block; }
	#cta-mobile a{ width: 100%; }
	#cta-mobile a .med-large{ font-size: 0.85em; }
	#cta-mobile a .med-small{ font-size: 0.67em; font-weight: 700; }

	.hero-image-container:before{ height: 120px; }
	.hero-image-container .overlay{ height: 60%; }

	#page{ }

	#mobile-main, #page, #content, .search-form, footer.site-footer{
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
	}

	.main-navigation{
		position: fixed;
		overflow: visible;
		visibility: hidden;
	}

	.main-navigation nav{
		background: #daebfe;
		width: 260px;
	}
	
	/* emulate .clear styles for mobile only */
	.main-navigation nav:before, .main-navigation nav:after{
	  	content: '';
		display: table;
	}
	
	.main-navigation nav:before{
  	clear: both;
	}

	.main-navigation nav ul,
	.main-navigation nav ul li,
	.main-navigation nav ul li a,
	.main-navigation nav ul ul,
	.main-navigation nav ul ul a{
		width: 100%;
		display: block;
		font-weight: 300;
	}
	
	.main-navigation li a{
  	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	}

	.main-navigation a, .sub-navigation a{}

	.current-menu-item > a{ background: #005587; color: white; }
	#menu-primary-menu .current-menu-parent,
	#menu-primary-menu .current-page-ancestor, 
	#menu-primary-menu .current-menu-item.menu-item-has-children { background: #8bb8e8 }
	#menu-primary-menu .current-menu-item.current-menu-parent > a{ background: transparent; color: #005587; }

	.current-menu-item.menu-item-has-children{}

	#content.pushed, #mobile-main.pushed, footer.pushed, #page.pushed, .pushed{
		transform: translate3d(260px, 0, 0);
		-webkit-transform: translate3d(260px, 0, 0);
		-ms-transform: translate3d(260px, 0, 0);
	}

	#content.pushed + #site-overlay,
	#page.pushed #site-overlay{
		display: block;
		position: absolute;
		left: 0; right: 0; top: 0; bottom: 0;
		z-index: 100;
	}

	#content.pushed + #site-overlay{ left: 260px; }

	.main-navigation li{ clear: left; }
	button.menu-toggle{ float: left; }
	button.search-toggle{ position: absolute; right: 0; }

	button.menu-toggle, button.search-toggle{
		height: 38px; width: 38px;
		font-size: 18px;
		cursor: pointer;
		background: transparent;
		border: none;
		box-shadow: none;
		text-shadow: none;
		padding: 0;
		color: white;
	}
	
	button.mobile-signin{ position: absolute; right: 0;}

	button.mobile-signin{
		height: 38px; width: 64px;
		font-size: 18px;
		cursor: pointer;
		background: transparent;
		border: none;
		box-shadow: none;
		text-shadow: none;
		padding: 0;
		color: white;
		margin: -2px 5px 0px 0px;
	}

	button:focus{
		outline: none;
	}

	header#masthead{
		visibility: hidden; position: relative; z-index: 1;
		-webkit-transition: opacity 0.3s ease-out, z-index 0s linear 0.31s;
		-o-transition: opacity 0.3s ease-out, z-index 0s linear 0.31s;
		transition: opacity 0.3s ease-out, z-index 0s linear 0.31s;
	}

	header#masthead.shown{
		visibility: visible;
	}

	.main-navigation .container{
		opacity: 0;
		pointer-events: none;
		-webkit-transition: opacity 0.3s ease-out;
		-o-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
	}

	header.shown .container{
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	header.shown .mobile-menu-wrap{}
	header.shown form.search-form{}

	#masthead nav, #masthead form{ visibility: visible; }

	header#mobile-main, .search-form{
		width: 100%;
		position: fixed; top: 0;
		z-index: 2;
	}

	body.admin-bar header#mobile-main{
		top: 46px;
	}

	header#mobile-main{
		display: block; height: 38px;
		overflow: unset;
		text-align: left;
		transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
	}
	#mobile-main .page-title{
		margin: 0px 68px 0px 5px;
		line-height: 38px;
		font-size: 1.8em;
		color: white;
		font-weight: 300;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#mobile-menu-top{
		width: 260px;
		visibility: visible; display: block;
		background: #EDF6F9;
	}

	#mobile-menu-top .profile-link{ float: left; }

	#mobile-menu-top .logo{ background: #003b5c; padding: 0.2em 1em 0.2em 0.6em; }

	.loginpanel-mobile-heading {
        color: #ffffff;
        Background-color: #3b7ba7;
		padding: 10px 20px;
		font-size: 15px;
		height: 38px;
    }
    
    .loginpanel-mobile-body {
        font-size: 15px;
        color: #3b4a73;
	}   
	
	.search-form{
		text-align: right;
		padding: 0 6px;
		height: 40px;
		line-height: 38px;
		background: #93d3eb url(../img/audience-nav-bg.jpg) repeat-y center/contain;
		opacity: 0;
		pointer-events: none;
	}

	.search-form.toggled {
		transform: translate3d(0, 38px, 0);
		-webkit-transform: translate3d(0, 38px, 0);
		-ms-transform: translate3d(0, 38px, 0);
		opacity: 1;
		pointer-events: auto;
	}
	
	.admin-bar .search-form.toggled {
		transform: translate3d(0, 85px, 0);
		-webkit-transform: translate3d(0, 85px, 0);
		-ms-transform: translate3d(0, 85px, 0);
  	}

	header .search-form > label{ width: 68%; }
	header .search-form .search-field{ width: 100%; box-sizing: border-box; }
	header .search-form .search-submit{ width: 30%; }

	.search-toggle.toggled{}

	#content{
		background: white;
		position: relative;
	}

	.no-margin {
		margin: 0 -15px;
		width: auto;
	}
	
	.site-footer > div.menu-links,
	.site-footer > div.social-links{ width: 100%; }
	
	.site-footer .menu-links .menu-footer-right-container{
  	float: right;
  	text-align: right;
	}
	
	.site-footer > div.social-links{ margin-top: 1.8rem; }
	
	.site-footer > div.social-links a{
  	float: left;
  	margin-left: 0;
  	margin-right: 0.55em;
	}
	
	.site-footer > div.social-links a.giving{
  	float: right;
  	margin-right: 0;
	}
	
	blockquote{
  	margin: 1.5em 0;
	}
	
	blockquote p{}
	
	blockquote footer{}
	
	/* programs and program requirements */
	#a-to-z-search-wrap, #programs-search-wrap {
    width: calc(100% + 30px);
    margin: 0 -15px;
	}
	  
	/* programs and program requirements */
	#site-search-wrap {
		width: 100%;
		margin: 0;
		background-color: #003b5c;
		height: 55px;
	}

	.site-search-form{
		margin-top: -10px;
	}

	.big-search .site-search-field{
		font-size: 0.8em;
		padding: 10px 15px;
		border-radius: 12px;
		width: 85%;
	}

	.site-btn-inside, .site-btn-inside:hover, .site-btn-inside:focus, .site-btn-inside:active{
		width: 30%;
		position: absolute;
		top: -2px; bottom: 0px; right: 0px;
		line-height: 100%;
		background-color: transparent;
		-webkit-box-shadow: none;
		box-shadow: none;
		border: 0;
		font-size: 1.1em;
	}

	/* grapes */
	#search-header p{
  	max-width: 520px;
  	margin: 0 auto 22px;
	}
	
	.big-search{
		padding: 15px;
	}

	.big-search .search-field{
		font-size: 1.5em;
		padding: 10px 15px;
		border-radius: 10px;
	}

	.big-search .btn-inside{
		width: 3em;
		right: 10px;
		font-size: 1.8em;
	}

	.search-header-bg{
		height: 24px;
	}

	#grapes-search-tools{
		position: relative;
		top: -7px;
		padding: 0 15px;
	}
	
	#grapes-search-tools #sort-results{ float: right; }

	#filter-toggle{
		padding: 0;
		float: left;
		text-align: left;
		background-color: transparent;
		line-height: 2.2rem;

		-webkit-box-shadow: none;
		box-shadow: none;
	}

	#result-sort{
		float: right;
		line-height: 2.2rem;
	}

	.search-header-bg > div > button,
	.search-header-bg > div > select{
		max-width: 8.5em;
		border: 0;
		color: #005587;
		text-transform: uppercase;
	}

	/* Smart Recs version no longer in a form - Eric Testing */
	/* Deprecated */
	form#grapes-filters{
		position: fixed;
		z-index: -2;
		top: 0;
		left: 0;
		max-width: 260px;
		padding: 0 20px 32px;
		background: #edf6f9;
		opacity: 0;

		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;

		transform: translate(-0.1px,0);
		-webkit-transform: translate(-0.1px,0);
		-ms-transform: translate(-0.1px,0);

		-webkit-overflow-scrolling: touch;
		/* will-change: transform, z-index, opacity; */
	}

	/* Smart Recs version no longer in a form - Eric Testing */
	/* Deprecated */
	.pushed form#grapes-filters{
	}

	/* Smart Recs version no longer in a form - Eric Testing */
	/* Deprecated */
	form#grapes-filters.shown{
		opacity: 1;
		-webkit-transform: translate(-260px, 0);
		-o-transform: translate(-260px, 0);
		transform: translate(-260px, 0);
		-ms-transform: translate(0px, 0); /* LOL MSFT */

		-webkit-transition-delay: 0.05s;
		-o-transition-delay: 0.05s;
		transition-delay: 0.05s;
	}

	#grapes-filters .big-search{
		width: auto;
		margin: 0 -20px;
	}

	#grapes-filters header{
		margin-top: 24px;
		color: #4e8db6;
	}

	#grapes-filters label{
		font-size: 1.4rem;
	}

	#grapes-filters .results{
		font-size: 1.3rem;
	}

	#grapes-filters label,
	#grapes-filters .results{
		line-height: 3rem;
	}

	#grapes-search-results colgroup,
	#grapes-search-results thead{
		display: none;
	}


	#grapes-search-results tr:before,
	#grapes-search-results tr:after{
		content: '';
		display: table;
	}

	#grapes-search-results tr:after{
		clear: both;
	}

	#grapes-search-results tr,
	#grapes-search-results td{
		display: block;
	}

	#grapes-search-results tr{
		margin-bottom: 2em;
	}

	td.deadline{ float: right; }
	td.amount{ float: left; }

	td.deadline, td.amount{
		/* font-weight: 600; */
		margin-top: 0.2em;
	}
	
	.award-details p.left{
  	width: 100%;
	}
	
	.award-details p a{
  	word-break: break-word;
	}

	#userDropdown div {
		display: none;
	} 
}

/* phones in landscape */
@media (max-width: 480px) {
}

/* the width at which the page starts to stretch/shrink for mobile */
@media (min-width: 550px) {
	.entry-content .big-search{
		border-radius: 10px 10px 0 0;
	}

	#gd-forms-filters-wrap{
		border-radius: 0 0 10px 10px;
	}
}

/* everything larger than small (desktop) */
@media (min-width: 768px) {
	ul.sub-menu{ display: none; }

	#masthead{
		position: fixed;
		width: 100%;
		z-index: 1;
		transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
	}

	.site-branding{
		left: 40px;
		bottom: 92px; /* 10px bottom margin on h1#logo */
		width: 70%;
	}

	#logo a { height: 104px; }

	#hero-image { margin:0 0 -98px; width:960px; }
	#hero-image-apps { margin:0 0 -98px; width:1130px; }

	#cta-box a{ padding: 1.5em; display: block; }
	#cta-box a .big{ font-size: 2.4em; font-weight: 200; line-height: 1; }
	#cta-box a .med-big{ font-size: 1.9em; }
	#cta-box a .med-small{ font-size: 1.7em; }
	#cta-box a .small{ font-size: 1.2em; font-weight: 600; }
	#cta-box a .top{ font-size: 1.8em; font-weight: 600; line-height: 1.3; }
	#cta-box a .bottom{ font-size: 1.2em; font-weight: 400; line-height: 1.4; }

	#section-nav{ /* padding-left: 15px; */ }
	#logo{ padding-left: 28px; padding-bottom: 10px; margin-bottom: 8px; }

	.main-navigation, .sub-navigation{ font-size: 1.5em; }

	.main-navigation li a:hover,
	.sub-navigation li a:hover,
	#mobile-menu-top a:hover{ background: rgba(255,255,255,0.6); }

	.current-menu-item > a,
	.main-navigation .current-page-parent > a,
	.main-navigation .current-menu-parent > a,
	.page-template-template-major .main-navigation .current-page-ancestor > a{ color: #fff; background: #2774ae; }

	.main-navigation .current-menu-item > a:hover,
	.main-navigation .current-page-parent > a:hover,
	.main-navigation .current-page-ancestor > a:hover,
	.main-navigation .current-menu-parent > a:hover,
	.sub-navigation .current-menu-item > a:hover,
	.page-template-template-major .main-navigation .current-page-ancestor > a:hover{ background: #2774ae; }
	
	.current-page-ancestor a,
    .current-page-ancestor a:visited{ background: #2774ae; color: white;}

	.page-template-template-about-contact-etc #section-nav .current-page-ancestor a,
    .page-template-template-about-contact-etc #section-nav .current-page-ancestor a:visited{ background: transparent; color: #003b5c;}


	#main-content{
		margin:0;
		margin-left: 40px;
		min-height:400px;
		position: relative;
	}

	.site-footer > div.social-links a.giving{ margin-top: 1.5rem; }
	
	blockquote{
  	margin: 1.5em 0.5em;
	}

	/* programs and program requirements */
	#a-to-z-search-wrap, #programs-search-wrap {
    width: calc(100% + 60px);
    margin: 0 -30px;
  }
  
  #program-reqs-search-wrap{
    border-radius: 0;
    padding: 24px;
  }
  
  #program-reqs-search-wrap .search-field{
    font-size: 2.6em;
    border-radius: 10px;
    padding: 0.5em 1em;
  }

	/* grapes-y stuff here */

	.vr{
		position: absolute;
	  width: 1px;
	  background: #b8e2f2;
	  left: 280px;
	  top: 0;
	  bottom: 0;
	}

	.big-search .search-field{
		font-size: 3.6em;
		padding: 24px 30px;
		border-radius: 30px;
	}

	.big-search .btn-inside{
		top: 20px; bottom: 20px; right: 30px;
		font-size: 4em;
	}

	.search-header-bg{
		height: 38px;
	}

	#main-content #grapes-search-results{
		margin-top: -66px;
	}

	#grapes-search-results tbody:before{
		content: " ";
		display: block;
		font-size: 1.4rem;
		margin-bottom: 4rem;
	}

	#grapes-search-results tbody td{
		padding-bottom: 2em;
	}

	#grapes-search-results th[data-sort-dir]:before{
		display: inline-block;
		position: absolute;
		margin-left: -0.8em;
		font: 1.5em/36px FontAwesome;
	  font-style: normal;
	  font-weight: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

	#grapes-search-results th[data-sort-dir="asc"]:before{
		content: "\f0d8";
	}

	#grapes-search-results th[data-sort-dir="desc"]:before{
		content: "\f0d7";
		margin-top: -0.1em;
	}

	.page-template-template-major .nav-menu #menu-item-4489 > a{
		font-size:1.0em;
	  }
}

/* everything smaller than medium (tablets) */
@media (max-width: 979px) {

	#main-content{ margin-left: 0; margin-bottom: 0; }

	.container{ max-width: 100%; padding-right: 0px;}

	.site-branding{ left: 0; top: 0; bottom: 45px; width: 100%; /* padding: 30px 40px 0; */ }
	#logo{ height: 100%; padding-bottom: 4px; padding-right: 10px; }
	#logo a{ width: auto; background-size: contain; height: 100%; }

	.hero-wrap{ width: 100%; height: 0; padding-bottom: 37.5%; margin-bottom: -40px; position: relative; }
	#hero-image{ width: 100%; height: 100%; position: absolute; }

	#cta-box{ bottom: 50px; }

}

@media (max-width: 979px) and (min-width: 767px){
	.site-branding{ width: 70%; }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

  .mobile-menu-wrap .menu-primary-menu-container .nav-menu{
	font-size:0.8em;
  }

	header .search-form .search-field {
	    padding: 3px 3px;
    	width: 14.7rem;
    	height: 2.4rem;
    	box-sizing: border-box;
	}

	header .search-form {
		float: left;
		margin-top: -1px;
	}

	header .search-form .search-submit {
		font-size:0.8rem;
	}

	header .search-form .search-field, header .search-form .search-field {
		border-radius: 3px;
		font-size: 1.2rem;
		border: 0;
	}

	header .search-form .search-field, header .search-form .search-submit {
		border-radius: 3px;
		font-size: 1.2rem;
		border: 0;
	}

	 .signin {
		float: right;
		position: relative;
		margin-left: 1px; 
		padding-right: 10px;
		font-size: 1.4rem;
	} 
	.dropdown {
		float: right;
    	position: relative;
		margin-left: 1px;
		padding-right: 3px;
    	height: 39px;
	}

	#cta-box{
		right: 0px;
	} 

}