/*

	File: mobile.css
	Media: screen
	stcharleshartland.com
	Version 4
	Walleworks, LLC
	12-15-2018


/* Mobile Layout
--------------------------------------------------------------------------------------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) { 
	
	input, select, textarea {
		font-size: 16px;
	}

	h1 { font-size: 1.4em; }
	h2 { font-size: 1.3em; }
	h3 { font-size: 1.2em; }
	p { font-size: 1.0em; }
	
	form { width: 100%; }
	#wrapper { width: 100%; padding-bottom: 10px; }
	.content_cmg_wrap, .footer_cmg { width: 100%; }
	#header { /*display: none;*/ width: 100%; }
	#headWrap { width: 100%; }
	#subSearchForm { display: none; }
	#siteImage, #headerLogo { margin: 0 auto; text-align: center; float: none; padding-left: 0px; display: revert; }
	#siteImage img, #headerLogo img { width: 100px; }
	#top_links { display: none !important; }
	#mainNav { display: none !important; }
	#subNavWrap { width: 100%; }
	.subNavContainer { display: none !important; }
	.mobileNav { display: block !important; }
	span.mobileSecondaryTitle { font-size: .85em; float: right; margin-right: 30px; margin-top: 4px;}
	.sublink:before { content: none; }
	#mobileSearchBar { width: 100%; display: block; margin: 5px 0; color: #000; font-size: 1.3em; }
	#mobileSearchBar input { width: 100%; font-size: 16px; margin: 0; border-radius: 0px !important; line-height: 1.5em; height: 1.5em; }
	#mobileSearchBar input::placeholder { font-weight: bold; }
	
	#headerLogo img#logo { position: relative; }
	#headerLogo.sticky img#logo { position: relative; margin-bottom: 5px; }
	
	#header_wrap.sticky { display: none; }
	
	.rotator_full { /*display: none;*/ }
	.hp-content-icon { display: block; margin: 0 auto; }
	.content_box h5 { font-size: 1.1em; }
	.content_box h6 { font-size: 1em; }
	.content_box { width: 96%; font-size: 1em; padding-bottom: 10px; /*border-bottom: 5px solid #f4d062;*/ margin: 0 10px; }
	.content_box ul.news { font-size: 1.1em; }
	.content_box .unslider-arrow { /*width: 60px; height: 60px; background-size: 25px 30px;*/ }
	.content_box .unslider-arrow.prev { left: 20px; right: auto; }
	.content_box .unslider-arrow.next { right: 20px; left: auto; }
	.contentBox25 { width: 96%; font-size: 1.3em; }
	.contentBox33, .contentBox40, .contentBox60, .contentBox50 { width: 100%; }
	#calendar_single_week .event-time { width: 80px; }
	.timeSingle { width: 80px; }
	.content_box .event-time { width: 80px; }
	.content_box20 { width: 50%; margin: 0 auto; display: inline-block; }
	.content_box_inside { height: auto; /*max-height: 420px;*/ }
	
	.mCSB_scrollTools .mCSB_draggerRail{ width: 20px; }
	
	#breadcrumbs { font-size: 0.9em; margin: 12px 0 10px 0; }
	#breadcrumbs ul li { line-height: 10px; }
	#breadcrumbs ul li a { font-size: 0.5em; /*height: 25px; padding-top: 6px;*/ }
	#breadcrumbs ul li a:before, #breadcrumbs ul li:before { border: 0; content: none; }
	#breadcrumbs ul li a:before { /*border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #FFFFFF;*/ border: 0;  }
	#breadcrumbs ul li a:after, #breadcrumbs ul li:after { content: '\005C\005C'; border: 0; font-size: 1.3em; padding-top: 4px; margin-right: 2px;}
	#breadcrumbs ul li a:after { /*border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #999999;*/ border: 0; }
	#breadcrumbs ul li a, #breadcrumbs ul li.nolink { height: 12px; padding: 3px 1px 0 1px; background: none; color: #000; }
	#breadcrumbs ul li.nolink { font-size: 0.5em; }
	#breadcrumbs ul li:first-child a { padding-left: 10px; }
	#breadcrumbs ul li:last-child a, #breadcrumbs ul li:last-child { content: none; border: 0; padding-right: 5px; }
	#breadcrumbs ul li:last-child:after { border: 0; content: none; } 
	#breadcrumbs { display: none; }
	
	.mainContentImage img { max-width: 100%; }
	
	.header_wrap { display: none; }
	.interior_wrap { min-height: 0; padding-top: 8px; }
	#mainContentHead, .anchorContentHead { margin-bottom: 5px; }
	#mainContentWrap, .anchorContentWrap { width: 100%; font-size: 1em; }
	#mainContent, .anchorContent { width: 100%; min-height: 0; }
	#mainContentFull, .anchroContentFull { width: 100%; }
	#mainSidebar { width: 100%; min-height: auto; }
	#mainSidebar img { /*width: 85%; max-width: none;*/ max-width: 85%; height: auto; }
	#mainSidebar .rightFile img { /*width: 40%; max-width: none;*/ }
	#mainContentBottom { width: 100%; }
	#mainContentBottom img { max-width: 100%; height: auto; }
	#mainContent img, #mainContentFull img, .anchorContent img, .anchorContentFull img { max-width: 100%; height: auto; }
	
	#mainContent img { width: 100%; height: auto; }
	
	iframe { max-width: 100%; }
	
	.rotator_full { display: none; }
	.mobile_image { display: block; width: 100%; }
	.mobile_image img { width: 100%; }
	
	form { width: 100%; font-size: 16px; }
	#mainContent form { margin: 15px 0px; }
	
	.formField { width: 100%; }
	input, textarea { max-width: 100%; width: 100%; }
	.inputFull, .inputHalf { width: 100%; }
		
	.staffEmail, .staffPhone { float: left; }
	
	.bioFooter { width: 100%; }
	.biosCenter { height: auto; }
	ul#pageBios li { width: auto; margin-bottom: 20px; }
	.anchorGroup { float: left; }
	.categoryGroup { width: 100%; text-align: center; }
	.staffGroupBio { width: 100%; margin: 10px; }
	.staffGroupInfo { width: 100%; text-align: center; }
	.staffName { width: 100%; }
	.staffPhone, .staffEmail, .staffBriefBio { width: 100%; text-align: center; }
	.articlePic { width: 100%; }
	.articleSummary { width: 100%; }
	.staffBio { width: 100%; display: block; }
	.staffPic { text-align: center; /*width: 100%;*/ width: 120px; height: 120px; display: block; }
	.staffPic img { width: 150px !important; }
	.staffInfo { width: 100%; text-align: center; }
	
	.bulletinIssue { width: 100%; }
	.bulletinThumb, .bulletinDesc { width: 50%; text-align: center; }
	.bulletinThumb img { width: 50% !important; }
	.bulletinDetail { width: 100%; }
	
	label { width: 100%; }
	.inputCity { width: 100%; }
	textarea { /*width: 100%;*/ }
	.g-recaptcha { width: 100%; }
	
	.saveButton, .contentButton, .smallSaveButton { max-width: 100%; }
	.linkInputSize { width: 100%; }
	
	.faqWrap { width: 100%; }
	ul#faqList { margin: 4px 15px; }
	ul.faqBranch { margin: 5px 20px; }
	
	.socialMediaWrap { height: 60px; }
	.socialMedia { width: 100%; }
	
	a.youtube_icon, a.facebook_icon, a.twitter_icon { /*width: 120px; height: 120px; background-size: 120px;*/ }
	
	.footer_box, .footer_box_center { width: 100%; font-size: 0.9em; margin-bottom: 50px; }
	.copyright { font-size: .75em; }
	
	.imgCenter, .imgDouble { width: 100%; }
	.mainContentImage {}

	#returnToTop::after {
	  content: "\f077";
	  font-family: "FontAwesome";
	  font-weight: normal;
	  font-style: normal;
	  font-size: 2em;
	  line-height: 50px;
	  color: #fff;
	}

	iframe#payFrame { 
		/*height: 250px !important;*/
		height: 190px !important;
		padding-bottom: 20px;
	}
	
	.anchorHeader { 
		font-size: 1.5em;
		width: 97%;
		margin: 0 auto;
	}
	
	#timer {
		font-size:15px;
	}
	
	#timer span {
		font-size: 25px;
	}
	
	iframe#locationMap { width: 100%; }

	ul#categoryGroup, ul#subcategoryItems {
		margin: 5px 5px;
	}
	span.nameText {
		width: 200px;
	}

	#mainContent h5 {
		font-size: 1.1em;
	}
	
	.radioCat, .radioDesc { font-size: .8em; }
	
	.mobileReduceSize { font-size: .6em; }
	
	.levelHigh img { max-height: 100px; max-width: 300px; }
	.levelMid img { height: 35px; }
	.levelLow img { height: 28px; }
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

	input, select, textarea {
		font-size: 16px;
	}

	form { width: 100%; font-size: 16px; }
	#wrapper { width: 100%; padding-bottom: 10px; }
	.content_cmg_wrap, .footer_cmg { width: 100%; }
	#header { /*display: none;*/ width: 100%; }
	#subSearchForm { display: none; }
	#siteImage, #headerLogo { /*margin: 0 auto; text-align: center; float: none; padding-left: 0px; display: revert;*/ }
	#siteImage img, #headerLogo img { width: 100px; }
	#top_links { /*display: none !important;*/ }
	#mainNav { /*display: none !important;*/ }
	nav#mainNav{ font-size: 0.7em; }
	#mainNav ul.navOptions li { width: 158px; }
	.mainNavDropdown { width: 100%; }
	.mobileNav { display: none;  }
	span.mobileSecondaryTitle { font-size: .85em; float: right; margin-right: 30px; margin-top: 4px;}
	
	#headerLogo img#logo { position: relative; }
	#headerLogo.sticky img#logo { position: relative; }
	
	
	.rotator_full { /*display: none;*/ }
	.hp-content-icon { display: block; margin: 0 auto; }
	.content_box h5 { font-size: 1.1em; }
	.content_box h6 { font-size: 1em; }
	.content_box { width: 30%; font-size: 1em; padding-bottom: 10px; border-bottom: 5px solid #f4d062; margin: 0 10px; }
	.content_box ul.news { font-size: 1.1em; }
	.content_box .unslider-arrow { /*width: 60px; height: 60px; background-size: 25px 30px;*/ }
	.content_box .unslider-arrow.prev { left: 20px; right: auto; }
	.content_box .unslider-arrow.next { right: 20px; left: auto; }
	.contentBox25 { width: 96%; font-size: 1.3em; }
	.contentBox33 { width: 100%; }
	#calendar_single_week .event-time { width: 80px; }
	.timeSingle { width: 80px; }
	.content_box .event-time { width: 80px; }
	
	.mCSB_scrollTools .mCSB_draggerRail{ width: 20px; }
	
	#breadcrumbs { font-size: 0.9em; margin: 12px 0 10px 0; }
	#breadcrumbs ul li { line-height: 10px; }
	#breadcrumbs ul li a { font-size: 0.5em; /*height: 25px; padding-top: 6px;*/ }
	#breadcrumbs ul li a:before, #breadcrumbs ul li:before { border: 0; content: none; }
	#breadcrumbs ul li a:before { /*border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #FFFFFF;*/ border: 0;  }
	#breadcrumbs ul li a:after, #breadcrumbs ul li:after { content: '\005C\005C'; border: 0; font-size: 1.3em; padding-top: 4px; margin-right: 2px;}
	#breadcrumbs ul li a:after { /*border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #999999;*/ border: 0; }
	#breadcrumbs ul li a, #breadcrumbs ul li.nolink { height: 12px; padding: 3px 1px 0 1px; background: none; color: #000; }
	#breadcrumbs ul li.nolink { font-size: 0.5em; }
	#breadcrumbs ul li:first-child a { padding-left: 10px; }
	#breadcrumbs ul li:last-child a, #breadcrumbs ul li:last-child { content: none; border: 0; }
	#breadcrumbs ul li:last-child:after { border: 0; content: none; } 
	
	.header_wrap { display: none; }
	.interior_wrap { min-height: 0; }
	#mainContentHead, .anchorContentHead { margin-bottom: 5px; }
	#mainContentWrap, .anchorContentWrap { width: 100%; font-size: 1em; }
	#mainContent, .anchorContent { width: 100%; min-height: 0; }
	#mainSidebar { width: 100%; min-height: auto; }
	#mainSidebar img { width: 85%; max-width: none; }
	#mainSidebar .rightFile img { width: 40%; max-width: none; }
	
	.biosCenter { height: auto; }
	
	.socialMediaWrap { height: 60px; }
	.socialMedia { width: 100%; }
	
	a.youtube_icon, a.facebook_icon, a.twitter_icon { /*width: 120px; height: 120px; background-size: 120px;*/ }
	
	.footer_box, .footer_box_center { width: 100%; font-size: 0.9em; margin-bottom: 50px; }
	.copyright { font-size: .75em; }

	iframe#payFrame { 
		/*height: 250px !important;*/
		height: 190px !important;
		padding-bottom: 20px;
	}
	
	#timer {
		font-size:15px;
	}
	
	#timer span {
		font-size: 25px;
	}

	ul#categoryGroup, ul#subcategoryItems {
		margin: 5px 5px;
	}
	span.nameText {
		width: 200px;
	}	

	#mainContent h5 {
		font-size: 1.1em;
	}
	
	.radioCat, .radioDesc { font-size: .8em; }

	.mobileReduceSize { font-size: .6em; }
	
	.levelHigh img { max-height: 100px; max-width: 300px; }
	.levelMid img { height: 35px; }
	.levelLow img { height: 28px; }

}

/* 2436x1125px at 458ppi */
@media only screen 
    and (min-width: 375px) 
    and (min-height: 812px)
	and (orientation: portrait)
    and (-webkit-device-pixel-ratio: 3) { 

	input, select, textarea {
		font-size: 16px;
	}
	form { width: 100%; font-size: 16px; }
	
		.staffPic { width: 120px; height: 120px; text-align: center; overflow: hidden; margin: 0 auto; border-radius: 50%; }
		.staffPic img { width: 120px; padding: 0; vertical-align: unset; }

	#timer {
		font-size:15px;
	}
	
	#timer span {
		font-size: 25px;
	}
	
	ul#categoryGroup, ul#subcategoryItems {
		margin: 5px 5px;
	}
	span.nameText {
		width: 200px;
	}	

	#mainContent h5 {
		font-size: 1.1em;
	}

	.radioCat, .radioDesc { font-size: .8em; }

	.mobileReduceSize { font-size: .6em; }
	
	.levelHigh img { max-height: 100px; max-width: 300px; }
	.levelMid img { height: 35px; }
	.levelLow img { height: 28px; }
	
}