@charset "UTF-8";
/* CSS Document */
/*
	Notes:
	=====
	DO NOT change the values from em. We're using em for more flexibility for responsive browsers, allowing people to use zoom.
	=====
	Min-width applies to that break and bigger (or from the break to infinity).
	Max-width applies to that break and lower (or from 0 to the break).
	-----
	Major breakpoints
	-----
	1000px = 62.5em
	640px = 40em
	
	1000 divided by 16 = 62.5em this is the formula for figuring out the px to em conversion for the widths
	=====
*/

/* 1600 = 100em */
@media screen and (max-width:100em) { footer { gap:2em; } }

/* 1520 = 95em */
@media screen and (max-width:95em) { 

	#header #menu { column-gap:12em; }
	
	.menu li a { padding:0.4em; }
	
	.clients { max-width:100%; }
	
}


/* 1380px = 86.25em */
@media screen and (max-width:86.25em) { #header #menu { column-gap:2em; } .menu li a { padding:0; } }

/* 1320px = 82.5em */
@media screen and (max-width:82.5em) { .item .flex .title h3 { font-size:3rem; } }

/* 1280px = 80em */
@media screen and (max-width:80em) {

	#header .header-flex { padding:3em 2em 2em; }

	.web-inquiry {
		position:absolute;
		top:0;
		left:0;
		margin:0;
		opacity:0;
		transition:opacity 0.3s ease-in-out;
		display:none;
	}
	
	.web-inquiry.is-active {
		background-color:rgba(255,255,255,1.0);
		width:100vw;
		height:100vh;
		overflow:auto;
		padding:1em;
		z-index:400;
		transition:opacity 0.3s ease-in-out;
		opacity:1;
		display:block;
	}
	
	.forminator-row .top-content h2 { font-size:3rem; }
	.forminator-row .top-content p { font-size:2rem; }

	#header .header-flex { justify-content:space-between; }

	#header #menu .menu { visibility:hidden; display:none; }
	#header #menu button.formbtn { visibility:hidden; display:none; }
	
	#header .menu-toggle { visibility:visible; display:block; }
}

/* 1220px = 76.25em */
@media screen and (max-width:76.25em) {

	.about-clients .flex { flex-wrap:wrap; }
	.about-clients .flex div { flex-basis:100%; order:1; }
	.about-clients .flex .map { flex-basis:100%; order:2; }
	
}


/* 1080px = 67.5em */
@media screen and (max-width:67.5em) { 

	.clients { max-width:95%; }
	.clients h3 { font-size:2.4rem; }
	
	.left-column { flex-basis:60%; }
	.right-column { flex-basis:35%; }
	
	.ops div,
	.marketing-wrap div { flex-basis:45%; }
	
	footer .inner { gap:2em; }

}

/* 1020px = 63.75em */
@media screen and (max-width:63.75em) {  .hp { flex-wrap:wrap; } .hp div { flex:1 1 35%; } }

/* 920px = 57.5em */
@media screen and (max-width:57.5em) {

	
	h1:first-child, h2:first-child { font-size:4rem; }
	h3 { font-size:2.4rem; }
	p, ul { font-size:2rem; }
	
	h1 { font-size:4rem; }
	p { font-size:2rem; }
	main .content-wrap ul:first-of-type { font-size:2rem; }
	
	#about .image img { width:85%; height:auto; }
	#ops { background-position:60% 53%; }
	
	.wp-block-image .alignleft { float:none!important; }
	
	footer { padding:2em; }
	footer .inner { flex-wrap:wrap; gap:2em; }
	footer .inner div { flex-basis:100%; text-align:center; }
	
	footer .branding { width:100%; }
	footer .social-menu { justify-content:center; }

}

/* 880px = 55em */
@media screen and (max-width:55em) { 

	/*.web-inquiry { margin:-580px auto 0; }*/
	
	.two-column  { flex-wrap:wrap; }
	
	.left-column,
	.right-column { flex-basis:100%; }
	
	.technology { margin:0 auto; }
	.technology div { flex-basis:35%; }
	
	.ops { margin:0 auto; }
	.ops div { flex-basis:35%; }
	
	.marketing-wrap { margin:0 auto; }
	.marketing-wrap div { flex-basis:35%; }
	
	.bill-pay div { flex:1 1 100%; order:2; }
	.bill-pay div.button { flex:1 1 100%; order:1; margin:0 0 2em; }
	
	.dropdown { width:100%; }
	.dropdown-menu.bill-pay { left:0; right:auto; top:3em; min-width:auto; width:100%; border-width:6px; }
	.dropdown-menu a { font-size:1.4rem;}
	
	.ticket-intake-and-processing .left-column, .database-and-mapping .left-column, .ticket-transmission .left-column, .ticket-management .left-column, .reporting .left-column { padding:0; }


}


/* 840px = 52.5em */
@media screen and (max-width:52.5em) {

	main.client-page .content-wrap .inner { padding:0 4em; }

	.clients { flex-wrap:wrap; }
	.clients .column-one, .clients .column-two, .clients .column-three { flex-basis:100%; text-align:center; }
	
	.clients div img { object-fit:cover; width:95%; }
	
	.hero-wrap img { background-size:contain; object-fit:contain; object-position:100% 0; }
	
	.client-pages { flex-wrap:wrap; gap:0; }
	.client-pages div:first-of-type,
	.client-pages div { flex-basis:100%; text-align:center; }
	.client-pages div figure img { width:40%; }
	
	.item .flex { display:block; }

}


/* 782px = 48.875em */
@media screen and (max-width:48.875em) {

	#header .header-flex { padding:2em; }
	/*.web-inquiry { margin:-840px auto 0; }*/
	
	.hp div { flex:1 1 95%; } 

	#about .flex { flex-wrap:wrap; gap:2em; }
	#about .content { width:100%; }
	#about .image { width:70%; }

	#tech .content,
	#ops .ops-wrap { width:95%; }
	
	.technology div,
	.ops div,
	.marketing-wrap div { flex-basis:95%;}
	
	.wp-block-gallery .wp-block-image { width:100%!important; }
	
	.about-clients .flex .map { display:none; }
	.client-list { display:block; order:3; flex-basis:100%; }
	
	footer .location,
	footer .phone { width:100%; text-align:center; }
	
	.social-menu { justify-content:center; margin:1em 0 0; }

}

/* 640px = 40em */
@media screen and (max-width:40em) {

	.mobile-nav li.mobile-form-btn a { width:90%; }
	
	.inner { padding:2em; }

}



/* 480px = 30em */
@media screen and (max-width:30em) {


	#header .header-flex { padding:1em; }
	#home .inner { padding:2em; }
	
	#branding #site-title a {
		background-image:url(/wp-content/uploads/2025/08/occ-logo-web-sm.png);
		width:180px;
		padding:70px 0 0;
	}

	#home {  }
	
	#ops .ops-wrap { width:100%; }
	#ops .inner { text-align:left; }
	
	main.client-page .content-wrap { margin-top:8em; }
	.client-pages div figure img { width:70%; }


}


/* 440px = 27.5em */
@media screen and (max-width:27.5em) { ul, ol { padding:0.5em 0 0.5em 1em; } }