/* ----------------------- Overall Specifications ------------ */
body { line-height: 1.5; font-size: 15px; word-wrap: break-word; margin: 0; padding: 0; border: 0; outline: 0; 
	font-family: Verdana, Geneva, sans-serif; color: #7f7f7f; font-weight: bold; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 1.0em 0 0.5em; font-family: 'SwissTLight'; }
h1 { font-size: 44px; color: #7f7f7f; }
h2 { font-size: 24px; color: #7f7f7f; font-weight: bold; }
h4 { font-size: 14px; color: #7f7f7f; }
.node-type-community-page h4::before { content: url('/sites/all/themes/jpcc/images/folder.png'); margin-right: 5px; position: relative; top: 5px; }
p { margin: 0 0 1.2em; }
tr.odd { background-color: #dddddd; }
img { outline: 0; }

/* ------------------------ Main Regions --------------------- */
header { background-color: #5d84d1; color: #000; padding-top: 25px; }
main { background-color: #fff; }
footer { background-color: #000; color: #fff; padding-top: 25px; }

/* ------------------------ Custom --------------------------- */
.row { max-width: 72.5rem !important; }
.full.row { margin: 0; max-width: 100% !important; }
.toolbar { background:none; font-size:12px; }
ul.menu li { list-style:none; display:inline; }
ul.file-list { font-size: 0.8rem; }
.nopadding { padding:0; }
.nomargin { margin: 0; }
.alignr { text-align: right; }

.bl-wrapper { margin: 75px 0; }
a.bl-link { color: #fff; background: #5d84d1; padding: 10px 75px; text-transform: uppercase; font-family: 'SwissTLight'; font-size: 18px; transition: background 1s; display: inline-block; margin: 15px 0; }
a.bl-link:hover { background-color: #2d59ab; transition: background 1s; }
.marginb10 { margin-bottom: 10px; }

/* ------------------------ Logo Image ----------------------- */
#block-sitebranding { text-align: right; padding-bottom: 15px; }

/* ------------------------- Header Phone block -------------- */
#block-phonenumber p { text-align: right; font-family: SwissTRoman; font-size: 38px; margin-top: 0; }

/* ------------------------- Banner -------------------------- */
.block-views-blockbanner-block-1 { border-top: 1px solid #fff; border-bottom: 1px solid #fff; max-height: 21vw; overflow-y: hidden; }
.block-views-blockbanner-block-1 { max-height: unset; }
.block-views-blockbanner-block-1 p { margin: 0; }
.block-views-blockbanner-block-1 img { width: 100%; }

/* ------------------------- Main Menu ----------------------- */
#block-mainnavigation .menu { display: flex; justify-content: center; }
#block-mainnavigation a { font-size: 24px; line-height: 1.6; font-family: 'Calibri'; text-transform: uppercase; display: inline-block; padding: 40px 35px 42px; color: #000; }
#block-mainnavigation a:hover { background: radial-gradient(circle, #519fff, #2d59ab); }
#block-mainnavigation ul.menu.main li { border: unset; background-color: unset; float: none; display: inline-block; }
#block-mainnavigation ul.menu.main ul { top: unset; left: 0; border-top: none; background-color: #5d84d1; border: 2px solid #fff; border-top: none; text-align: center; }
#block-mainnavigation ul.menu.main ul li { width: 15.5em }
#block-mainnavigation ul.menu.main ul li:hover { background: radial-gradient(circle, #519fff, #2d59ab); }
#block-mainnavigation ul.menu.main ul a { padding: 10px; }
#block-mainnavigation ul.menu.main ul a:hover { background: unset; }
/* Dropdown menu */
#block-mainnavigation-2 .menu { display: flex; justify-content: center; }
#block-mainnavigation-2 a { font-size: 24px; line-height: 1.6; font-family: 'Calibri'; text-transform: uppercase; display: inline-block; padding: 40px 35px 42px; color: #000; }
#block-mainnavigation-2 a:hover { background: radial-gradient(circle, #519fff, #2d59ab); }
#block-mainnavigation-2 ul.menu li { border: unset; background-color: unset; float: none; display: inline-block; }
#block-mainnavigation-2 ul.menu ul { top: unset; left: 0; border:  2px solid #fff; background-color: #5d84d1; width: 100% !important; }
#block-mainnavigation-2 ul.menu ul li { width: 100%; text-align: center; }
#block-mainnavigation-2 ul.menu ul li:hover { background: radial-gradient(circle, #519fff, #2d59ab); }
#block-mainnavigation-2 ul.menu ul a { display: block; padding: 10px; font-size: 20px; width: 100%; }
#block-mainnavigation-2 ul.menu ul a:hover { background: unset; }
#block-mainnavigation-2 ul.menu ul { display: none; }

/* ------------------------- Custom Logout Button ------------ */
#block-logoutbutton a { color: #fff; background-color: #6089d9; border-radius: 5px; padding: 5px 15px; }
#block-logoutbutton a:hover { background-color: #000; }

/* ------------------------- Content Region ------------------ */
#main-wrapper { max-width: 1920px; margin: auto; }
main { padding: 40px 0; }
main article p  { text-align: justify; }

/* ------------------------- Sidebar ------------------------- */
#sidebar-second { padding: 40px 0; }
#block-sidebarmenu .menu { display: block; }
#block-sidebarmenu ul.menu { text-align: center; margin: 0; }
#block-sidebarmenu ul.menu li { display: block; margin: 0 0 10px 0; padding: 3px; width: 100%;  border: 2px solid #6089d9; transition: border-color 1s; }
#block-sidebarmenu ul.menu li:hover { border: 2px solid #a3a3a3; transition: border-color 1s; }
#block-sidebarmenu a { font-family: 'Calibri'; font-size: 17px; color: #a3a3a3; text-transform: uppercase; transition: color 1s; }
#block-sidebarmenu a:hover { color: #6089d9; transition: color 1s; }

/* ------------------------- Sidebar Your Community Page link - */
.block-views-blockcommunity-page-link-block-1 a { font-family: 'Calibri'; font-size: 17px; color: #a3a3a3; text-transform: uppercase; transition: color 1s; padding: 15px; border: 2px solid #6089d9; display: block; text-align: center; margin-bottom: 10px; line-height: 1; }
.block-views-blockcommunity-page-link-block-1 a:hover { color: #6089d9; transition: color 1s; border-color: #a3a3a3; }

/* ------------------------- Front Page Announcement --------- */
.block-views-blockannouncement-block-1 { background-color: #b1b5b7; padding: 15px 15px 5px; text-align: center; font-weight: bold; color: #000; }

/* ------------------------- Footer Region ------------------- */
#footer-top { margin-top: 25px; }
#block-footer { margin-bottom: 25px; }
#block-footer ul.menu { margin: 0; text-align: left; }
#block-footer ul.menu li.first.leaf { margin: 0; }
#block-footer a { color: #fff; text-transform: uppercase; font-family: 'SwissTLight'; font-size: 14px; }
#block-footer a:first-of-type { padding-left: 0; }
#block-footer a:hover { text-decoration: underline; }

footer, footer h2, footer p { font-family: 'SwissTLight'; font-size: 14px; }
footer h2 { color: #fff; margin-bottom: 1em; }
#copyright { font-size: 12px; text-align: left; margin-top: 75px; } 
#igd { font-size: 11px; text-align: right; margin-top: 75px; }
#igd a { color: #fff; text-decoration: underline; }

#footer_mid_second a { color: #fff; }

/* ------------------------- Front Page blocks --------------- */
.block-views-blockservices-block-1 { background-color: #5d84d1; float: left; }
.block-views-blockservices-block-1 .views-row { clear: both; }
.node.service.teaser .columns:first-of-type { clear: left; }
.node.service.teaser .text-wrapper { padding: 30px 40px; }
.node.service.teaser h2, .node.service.teaser .body, .node.service.teaser a { color: #fff; }
.node.service.teaser .body, .node.service.teaser a { font-family: 'Calibri'; font-size: 17px; text-align: left; line-height: 1.2; margin-bottom: 0.6em; }
.node.service.teaser .body .alignr { text-align: right; margin-bottom: 0; }
.node.service.teaser h2 { font-family: 'SwissTLight'; font-size: 28px; margin: 0 0 15px; }
.node.service.teaser img { width: 100%; }
.node.service.teaser .more-link { text-align: right; }

/* ------------------------- Community Page Link ------------ */
#block-block-13 a { display: inline-block; margin: 0 0 10px 0; padding: 3px; width: 100%; border: 2px solid #6089d9;
    transition: border-color 1s; font-family: 'Calibri'; font-size: 17px; color: #a3a3a3; text-transform: uppercase; transition: color 1s; text-align: center;}
#block-block-13 a:hover { color: #6089d9; transition: color 1s; border: 2px solid #a3a3a3; transition: border-color 1s; }


/* ------------------------- Webforms ------------------------ */
label, span.fieldset-legend { font-family: 'Calibri'; font-size: 17px; color: #7f7f7f; text-transform: uppercase; font-weight: bold; }
[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select { border: 2px solid #5d84d1; }
input.button  { background-color: #5d84d1; color: #fff; vertical-align: top; }
fieldset { border: 1px solid #7f7f7f; border-radius: 5px; padding: 15px; margin-bottom: 15px; }
.tabledrag-toggle-weight-wrapper { display: none; }
.webform-multiple-add input.form-number { max-width: 50%; float: left; font-size: 14px; }
.webform-multiple-add span.field-suffix { max-width: 50%; float: left; font-size: 10px; margin: 6px 0 0 6px; }
label.form-required:after { content: '*'; color: red; }
.description, .webform-element-description { font-size: 11px; }
#edit-images-upload, #edit-documents-upload { margin-bottom: 0; }
.js-form-type-webform-image-file, .js-form-type-webform-document-file { margin-bottom: 30px; }

/* ------------------------- Folders ------------------------- */
.block-views-blockfolders-block-1 * { font-size: 12px; }
.block-views-blockfolders-block-1 .views-row { margin-bottom: 20px; }

/* ------------------------- Tab buttons --------------------- */
#block-jpcc-primary-local-tasks ul { margin-left: 0; list-style: none; border-top: 1px solid #5d84d1; }
#block-jpcc-primary-local-tasks ul li { display: inline-flex; border-radius: 3px; }
#block-jpcc-primary-local-tasks ul li a { color: #fff; background-color: #5d84d1; padding: 5px 15px; }
#block-jpcc-primary-local-tasks ul li a.is-active { border-bottom: 3px solid #000; }
#block-jpcc-primary-local-tasks ul li a:hover { background-color: #000; }


/* ------------------------- Captcha ------------------------- */
fieldset.captcha.form-wrapper span.fieldset-legend { color: #4d4d4d; }
fieldset.captcha.form-wrapper { border-color: #cccccc; padding-top: 0; margin-bottom: 15px; }
fieldset.captcha.form-wrapper .fieldset-description { font-size: 11px; }


/* ----------------------- Mobile Navigation ------- */
#offCanvasRight {
	background-color: #000;
}

#offCanvasRight ul.mobile-menu {
	padding: 60px 0 0 0;
    display: block;
}

#offCanvasRight ul.mobile-menu li {
    display: block;
}
#offCanvasRight ul.mobile-menu li a {
    color: #a3a3a3;
    font-size: 20px;
    line-height: 20px;
    font-family: 'Calibri';
    display: block;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
}


#mobile_navigation {
	position: absolute;
	right: 10px;
	top: 12px;
}

@media screen and (max-width: 1920px) {
	#block-mainnavigation a { padding: 40px 15px 42px; }	
}

@media screen and (max-width: 1600px) {
	#block-mainnavigation a { padding: 40px 5px 42px; font-size: 20px; }
    #block-mainnavigation-2 a { padding: 40px 15px 42px; font-size: 22px; }
    #block-mainnavigation-2 ul.menu ul a { font-size: 17px; }
	.region-navigation { height: 115px; }
}

@media screen and (max-width: 1440px) {
    #activities { margin-bottom: 0; }
}

@media screen and (max-width: 1240px) {
	#block-mainnavigation ul.menu li { margin-left: 0; padding-right: 0; }
	#block-mainnavigation a { font-size: 18px; }
    #block-mainnavigation-2 a { padding: 40px 10px 42px; font-size: 19px; }
    #block-mainnavigation-2 ul.menu ul a { font-size: 15px; padding: 10px 5px; }
	.region-navigation { height: 110px; }
	#block-phonenumber p { font-size: 28px; } 
}

@media screen and (max-width: 1024px) {
	#block-mainnavigation a { padding: 30px 2px 30px; font-size: 14px; }
	.region-navigation { height: 82px; }
	.bluebox { padding: 15px 20px; }
    #block-block-13 { text-align: center; }
    #block-sidebarmenu ul.menu li, #block-block-13 a { display: inline-block; width: 250px; margin: 10px auto; }
    .block-views-blockcommunity-page-link-block-1 a { width: 250px; margin: 10px auto; }
}

@media screen and (max-width: 780px) {
    #block-mainnavigation a { font-size: 11px; }
}

@media screen and (max-width: 640px) {
	#copyright { margin-top: 30px; text-align: center; }
	#igd { margin-top: 0; text-align: center; }
    #block-footer .menu { display: block; }
    #block-footer ul.menu li { text-align: center; }
}

/* ------------------------ Custom Visibility Classes -------- */
@media only screen and (min-width: 1440px) {
    .xlarge-2 { width: 16.6%; }
    .xlarge-8 { width: 66%; }
}