/**********************************************************************
 * Shire Styles 20
 *
 * Program: style20.css
 * Purpose: Styles for both Mobile and screen
 * Author: LJ Harrold
 * Date: 29-12-2018
 *
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/
 * Sheet organization:
 *   1)  Font sizes, base HTML elements
 *   2)  Page layout containers
 *   3)  Tables
 *   4)  Content blocks in specific layout containers
 *   5)	 Links
 **********************************************************************/


/**********************************************************************
 *  1) Font sizes, base HTML elements
 *********************************************************************/

:root {  /* current Shire colour pallet. */
	
	/* reference colours */
	--shire-white: rgb(255,255,255);
	--shire-red: rgb(255,59,48);
	--shire-orange: rgb(255,149,0);
	--shire-yellow: rgb(255,204,0);
	--shire-green: rgb(76,217,100);
	--shire-teal: rgb(90,200,250);
	--shire-blue: rgb(0,122,255);
	--shire-purple: rgb(88,86,214);
	--shire-pink: rgb(255,45,85);	
	--shire-cyan: rgb(0,255,255);
	--shire-lightgrey: rgb(211,211,211);				/* Light gray */
	--shire-grey: rgb(192,192,192);						/* Silver */
	--shire-darkgrey: rgb(169,169,169);					/* Dark gray */
	
	--panel-whatson: rgb(255,149,0);					/* orange */
	--panel-whatson-text: rgb(0,0,0);					/* black */

/*	--panel-shire: rgb(0,255,255);						/* cyan */ 
	--panel-shire: rgb(0,148,187);						/* Changed when IC took over layout 2019 */
	--panel-shire-text: rgb(0,0,0);						/* black */

	--panel-community-ads: rgb(0,255,255);				/* cyan */
	--panel-community-ads-text: rgb(0,0,0);				/* black */
	
	--panel-notice: rgb(88,86,214);						/* purple */
	--panel-health: rgb(0,128,0);						/* green */
	--panel-health-text: rgb(255,255,255);				/* white */
	
	--panel-school-nova: rgb(74,187,119);				/* NOVA primary school - green */
	--panel-school-nova-text: rgb(255,255,255);			/* White */
	--panel-school-sps: #374C81;						/* Shirehampton Primary School - dark blue */
	--panel-school-sps-text: rgb(255,255,255);			/* White */
	--panel-school-stbernards: rgb(65,105,225);			/* St Bernards primary School - royal blue */
	--panel-school-stbernards-text: rgb(255,255,255);	/* White */
	--panel-nature-notes: rgb(152,251,152);				/* Mint green */
	--panel-nature-notes-text: rgb(78,46,40);			/* Chocolate brown */
	
	
	/* boxes base */
	--box-font-size:12px;
	--box-line-height: 1.428;
	--box-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--box-margin-bottom: .2em;
	--box-p-margin-top:0;
	--box-p-margin-bottom: .5rem; 
	
	/* box headings base */
	--box-heading-font-size: 1.65rem;		
	--box-heading-font-weight: 600;		
	--box-heading-color: #000000;
	--box-heading-line-height: 1rem;
	--box-heading-margin-bottom: 1.3rem;	
	
	/* Box heading backgrounds */
	--box-contentgroup-heading-bkgrd: rgb(0,255,255);	/* cyan */
	--box-infogroup-heading-bkgrd: rgb(0,255,255);		/* cyan */
	--box-adgroup-heading-bkgrd: rgb(0,122,255);		/* blue */
	
	/* help boxes */
	--box-help-heading-color: #FFFFFF;
	--box-help-heading-bkgrd: rgb(255,149,0);			/* orange */

	/* Promo boxes */
	--box-promo-heading-color: #FFFFFF;
	--box-promo-heading-bkgrd: rgb(0,122,255);			/* blue */

	/* Teezer boxes */
	--box-teezer-heading-color: rgb(64,64,64);			/* dark grey */
	--box-teezer-heading-bkgrd: rgb(192,192,192);		/* grey */
	
	--box-teezer-subheading-color: rgb(255,255,255);	/* white */
	--box-teezer-subheading-bkgrd: rgb(211,211,211);	/* grey */

}

p, 
li, 
form, 
textarea, 
select, 
.message_bar, 
.responses_bar, 
input, 
textarea, 
html
{
	color:black;
}

body {
	line-height:1.428571429;
	font-family: -apple-system, BlinkMacSystemFont, helvetica, sans-serif;
	color:black;
	/*background-color:#005496;*/
	min-height:1px;
	font-size:14px;
}

/** Image has to be wrapped in div. This creates a shiv to bump down the image and all text to wrap **/
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;
  
}

#article01,#article02 {
	width: 100% ; 
	margin: 0 auto ;
}

/** Clearfix **/
.cf:after{
	clear:both;
	content: "";
	display:table;
}
.clearfix:after {
	clear:both;
}

.clearfix:before {
	content:"";
	display:table;
}







h1,h2,h3,h4,h5,h6 { color:inherit; line-height:1.1em; font-weight:500; }

h1 { 
    font-size: 2.5em;
	font-family: Georgia,"Times New Roman", Times, serif;
}


h2 {
    font-size: 2em;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

h3 { 
    font-size: 1.75em;
	color:#0094BB; 
	font-family:'Franklin Gothic Heavy';
}

h4 { 
	font-size: 1.5em;
}

h5 { 
    font-size: 1.25em;
}
h6 { 
    font-size: 1em;
}

h3.link_heading {
	color: black;
}

small, .small { font-size:.85em; font-weight:normal; color: #BABABA;}

.text-color-red {
	color:red;
}

.text-color-blue {
	color:blue;
}

.text-color-green {
	color:green;
}


/* BY LINE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
p.byLine { border-left: .5em solid #eee; border-bottom: 0.01em solid #eee; padding:.1em 0 .1em 0.735em; margin-top:0.5em; }
p.byLine { display:block; font-size:.95em; font-style:italic; color: #000080;}


/* HEADLINE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.panel-heading > h1 { 
    font-size: 2.6em;
	font-family: "Franklin Gothic Heavy";
	padding: 0.5rem 0 0.5rem 1.2rem;
}

.panel-heading > h1.headline-inverse { 
	color: white;
	background-color: black;
}

.col-contents {
	padding:0;
}

/* CUSTOMISED PANELS using vars not supported by IE ~~~~~~~~~*/
/* Obituaries *******************************/

.panel-obit {
  border-color: #000000;
}

.panel-obit > .panel-heading {
  color: #000000;
  background-color: #E3E3E3;
  border-color: #000000;
}

.panel-obit > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #000000;
}

.panel-obit > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #000000;
}

/* Shire Committee *************************/

.panel-shire {
  border-color: rgb(0,148,187);	/* corporate colour */
}

.panel-shire > .panel-heading {
  color: rgb(255,255,255);
  background-color: rgb(0,148,187);
  border-color: rgb(0,148,187);
  
}

.panel-shire > .panel-heading .byLine {
  color: rgb(0,0,0);
}

.panel-shire > .panel-heading + .panel-collapse .panel-body {
  border-top-color: rgb(0,148,187);
}
.panel-shire > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color:  rgb(0,148,187);
}


/* Notices ********************************/

.panel-notice {
  border-color: rgb(88,86,214);
}

.panel-notice > .panel-heading {
  color: rgb(255,255,255); 
  background-color: rgb(88,86,214);
  border-color: rgb(88,86,214);
  
}

.panel-notice > .panel-heading .byLine {
  color: rgb(255,255,255);
}

.panel-notice > .panel-heading + .panel-collapse .panel-body {
  border-top-color: rgb(88,86,214);
}
.panel-notice > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color:  rgb(88,86,214);
}


/* Community Advertising ********************************/

.panel-community-ad {
  border-color: rgb(0,255,255);	/* cyan */
}

.panel-community-ad > .panel-heading {
  color: rgb(255,255,255);
  background-color: rgb(88,86,214);
  border-color: rgb(0,255,255);	/* cyan */
  
}

.panel-community-ad > .panel-heading .byLine {
  color: rgb(255,255,255);
}

.panel-community-ad > .panel-heading + .panel-collapse .panel-body {
  border-top-color:  rgb(0,255,255); /* cyan */
}

.panel-community-ad > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color:  rgb(0,255,255); /* cyan */
}


/* Health matters ***************************/
.panel-health {
	border-color: rgb(0,128,0); 
}

.panel-health > .panel-heading {
	color: rgb(255,255,255);	
	background-color: rgb(0,128,0);	
	border-color: rgb(0,128,0); 
}

.panel-health > .panel-heading .byLine {
	color: rgb(255,255,255);
}

.panel-health > .panel-heading + .panel-collapse .panel-body {
	border-top-color: rgb(0,128,0);
}
.panel-health > .panel-footer + .panel-collapse .panel-body {
	border-bottom-color: rgb(0,128,0);
}

/* Whats On ********************************/

.panel-whatson {
	border-color: rgb(255,149,0);
	border-color: var(--panel-whatson);
}

.panel-whatson > .panel-heading {
  color: rgb(0,0,0);
  background-color: rgb(255,149,0);
  border-color: rgb(255,149,0);
  
}

.panel-whatson > .panel-heading .byLine {
	color: rgb(0,0,0);
}

.panel-whatson > .panel-heading + .panel-collapse .panel-body {
  border-top-color:  rgb(255,149,0);
}
.panel-whatson > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color:  rgb(255,149,0);
}

/* NOVA primary school *********************/

.panel-school-nova {
	border-color: rgb(74,187,119);
}

.panel-school-nova > .panel-heading {
  color: rgb(255,255,255);
  background-color:rgb(74,187,119);
  border-color:rgb(74,187,119);
  
}
.panel-school-nova > .panel-heading + .panel-collapse .panel-body {
  border-top-color:rgb(74,187,119);
}
.panel-school-nova > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color:rgb(74,187,119);
}

/* Shirehampton primary school *********************/

.panel-school-sps {
	border-color:#374C81;
}

.panel-school-sps > .panel-heading {
  color: rgb(255,255,255);
  background-color:rgb(0,0,139);
  border-color: rgb(0,0,139);  
}

.panel-school-sps > .panel-heading .byLine {
	color: var(--panel-school-sps-text);
}

.panel-school-sps > .panel-heading + .panel-collapse .panel-body {
  border-top-color: rgb(0,0,139);
}
.panel-school-sps > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: rgb(0,0,139);
}


/* St Bernards RC primary school *********************/

.panel-school-stbernards {
	border-color: rgb(65,105,225);
}

.panel-school-stbernards > .panel-heading {
  color: rgb(255,255,255);
  background-color:rgb(65,105,225);
  border-color: rgb(65,105,225);  
}

.panel-school-stbernards > .panel-heading .byLine {
	color: var(--panel-school-stbernards-text);
}

.panel-school-stbernards > .panel-heading + .panel-collapse .panel-body {
  border-top-color: rgb(65,105,225);
}
.panel-school-stbernards > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: rgb(65,105,225);
}




/* NatureNotes *********************/

.panel-nature-notes {
	border-color: rgb(152,251,152);
}

.panel-nature-notes > .panel-heading {
  color: rgb(78,46,40);
  background-color:rgb(152,251,152);
  border-color: rgb(152,251,152);  
}

.panel-nature-notes > .panel-heading .byLine {
	color: rgb(78,46,40);
}


.panel-nature-notes > .panel-heading + .panel-collapse .panel-body {
  border-top-color: rgb(152,251,152);
}
.panel-nature-notes > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: rgb(152,251,152);
}

/* Advertisment classification sections ********************/

.panel-classifieds {
	border-color: rgb(0,255,255);
}

.panel-classifieds > .panel-heading {
	color: rgb(75,0,130);
	background-color: rgb(0,255,255);
	border-color: rgb(0,255,255);    
}

.panel-classifieds > .panel-heading + .panel-collapse .panel-body {
  border-top-color: rgb(0,255,255);
}
.panel-classifieds .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: rgb(0,255,255);
}

/* Family Announcements ********************/

.panel-family {
	border-color: rgb(255,20,147);
}

.panel-family > .panel-heading {
	color: rgb(255,255,255);
	background-color: rgb(219,112,147);
	border-color: rgb(219,112,147);    
}

.panel-family > .panel-heading + .panel-collapse .panel-body {
  border-top-color: rgb(219,112,147);
}
.panel-family .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: rgb(219,112,147);
}


p { text-align: justify; }


/* ~~ Section heading ~~ */
section::before {
	font-family: Arial, Helvetica, sans-serif;
	font-style:italic;
	font-size:1.2rem;
	font-weight:bold;
	font-variant:small-caps;
	color: #FFF;
	background-color:transparent;
	background: rgba(12,8,104,1);
	background: -moz-linear-gradient(left, rgba(12,8,104,1) 0%, rgba(175,174,204,1) 59%, rgba(244,245,247,0.62) 84%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(12,8,104,1)), color-stop(59%, rgba(175,174,204,1)), color-stop(84%, rgba(244,245,247,0.62)));
	background: -webkit-linear-gradient(left, rgba(12,8,104,1) 0%, rgba(175,174,204,1) 59%, rgba(244,245,247,0.62) 84%);
	background: -o-linear-gradient(left, rgba(12,8,104,1) 0%, rgba(175,174,204,1) 59%, rgba(244,245,247,0.62) 84%);
	background: -ms-linear-gradient(left, rgba(12,8,104,1) 0%, rgba(175,174,204,1) 59%, rgba(244,245,247,0.62) 84%);
	background: linear-gradient(to right, rgba(12,8,104,1) 0%, rgba(175,174,204,1) 59%, rgba(244,245,247,0.62) 84%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c0868', endColorstr='#f4f5f7', GradientType=1 );

 }






/************************************************************************************************
* 5. Links
************************************************************************************************/

/* Default */
a, a:visited, a:active {
	text-decoration:none; 
	color:blue; 
	outline:0; 
	padding:0;
	font-style:normal;
	font-weight:normal;
	font-family:inherit;
	/*border-bottom:thin dotted blue;*/
	}
a:hover { 
	background-color:#EAEAEA; 
	}

.linkro-darkred a:hover { color:red; }

a.ad-link {
	display:block !important;
	color:blue;
	font-size:.95em;
	font-weight:bold; 
	text-decoration:none; 
	border-bottom:none;
	}


/* Emulate Windows 97 button */
a.btn-win97  ,  a:visited.btn-win97,  a:active.btn-win97  {
	text-decoration:none; 
	outline:0; 
	padding: 2px; 
	font-style:normal;
	font-weight:normal;
	font-family:inherit; 
	border-bottom:#435058;
	}

a:hover.btn-win97   { 
	background-color:#EAEAEA; 
	}


/**************************************************************************
* Images
**************************************************************************/
figcaption {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size:.85em;
	font-style:italic;
	text-align:center;
	padding:1rem 0 2rem 0;
	
}

.wrap-images
{
display:flex;
flex-wrap: wrap;
}




/*
img.obituary {					/* ~~ Obituary image ~~ *
	border:4px solid black;
}
*/


/* ~~ Fixed dimension Thumbnails ~~ *
img.ad_thumbnail {
	display:inline-block;
	vertical-align:middle;
	margin: 1px auto;
	border: thin solid black;
	border-radius:4px;
	/*width: 25.85rem;  media dependant *
	max-width: 100%; 
	overflow:hidden;
}
*/

/* logos */
img.logo, img.logo30, img.logo60 {
	border:0px;
	box-shadow:none;
	width:auto\9;
	background-color:transparent;
	margin-top:auto;
	max-width: 200px;
}

img.logo30 {
	max-width:30px;
}

img.logo60 {
	max-width:60px;
}


#edition-content {
	padding-left:1em;
	padding-right:2em;
}


/*=========================================================================================================
* Shire site layout 
==========================================================================================================*/

#leftside {
	border-right: thin solid black;
	border-bottom: thin solid black;
}


/* ~~ Shire Layout ~~ */
.shire-header { 
	background-color:white;
	}

div.masthead { /* This is the gradient background for the shire masthead */
	background: -moz-linear-gradient(45deg, #000080 0%, #000080 51%, #A3C7ED 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #000080), color-stop(51%, #000080), color-stop(100%, #A3C7ED)); /* safari4+,chrome */
	background: -webkit-linear-gradient(45deg, #000080 0%, #000080 51%, #A3C7ED 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(45deg, #000080 0%, #000080 51%, #A3C7ED 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(45deg, #000080 0%, #000080 51%, #A3C7ED 100%); /* ie10+ */
	background: linear-gradient(45deg, #000080 0%, #000080 51%, #A3C7ED 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00E3E3', endColorstr='#000080',GradientType=1 ); /* ie6-9 */
	color:#ffffff;  
	font-size:1.25em;
	}
	
/* Edition line ~~~~*/
div.edition-line {
	background-color: cyan;
	padding-left:.5em;
	padding-right:.5em;
	border-top:2px solid #B2FFFF; 
	border-bottom:2px solid #00B7EB; 
	line-height:2em;
	}

#editionNumber { color:black; font-weight:bold; text-align:right;}
#editionMonth { color:black; font-weight:bold; text-align:left;}
#editionCentre { color:black; font-weight: normal; text-align:center;}

#nav-left { background-color: #80FFFF;}


/* display logos *
img.logo, img.small, img.medium {
	border:0px; 
	box-shadow:none;
	border-radius:0px;
	/*width:auto\9;*
	background-color:transparent !important;
	margin-top:auto;
}
*/
/* Small logo *
img.small {
	max-width:30px;
}
*/
/* Medium logo *
img.medium {
	max-width:60px;
}
*/

/* Shire logos */
.shire-logo,
.new-shire-logo,
.shire-banner,
#shire-mission-statement, 
.shire-mission-statement { 
	font-family: "Times New Roman", Times, serif; 
	font-style:italic; 
	color:blue; 
	font-weight:bold; 
}

.shire-logo-sm 	{ font-size: .85em; }
.shire-logo-md	{ font-size: 1.25em;} 
.shire-logo-lg 	{ font-size: 2.5em; }
.new-shire-logo { font-size: 1.5em; }


.shire-headline { font-size:3.5rem; }

.shire-banner,
#shire-mission-statement, 
.shire-mission-statement {
	color:cyan; 	
}

#shire-mission-statement, .shire-mission-statement {
	margin-left:5px;
}

/*
.navbar-search-box, #navbar-search-box {
	max-width:25em;
}
*/

/* Shire banner dynamic layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/* Suggested breakpoints for the most common screen sizes
smaller than or equal to 768 px (smartphones)
larger than 768 px (small devices, tablets) 
larger than 992 px (medium devices)
larger than 1200px (large devices)
*/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.shire-banner {
		font-size: 2.8rem;
	}

	#shire-mission-statement,
	#advertising {
		display:none;
	}
	
	.shire-logo-lg 	{ font-size: 1.5em; 
	}


}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
	.shire-banner {
		font-size: 2.8rem;
	}
	img.ad_thumbnail {
		width:1.2rem;
		max-width:5px;
	}

	#shire-mission-statement,
	#advertising {
		display:none;
	}
	
	.shire-logo-lg 	{ font-size: 1.5em; }

}

/* Medium devices (tablets, 768px and up), nav wraps here */
@media (min-width: 768px) and (max-width: 991.98px) { 
	.shire-banner {
		font-size: 3.8rem;
	}

	img.ad_thumbnail {
		width:1.2rem;
		max-width:5px;
	}
	
	#masthead {
		margin-top:10rem;
	}

	.shire-logo-lg 	{ font-size: 1.5em; }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.shire-banner {
		font-size: 4.8rem;
	}
	img.ad_thumbnail {
		width:12px;
	}

	#masthead {
		margin-top:0;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.shire-banner {
		font-size: 5.8em;
	}

	#masthead {
		margin-top:0;
	}
}

/**********************
* Buttons
**********************/

/**********************************************************************************************************
* Lists 
**********************************************************************************************************/
	

ul.unstyled { list-style:none; }
ul.inline { display:inline-block; padding:5px; }

ul.bullet {
	list-style:none;
	padding: 0;
	margin: 0;
	}
	ul.bullet li {
		padding-left: 2em;
		margin: 0;
		}
			
	ul.bullet li:before {
			content: '\2022';;
			color:#008080;
			font-size:1.5em;
			vertical-align:middle;
			padding-right:.8em;
			}

/* ~~ Ordered lists ~~ */
ol.decimal {  /* Ordered list - bullet type numeric */
	list-style-type:decimal; }
	
ol.decimal-leading-zero { /* Ordered list - bullet type numeric with padded zeros */
	list-style-type:decimal-leading-zero; }


ol.lower-alpha {  /* Ordered list - bullet type lower case alpha */
	list-style-type:lower-alpha;	
	}
	


ol.lower-roman {  /* Ordered list - bullet type lower case roman */
	list-style-type:lower-roman; 
	}
	
dl { /* Definition list */
}		
dt { color:black; font-family:Arial, Helvetica, sans-serif; font-weight:bold; /*border:thin solid black;*/ }
dd { color:black; }


.list-group .list-group-item h4.list-group-item-heading{
	font-size: 1.12em;
    font-weight: bold;
	color: #234B7B;
}

ul.list-group { 
	list-style:none;
	list-style-type:none;
	border-color:#ddd;
	border-radius:4px;
	}
	
	li.list-group-item {  /* ~~ list group item trailing line divider ~~ */
			border-bottom-style: solid;
			border-bottom-color: #d4d0c8;
			border-bottom-width: .1em;
			}
			
			a.list-group-item { color:#555; text-decoration:none;}
			a.list-group-item:hover { background-color:#f5f5f5; color:#555; text-decoration:none; border-bottom:none;}
	
		li.list-group-item:before { /* List group item bullet type */
			content: " ";
			vertical-align:middle;
			}

/**********************************************************************************************
* Boxes
***********************************************************************************************/

#xs-edition-nav-top,
#sm-edition-nav-top {
	background-color: cyan; 
	margin:0; padding:0; 
	border-top:2px solid #B2FFFF; 
	border-bottom:2px solid #00B7EB; 
	border-radius:0; 
	text-align:center;
	width:100%;
	font-size:1.2rem;
	}
#xs-edition-nav-top-centre, .xs-edition-nav-top-centre,
#sm-edition-nav-top-centre, .sm-edition-nav-top-centre {
	color: #2B2B2B;
	font-weight:700;
	font-size:1.48rem;
}



/* NEWS ARTICLE default ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	
/* Letters ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.letter { 
	border-bottom:.01em solid #234B7B;
	}

	.letter-heading-group h1, 
	.letter-heading-group p {
		color: #234B7B;
		background-color:transparent;
		line-height:1em;
		}
	
	.letter-body {	background-color: transparent;	}
	
		.letter-body h2 {
			color: #234B7B;
		}
	
		.letter-body h3 { 
			color: #234B7B;
		}
		
		.letter-body h4 { 
			color: #234B7B;
		}
		
		.letter-body h5 { 
			color: #234B7B;
		}
		.letter-body h6 { 
			color: #234B7B;
		}


	.letter-footer {
		font-size:89%; 
		border-top:1px dotted #CCC; 
		padding:5px; 
		margin:0; 
		background-color:#F5F5F5;
	
		}
	
	.letter-footer  > .contactDetails {
		text-align:left; 
		font-style:italic; 
		}



/* ~~ Letter Box, letters to the editor ~~ */
.letter-box {
	background-color: transparent;
	border-bottom-color: #234B7B;
	}
	

.letter-box > .letter-heading-group > .letter-headline {
	font-family:"Times New Roman", Times, serif; 
	font-style:italic; 
	font-weight:bold; 
	color:blue; 
	}

.letter-box > .letter-heading-group {
	margin-top:1em;
	border-top-width: .1em;
	border-top-style: solid;
	border-top-color: #CECECE;
	border-bottom-width: .1em;
	border-bottom-style: dotted;
	border-bottom-color: #CECECE;
	padding: 1em 0;
	}
	
.letter-box > .letter-body { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size:.99em;
	padding-bottom: 1em;
	}

	.letter-box > .letter-body > .letter-body {  /* draw line after each letter */
			border-bottom-color:#ddd;
			border-bottom-style:solid;
			border-bottom-width:.01em;
		}


.letter-box > .letter-body p { 	/* draw line alongside letter */
	border-left-color: #C9C9C9;
	border-left-style:solid;
	border-left-width:.35em;
}


	.letter-box > .letter-body > .letter-body:before { 
		content:"Dear Editor,"; 
		line-height:1.5em;
		font-family: Arial, Helvetica, sans-serif;
		font-size:1em;
		font-style:italic;
		}

letter-subject {  /* ~~ User defined tag ~~ */  
	background-color: transparent;
	color: #400080;  
	font-size:1.2em;
	font-weight:bold; 
	font-family:Arial, Helvetica, sans-serif; 
	}


letter-writer {   /* ~~ User defined tag ~~ */
	color:#BABBC6; 
	font-size:1.1em;
	font-weight:bold;
	}
letter-writer:before {   /* ~~ User defined tag ~~ */
	content:" - from ";
	}



/*******************************************************************
* BOXES
*******************************************************************/
.box { background-color:white;}

.box-body {
	font-size: 12px;
	font-size: var(--box-font-size:); 
	 }

.box-text { 
	font-family:inherit; 
	font-size: 12px;
	font-size: var(--box-font-size:); 
	color:inherit;
	}

p.box-text {
	text-align:left;
}

/*********************************************************************************************
* Dynamic boxes 
*********************************************************************************************/


/* ~~ INDEX BOX ~~ */
.index-box {  /* ~~ Index box, outter ~~ */
	margin:0;
	padding:0;
	border-style:solid; 
	border-color: transparent; 
	/* border-width:4px; */
	border:thin solid black; 
	font-size: 12px;
	font-size: var(--box-font-size:); 
	}


/*  Default ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*.article-default  {  
	border-color: #ddd;
	border-radius:4px;
	text-decoration:none;
	background-color: transparent;
	color:#000;
	}

	.article-default  > .article-heading-group {
		border-top-left-radius:4px;
		border-top-right-radius:4px;
		}	

	.article-default > .article-footer {
		font-size:89%; 
		border-top:1px dotted #CCC; 
		padding:5px; 
		margin:0; 
		background-color:#F5F5F5;
	
		}
	
	.article-default > .article-footer  > .contactDetails {
		text-align:left; 
		font-style:italic; 
		}


*/

/*  Adverisment ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.articleAd  { 
	border-color: #E9E9E9;
	border-radius:8px;
	text-decoration:none;
	background-color: transparent;
	}

	.articleAd  > .article-heading-group {
		padding:0;
		border:0;
		color: #400080;
		font-size:89%;
		background-color: #E9E9E9;
		border-top-left-radius:8px;
		border-top-right-radius:8px;
		}
	.articleAd  > .article-heading-group >.article-headline {
		font-size:1.1em;
		font-weight:bold;		
	}


	
	.articleAd > .article-body > h1,
	.articleAd > .article-body > h2,
	.articleAd > .article-body > h3,
	.articleAd > .article-body > h4
	 {
		line-height:1em;
		padding:0;
		margin:0;
		}
	.articleAd > .article-body > p {
		font-size:.85em;
		line-height:1.2em;
	}

/*  Article Information box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
.articleInfo  {
	border-color: #ddd;
	border-radius:4px;
	text-decoration:none;
	background-color: transparent;
	color:#000;
	}

	.articleInfo  > .article-heading-group {
		color: white;
		font-family:Arial, Helvetica, sans-serif;
		background-color:#028482;
		border-radius: 4px 4px 0 0;
		}
	
	
	.articleInfo > .article-body > h1,
	.articleInfo > .article-body > h2,
	.articleInfo > .article-body > h3,
	.articleInfo > .article-body > h4
	{
		line-height:1em;
		padding:0;
		margin:0;
	}
		
	.articleInfo > .article-body > p {
		text-align:left;
		font-size:.85em;
		line-height:1.5em;
	}
*/


/*  Obituary ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.obituary-box { border-color:#000; border-width:2px; background-color: #EAEAEA;}



/*********************************************************************************************
* Static boxes 
*********************************************************************************************/

/* ~~ Inside Box Links ~~ */
a.box-link,
a.box-link:visited,
a.box-link:active {
	outline:0;
	display:block;
	/*font-size: .95em;*/
	font-style:normal;
	font-weight:normal;
	font-family:inherit;
	padding:0;
	color:blue;
	padding-top:.2em;
	padding-bottom:.2em;
	text-decoration:none;	
	border-bottom-color:blue;
	border-bottom-style:dotted;
	border-bottom-width:thin;
	}
	
	a.box-link:hover {
		background-color:#EAEAEA;
		border-bottom-color:blue;
		border-bottom-style:dotted;
		border-bottom-width:thin;
		}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++
* BOX GROUPS
+++++++++++++++++++++++++++++++++++++++++++++++++++*/



/*  Advertisment group~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.adverts-box {  
	border-color: transparent;
	}

.adverts-box > .box-heading {	/* Adverts box Heading ~~ */
		color:white;
		font-weight: var(--box-heading-font-weight);
		background-color: #400080;
		}

.adverts-box box-body {  /* ~~ Adverts box body ~~ */
	display:block;
	text-decoration:none;
	color:#028482;
	}


.adverts-box p { font-size:.85em; }

/*  Help group~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.help-box {
	font-size: 12px;
	margin-bottom: .2rem; 
	border-color: thin solid blue;

	font-size: var(--box-font-size:); 
	margin-bottom: var(--box-margin-bottom);
	}


	.help-box > .box-heading {
		
	 	color: white;
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 1.3rem;
		background-color: rgb(255,149,0);


	 	color: var(--box-help-heading-color);
		font-size: var(--box-heading-font-size);
		font-weight: var(--box-heading-font-weight);
		margin-bottom: var(--box-heading-margin-bottom);
		background-color: var(--box-help-heading-bkgrd);
		}
	
	.help-box > .box-body h2 { line-height:1em; font-size:2em; }
	
	.help-box ul, .help-box ol { font-size: 1em; list-style: square; line-height:1.1em; padding: 1em; }

	.help-box ul li, .help-box ol li { font-size: .95em;  padding-bottom:.5em; }
		
	.help-box ol li ul{font-size: .95em;	list-style:disc; }
	
	.help-box p { 
		font-size: 12px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

		font-size: var(--box-font-size);
		font-family: var(--box-font-family); 
	}
	
/* pomo box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.promo-box > .box-heading {
		
	 	color: #FFFFFF;
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 1.3rem;
		background-color: rgb(0,122,255);


		font-size: var(--box-heading-font-size);
		font-weight: var(--box-heading-font-weight);
		margin-bottom: var(--box-heading-margin-bottom);
	 	color: var(--box-promo-heading-color);
		background-color: var(--box-promo-heading-bkgrd);

		}
	
	.promo-box > .box-body h2 { line-height:1em; font-size:2em; }
	
	.promo-box ul, .promo-box ol { font-size: 1em; list-style: square; line-height:1.1em; padding: 1em; }

	.promo-box ul li, .promo-box ol li { font-size: .95em;  padding-bottom:.5em; }
		
	.promo-box ol li ul{font-size: .95em;	list-style:disc; }
	
	.promo-box p { 
		font-size: 12px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

		font-size: var(--box-font-size);
		font-family: var(--box-font-family); 
	}


/* teezer box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Substitute for contents on mobiles/small devices */
	.teezer-box > .box-heading {
		
	 	color: rgb(255,255,255);
		font-size: 12px;
		font-weight: 700;
		margin-bottom: 1.3rem;
		background-color: rgb(47,79,79);


		font-size: var(--box-heading-font-size);
		font-weight: var(--box-heading-font-weight);
		margin-bottom: var(--box-heading-margin-bottom);
	 	color: var(--box-teezer-heading-color);
		background-color: var(--box-teezer-heading-bkgrd);
		padding:.7em;
		margin-bottom:0;

		}
	
	.teezer-box > .box-subheading {
		
	 	color: rgb(255,255,255);
		font-size: 12px;
		font-weight: 800;
		margin-bottom: 1.3rem;
		background-color: rgb(112,128,144);


		font-size: var(--box-subheading-font-size);
		font-weight: var(--box-subheading-font-weight);
		margin-bottom: var(--box-subheading-margin-bottom);
	 	color: var(--box-teezer-subheading-color);
		background-color: var(--box-teezer-subheading-bkgrd);
		padding:.5em;
		margin-top:0;

		}
	
	.teezer-box > .box-body h2 { line-height:1em; font-size:2em; }
	
	.teezer-box ul, .teezer-box ol { font-size: 1em; list-style: square; line-height:1.1em; padding: 1em; }

	.teezer-box ul li, .teezer-box ol li { font-size: .95em;  padding-bottom:.5em; }
		
	.teezer-box ol li ul{font-size: .95em;	list-style: circle; }
	
	.teezer-box p { 
		font-size: 1.2em;
		font-family: -apple-system, BlinkMacSystemFont, helvetica, sans-serif;

		font-size: var(--box-font-size);
		font-family: var(--box-font-family); 
	}


/*========================================
* Edition navigation - content group boxes
=========================================*/




.edition-box,
.section-box,
.content-box{

	font-size: 12px;
	margin-bottom: .2rem; 
	border-color: thin solid blue;

	font-size: var(--box-font-size:);
	margin-bottom: var(--box-margin-bottom); 


	
	}

	.edition-box  > .box-heading,
	.section-box  > .box-heading,
	.content-box  > .box-heading
	 	{	
	 	color: #00000;
		font-size: 1.65rem;
		font-weight: 600;
		margin-bottom: 1.3rem;
		background-color: rgb(0,255,255);

	 	color: var(--box-heading-color);
		font-size: var(--box-heading-font-size);
		font-weight: var(--box-heading-font-weight);
		margin-bottom: var(--box-heading-margin-bottom);
		background-color: var(--box-contentgroup-heading-bkgrd);






		}
		
	.edition-box p,
	.section-box p,
	.content-box p
	 	{
		font-size: 12px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

		font-size: var(--box-font-size);
		font-family: var(--box-font-family); 

		}

	
/*=========================================================
* INFORMATION group boxes
=========================================================*/

.policy-box,
.deadline-box,
.info-box,
.contact-box
 {
	border-color:black;
	font-size: 12px;

	font-size: var(--box-font-size:);
}

	.policy-box > .box-heading,
	.deadline-box > .box-heading,
	.info-box > .box-heading,
	.contact-box > .box-heading
	 {
	 	color: #000000;
		font-size: 1.65rem;
		font-weight: 600;
		margin-bottom:  1.3rem;
		background-color: rgb(0,255,255);

	 	color: var(--box-heading-color);
		font-size: var(--box-heading-font-size);
		font-weight: var(--box-heading-font-weight);
		margin-bottom: var(--box-heading-margin-bottom);
		background-color: var(--box-infogroup-heading-bkgrd);
		}


.policy-box p,
.deadline-box p,
.info-box p,
.contact-box p
	{
		font-size: 12px;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

		font-size: var(--box-font-size);
		font-family: var(--box-font-family); 

	}
	
	
/*  Information ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
.info-box  {  
	border-color:#428bca;
	text-decoration:none;
	background-color: transparent;
	}

	.info-box  > .article-heading-group {
		color: white;
		font-family:Arial, Helvetica, sans-serif;
		background-color: var(--shire-info);
		}
	
	
	.info-box > .article-body > h1,
	.info-box > .article-body > h2,
	.info-box > .article-body > h3,
	.info-box > .article-body > h4
	 {
		line-height:1em;
		padding:0;
		margin:0;
		color:black;
		}
	.info-box > .article-body > p {
		text-align:left;
	}
*/


/*  Deadline ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
.deadline-box {
	border-color:#028482;
	font-size: var(--box-font-size:); 
	}

	.deadline-box > .box-heading {
		color:white;
		line-height:1em;
		font-weight: var(--box-heading-font-weight);
		background-color: var(--box-headingbg-info);
		}
		
		.deadline-box p { font-size:.85em; }
*/



.editorial-comment, .editorialComment { font-style:italic; text-align:right;}

/* notices ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#notices, .notices { 
	padding: .5rem;
	margin:auto;
	background-color: #C0C0C0;
	}

#notice-adverts, #notice-disclaimer, #notice-copyright, #notice-cookies {
	font-size:0.95rem;
	font-family:Arial, Helvetica, sans-serif;
	margin:auto;
	background-color: transparent;
}

/********************************************************************************************************
* THEMES 
********************************************************************************************************/

/* Windows 95 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.btn-win95{
	color: black;
	background-color: #C0C0C0;
	border: medium outset lightgrey;
	margin-bottom: 3px;
	padding:5px;
}


.btn-win95 h3 {
	color:blue;
	padding: 0 1px;
	margin: .25em;
}

/* Emulate Windows 95 button */
/*a.btn-win95  ,  a:visited.btn-win95,  a:active.btn-win95  {
	text-decoration:none; 
	outline:0; 
/*	padding: 2px;  */
/*	font-style:normal;
	font-weight:normal;
	font-family:inherit; 
	border-bottom:#435058; */
	}

a:hover.btn-win95   { 
	background-color:#EAEAEA; 
	}


/******************************************************************************************
* Forms
******************************************************************************************/
.field { width:190px; border:1px solid #b3b309; background:#fff; padding:6px 6px 6px 24px; }
input { width:190px; border:1px solid #ccc; background:#fff; padding-left:15px; border-radius:4px; }
input#username { background-color:#fff; background:url(../_assets/icons/christmas/lights06.gif) no-repeat #fff 8px 50%; }
input#email { background-color:#fff; background:url(../_assets/icons/christmas/lights06.gif) no-repeat #fff 8px 50%; }
.placeholder { color:#999; }
.form-group {
	margin-bottom:15px;
	}
	

/* email form robot trap */
#email_rt1, #email_rt2 { display:none }


/*******************************************************************************************
* 3) 
*******************************************************************************************/


.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid #000;border-right:4px solid transparent;border-left:4px solid transparent;border-bottom:0 dotted}


/* Speech bubble */

.speech-bubble {
    background: rgb(255,149,0);
    -webkit-border-radius: 4px;
            border-radius: 4px;
   /* font-size: 1.2rem; */
    line-height: 1.3;
    margin: 0 auto 40px;
    max-width: 400px;
    padding: 10px;
    position: relative;
}

.speech-bubble p {
    margin: 0 0 10px;
}

.speech-bubble p:last-of-type {
    margin-bottom: 0;
}

.speech-bubble::after {
    border-left: 20px solid transparent; 
    border-top: 20px solid rgb(255,149,0);
    bottom: -20px;
    content: "";
    position: absolute;
	left: 20px;
}


.speech-bubble-blue {
    background: rgb(0,122,255);
    -webkit-border-radius: 4px;
            border-radius: 4px;
   /* font-size: 1.2rem; */
    line-height: 1.3;
    margin: 0 auto 40px;
    max-width: 400px;
    padding: 10px;
    position: relative;
}

.speech-bubble-blue p {
    margin: 0 0 10px;
}

.speech-bubble-blue p:last-of-type {
    margin-bottom: 0;
}

.speech-bubble-blue::after {
    border-left: 20px solid transparent; 
    border-top: 20px solid rgb(0,122,255);
    bottom: -20px;
    content: "";
    position: absolute;
	left: 20px;
}

/* BANNERS ***********************************************/
.banner {
	border-color:#d4d0c8; 
	border-width:4px;
	border-radius:0;
	outline-color:#d4d0c8;
	outline-style:outset;
	outline-width: medium;
	outline-offset:0;
	background-color:#d4d0c8;
}


.banner a, .banner a > p, .banner a > h2 {
	color:white;
	font-family: "MS Sans Serif";
}
.banner > a > h2 > small {
	font-size:1.8rem;
	color:white;
}


.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}

.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-group > .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion > .card {
  overflow: hidden;
}

.accordion > .card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}

.accordion > .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}

.accordion > .card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion > .card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion > .card .card-header {
  margin-bottom: -1px;
}


.bg-primary {
  background-color: #007bff !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #545b62 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #007bff !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #0056b3 !important;
}

.text-secondary {
  color: #6c757d !important;
}

a.text-secondary:hover, a.text-secondary:focus {
  color: #494f54 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:hover, a.text-success:focus {
  color: #19692c !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:hover, a.text-info:focus {
  color: #0f6674 !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover, a.text-warning:focus {
  color: #ba8b00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:hover, a.text-danger:focus {
  color: #a71d2a !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:hover, a.text-light:focus {
  color: #cbd3da !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:hover, a.text-dark:focus {
  color: #121416 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.border-primary {
  border-color: #007bff !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}