/*************************************************************************************************************************/
/******************* desktop view (1105px+ width) *********************************************************/
/*************************************************************************************************************************/

@media screen and (min-width : 1105px) {
	#headerNav {
		display: none !important;
	}
}

/*************************************************************************************************************************/
/******************* tablet AND mobile view (0px - 1105px width) *********************************************************/
/*************************************************************************************************************************/

@media screen and (min-width : 0px) and (max-width : 1105px) {
	*,
	*:before,
	*:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	body {
		background: #001a45 none;
		min-width: 320px;
		-webkit-text-size-adjust: none;
	}

	#bgTop,
	#footer {
		display: block;
	}

	.wrap,
	#mainNavWrap,
	#footerTopWrap {
		width: auto;
	}

	#headerWrap {
		position: relative;
	}

	#headerSocialMedia {
		display: none;
		visibility: hidden;
	}

	#headerNav,
	.menu-button,
	.search-button {
		display: block;
		visibility: visible;
	}

	/************************ search box ****************************************************************************/

	.search-button {
		background: url("/assets/images/button_search.png") no-repeat 0 0;
		background-size: 86px 57px;
		border-bottom: 0;
		cursor: pointer;
		display: block;
		float: right;
		height: 57px;
		padding: 0;
		position: relative;
		width: 86px;
		z-index: 3000;
	}

	.search-button:hover,
	.search-button.active {
		background-color: #464646;
	}

	.search-button span {
		display: none;
		visibility: hidden;
	}

	#search {
		background-color: #464646;
		bottom: -140px;
		display: none;
		float: none;
		height: 84px;
		margin: 0;
		padding: 20px;
		position: absolute;
		right: 0;
		width: 100%;
		z-index: 3000;
	}

	#search .searchInput {
		font-size: 24px;
		height: 44px;
		line-height: 44px;
		margin: 0;
		padding: 0 10px 0 10px;
		width: 100%;
	}

	#search .search_bttn {
		display: none;
		visibility: hidden;
	}

	/************ main navigation ******************************************************/

	#mainNavWrap {
		padding-left: 0;
	}

	#mainNav ul {
		display: none;
		visibility: hidden;
	}

	/********** header mobile nav (popup/dropdown box) using flexnav ***********************************************************/

	.menu-button {
		background: url("/assets/images/button_nav.png") no-repeat 0 0;
		background-size: 86px 57px;
		border-bottom: 0;
		cursor: pointer;
		display: block;
		float: left;
		height: 57px;
		padding: 0;
		position: relative;
		width: 86px;
		z-index: 3000;
	}

	.menu-button:hover,
	.menu-button.active {
		background-color: #464646;
	}

	.menu-button span,
	.menu-button .touch-button {
		display: none;
		visibility: hidden;
	}

	#headerNav {
		/*height: 100%;*/
		background: transparent url("/assets/images/bg_dropdown.png") 0 0 repeat;
		display: none;
		padding: 0;
		position: absolute;
		left: 0;
		top: 202px;
		width: 100%;
		z-index: 3000;
	}

	#navcontainer_responsive {
		width: 100%;
	}

	.flexnav,
	.flexnav ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.flexnav {
		width: auto;
	}

	.flexnav.flexnav-show {
		margin: 0;
		padding: 0;
		width: auto;
	}

	.flexnav li {
		border-top: 0;
		margin: 0;
		padding: 0;
	}

	.flexnav li a,
	.flexnav li a.selected,
	.flexnav li a.active,
	.flexnav li span.dummy-link {
		background-color: #464646;
		border: 0;
		border-bottom: 1px solid #262626;
		color: #f2f2f2;
		display: block;
		font-family: 'SourceSansProRegular', Arial, sans-serif;
		text-decoration: none;
		font-size: 17px;
		font-weight: normal;
		line-height: 20px;
		margin: 0;
		padding: 10px 65px 10px 10px;
		text-align: left;
	}

	.flexnav li a:hover,
	.flexnav li span.dummy-link:hover {
		background-color: #464646;
		border: 0;
		border-bottom: 1px solid #262626;
		color: #c48416;
		display: block;
		font-family: 'SourceSansProRegular', Arial, sans-serif;
		text-decoration: none;
		font-size: 17px;
		font-weight: normal;
		line-height: 20px;
		margin: 0;
		padding: 10px 65px 10px 10px;
		text-align: left;
	}

	.flexnav li ul {
		background: #707070 none;
	}

	.flexnav li ul li a,
	.flexnav li ul li a.selected,
	.flexnav li ul li a.active {
		background-color: #707070;
		color: #f2f2f2;
		font-size: 15px;
		line-height: 18px;
		padding: 11px 65px 11px 26px;
	}

	.flexnav li ul li a:hover {
		background-color: #707070;
		color: #c48416;
		font-size: 15px;
		line-height: 18px;
		padding: 11px 65px 11px 26px;
	}

	.flexnav li ul li ul {
		background: transparent none;
		padding: 0;
		width: auto;
	}

	.flexnav li ul li ul li a,
	.flexnav li ul li ul li a.selected,
	.flexnav li ul li ul li a.active {
		background-color: #a6a6a3;
		color: #f2f2f2;
		font-size: 13px;
		line-height: 16px;
		padding: 12px 65px 12px 36px;
	}

	.flexnav li ul li ul li a:hover {
		background-color: #a6a6a3;
		color: #c48416;
		font-size: 13px;
		line-height: 16px;
		padding: 12px 65px 12px 36px;
	}

	.flexnav li ul li ul li ul li a,
	.flexnav li ul li ul li ul li a.selected,
	.flexnav li ul li ul li ul li a.active,
	.flexnav li ul li ul li ul li a:hover {
		background-color: #a6a6a3;
		padding-left: 50px;
	}

	.flexnav .touch-button {
		background: #424242 none;
		border-left: 4px solid #4d4d4d;
		display: table-cell;
		height: 40px;
		position: absolute;
		right: 0;
		text-align: center;
		top: 0;
		vertical-align: middle;
		width: 57px;
		z-index: 2001;
	}

	.flexnav .touch-button .navicon {
		display: block;
		height: 14px;
		margin: 0 auto;
		position: relative;
		top: 13px;
		width: 13px;
	}

	.flexnav .touch-button .navicon img {
		width: 13px;
	}

	.flexnav .touch-button.active .navicon {
		background: url( "../images/dropdown_minus.png" ) 0 1px no-repeat;
		background-size: 13px auto;
	}

	.flexnav .touch-button.active .navicon img {
		display: none;
	}

	/********** homepage ***********************************************************/

	.breaking_news_wrap {
		background: url("/assets/images/bg_breaking_news_mobile.png") 0 0 repeat;
		padding: 0;
		margin: 0;
	}

	.breaking_news_border {
		background-repeat: repeat-x;
	}

	.breaking_news_title {
		background: url("/assets/images/bg_title.png") 100% 0 no-repeat;
		font-size: 23px;
		height: 66px;
		left: 0px;
		padding: 15px 4px 0 40px;
		width: 267px;
	}

	.breaking_news_content,
	.breaking_news_wrap .cms-website-content-region {
		min-height: 97px;
		padding: 22px 20px 10px 330px;
	}

	#homepageBgRepeat {
		background: #ffffff none;
		margin: 0;
		padding: 0;
	}

	#homepageBgTop {
		background-repeat: repeat-x;
		min-height: 0;
		padding: 17px 0 12px;
	}

	.cb {
		width: 33%;
	}

	.cb#middleBox {
		border-left: 1px solid #c4c4c4;
		border-right: 1px solid #c4c4c4;
		margin: 0;
		min-height: 328px;
	}

	/********** insidepage ********************************************************/

	#insidepageBackground {
		background: #ffffff none;
		min-height: 300px;
		padding: 0;
	}

	#navigationWrap {
		display: none;
		visibility: hidden;
	}

	#content {
		float: none;
		margin: 0;
		padding: 26px 20px 40px;
		width: 100%;
	}

	#leftContent {
		float: none;
		width: 100%;
	}

	#rightContent {
		border-top: 1px solid #898989;
		float: none;
		margin: 18px 0 0 0;
		padding: 18px 0 0 0;
		width: 100%;
	}

	/********** footer ***********************************************************/

	#footerTop {
		padding: 21px 0 0;
	}

	.sitemap-button {
		color: #043d8e;
		display: block;
		font-family: 'LatoBold', Arial, sans-serif;
		font-size: 19px;
		line-height: 48px;
		text-align: center;
		text-transform: uppercase;
		visibility: visible;
	}

	.sitemap-button.active {
		background: url("/assets/images/bg_sitemap.png") 0 0 repeat;
	}

	.sitemap-button::before {
		content: "+ ";
		font-size: 26px;
		vertical-align: middle;
	}

	.sitemap-button.active::before {
		content: "- ";
		font-size: 26px;
		vertical-align: middle;
	}

	#footerTop ul li {
		width: 33%;
	}

	#footerTop ul li ul li {
		width: 100%;
	}

	#footerTopWrap {
		border-top: 2px solid #adadad;
		padding: 30px 18px;
		display: none;
	}

	#footer {
		border-top: 5px solid #002157;
		padding: 0 0 50px;
		display: block;
	}

	#footerSocialMedia {
		float: none;
		margin: 0 auto;
		padding: 20px 0;
		width: 92px;
	}

	#footerText {
		float: none;
		margin: 0 auto;
		padding: 0 0 10px;
	}

	#adobe {
		float: none;
		margin: 30px auto 0;
		padding: 0;
		text-align: center;
	}

	#footerText a#sitemap,
	#footerText a#view-mobile-website {
		display: none;
		visibility: hidden;
	}

	#footerText a#state-of-iowa-website {
		border-right: 1px solid #ffffff;
	}

	#footerText a#back-to-top {
		background: url("/assets/images/bg_back_to_top.png") 100% 0 no-repeat;
		background-size: 11px 11px;
		border-bottom: 1px solid transparent;
		display: inline;
		padding-right: 18px;
		visibility: visible;
		border-right: 0px;
	}

	#grip {
		background-color: #001a45;
		float: none;
		margin: 0;
		padding: 5px 0;
		width: 100%;
	}

	#GRIPFooterLogo {
		margin: 0 auto;
	}
}

/*************************************************************************************************************************/
/******************* mobile view (0px - 734px width) ********************************************************************/
/*************************************************************************************************************************/

@media screen and (min-width : 0px) and (max-width : 734px) {

	#headerShadow {
		background: transparent url("/assets/images/header_shadow.png") 50% 60px no-repeat;
		background-size: 950px 11px;
		height: 73px;
	}

	#logo {
		display: none;
		visibility: hidden;
	}

	#logoSmall {
		display: block;
		float: left;
		height: 73px;
		padding-top: 2px;
		visibility: visible;
		width: 285px;
	}

	#logoSmall img {
		height: 73px;
		width: 285px;
	}

	#mainNav {
		background-repeat: repeat;
		background-size: 100px 29px;
		height: 40px;
	}

	.menu-button,
	.search-button {
		background-size: 60px 40px;
		height: 40px;
		width: 60px;
	}

	#headerNav {
		top: 112px;
	}

	#search {
		bottom: -123px;
	}

	/********** homepage ***********************************************************/

	.breaking_news_wrap {
		background-size: 50px 1px;
	}

	.breaking_news_title {
		background: url("/assets/images/bg_title.png") 100% 0 no-repeat;
		background-size: 179px 40px;
		font-size: 14px;
		height: 33px;
		line-height: 16px;
		padding: 7px 4px 0 20px;
		top: 15px;
		width: 158px;
	}

	.breaking_news_content,
	.breaking_news_wrap .cms-website-content-region {
		min-height: 48px;
		padding: 46px 20px 5px;
	}

	.cb {
		float: none;
		padding-top: 20px;
		width: 100%;
	}

	.cb#middleBox {
		background: url("/assets/images/bg_content_box_mobile.png") 0 0 repeat;
		background-size: 50px 50px;
		box-shadow: 0 0 10px rgba(137, 137, 137, 0.4);
	}
}

/*************************************************************************************************************************/
/******************* mobile view (0px - 500px width) ********************************************************************/
/*************************************************************************************************************************/

@media screen and (min-width : 0px) and (max-width : 500px) {

	/********** footer **********************************************************************/

	#footerTop ul li {
		width: 100%;
	}
}

/*************************************************************************************************************************/
/******************* desktop view only (1106px+ width) *******************************************************************/
/*************************************************************************************************************************/

@media screen and (min-width : 1105px) {
	#footerTopWrap {
		display: block !important;
	}
}

/* breakpoints */

[data-breakpoints] {
	display: none;
}

@media screen and ( min-width: 1106px ) {

	[data-breakpoints*="xl"] {
		display: block;
	}
}

@media screen and ( min-width: 735px ) {

	[data-breakpoints*="md,lg"] {
		display: block;
	}
}

[data-breakpoints*="xs,sm"] {
	display: block;
}

#submissionforms_module.cms_form input.hasDatepicker {
	width: auto !important;
}

@media (max-width: 767px) {
	#submissionforms_module.cms_form .cms_label {
		font-weight: bold;
	}
}


/* Escape button */
.quick-escape-button {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 250ms ease;
	transition: all 250ms ease;
	color: #15598f;
	text-decoration: none;
	border-bottom: 0 solid transparent;
	position: fixed;
	top: 50%;
	right: -47px;
	bottom: 0px;
	z-index: 1005;
	display: block;
	width: 132px;
	height: 40px;
	padding-top: 11px;
	padding-right: 20px;
	padding-bottom: 3px;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background-color: #e2a02b;
	background-image: url('../images/close_black.svg');
	background-position: 90% 55%;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	font-family: 'OpenSansRegular', Arial, sans-serif;
	color: #000;
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.quick-escape-button:hover {
	background-color: #9c6911;
	background-image: url('../images/close_white.svg');
	background-size: 16px 16px;
	color: #fff;
}

@media (max-width: 991px) {
	.quick-escape-button {
		top: 63%;
	}
}

@media (max-width: 479px) {
	.quick-escape-button {
		left: 0px;
		top: auto;
		right: 0px;
		bottom: 0px;
		display: block;
		width: 150px;
		margin-right: auto;
		margin-left: auto;
		padding-top: 12px;
		background-color: rgba(202, 129, 0, 0.93);
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
