/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.
----------------------------------------------------------- */

/* The following CSS code allows the YouTube videos to auto fit/size into the 2 column category layout. However, note that part way through development we decided to not to have the videos displayed on their own page and were instead included on the Education/Information page and were manually styled and sized. Therefore this CSS code is currently redundant.
----------------------------------------------------------- */

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* The following CSS code allows bullet points to display correctly in articles displayed using the Shape 5 masonry layout module - DECIDED NOT TO USE THE MODULE ON NEWS - ONLY ON WEEKLY NEWSLETTER - THIS CODE DOESN'T REALLY AFFECT THE WAY THIS DISPLAYS BUT IF WE REVERTED TO DISPLAYING NEWS THIS CODE WOULD FIX A PROBLEM THAT TOOK A WHILE TO SORT OUT WITH SHAPE5.
----------------------------------------------------------- */


#s5_masondisplay_container ul {
    list-style: outside disc !important;
    margin-left: 18px;
}


/* 21/8/18 - when upgraded S5 Image and Content Fader to 4.4.1, the instances of the fader on content pages (i.e. not the home page) where there was no text or title, padding that would have appear around the text/title still remained. The home page was OK because it had text/titles. The only way to fix this was to change template.css line 1717 to change the padding from 10px to 0px.
----------------------------------------------------------- */

.jdGallery .slideInfoZone {
background:url(../images/s5_iacf_bg.png) !important;
padding:0px !important;
left:0px !important;
right:0px !important;
margin-left:auto !important;
margin-right:auto !important;
width:85% !important;
max-width:420px !important;
-moz-box-shadow:0 0px 21px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 0px 21px rgba(0, 0, 0, 0.25);
box-shadow:0 0px 21px rgba(0, 0, 0, 0.25);
color:#5f5f5f !important;
}

/* 21/11/19. Noticed that Chris was using the readon button in news flash articles which when they appear on the home page on a dark background, the text of the button gets lost on the dark background. This style change adds a white background
---------------------------------------------------------------- */

.readon,
p.readmore a {
  color: #000000 !important;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.9em;
  background: #ffffff !important;
}

/* 09/02/22. Added a new style for the home page left side About NCWSBA Welcome Intro READ MORE button. This styles makes it an orange button with white text.---------------------------------------------------------------- */

.readorange,
p.readmore a {
  color: #ffffff !important;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.9em;
  background: #c88f42 !important;
}


/* RAXO All-mode PRO - news module - The following CSS code changes the COLOUR of the Raxo-Bricks template. Be sure to insert "bricks-turquoise" in the module class of the module. Updated for J4 18.08.23
----------------------------------------------------------- */

/* --- Turquoise Color --- used for the NCWSBA Orange/Brown */
.bricks-turquoise .raxo-block-name a:hover,
.bricks-turquoise .raxo-title a:hover,
.bricks-turquoise .raxo-text a:hover {
	color: #c88f42;
}
.bricks-turquoise .raxo-block-button,
.bricks-turquoise .raxo-category,
.bricks-turquoise .raxo-readmore {
	background-color: #c88f42;
}
.bricks-turquoise .raxo-header,
.bricks-turquoise .raxo-wrap > div:first-child {
	border-color: #c88f42;
}


/* RAXO All-mode PRO - news module - The following CSS code changes the READ MORE link styling of the Raxo-Bricks template for square corners, not round. Updated for J4 18.08.23
----------------------------------------------------------- */

.raxo-bricks .raxo-readmore {												/* Item READMORE */
	float: right;
	border-radius: 0px;
}

/* RAXO All-mode PRO - news module - The following CSS code changes the ITEM TITLE styling of the Raxo- Bricks template
----------------------------------------------------------- */

.raxo-bricks .raxo-title {												/* Item TITLE */
	font: bold 16px/20px 'Open Sans',Helvetica,Arial,Sans-Serif;
	text-transform: none;
}

/* RAXO All-mode PRO - news module - The following CSS code changes the ITEM TEXT styling of the Raxo-Bricks template - Updated for J4 18.08.23 by commenting out entire previous change for this Item DIV as it deemed unnecessary


.allmode-bricks .allmode-item {													
	margin-bottom: 32px;
	font: normal 12px/18px 'Open Sans',Helvetica,Arial,Sans-Serif;
	background-color: #fcfcfc;
	border-radius: 0px 0px 0px 0px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,0.15);
}
	.allmode-bricks .allmode-item > div:first-child {
		border-width: 3px 0 0; border-style: solid;
		border-top-left-radius: 3px; border-top-right-radius: 3px;
	}
	.allmode-bricks .allmode-item > div:last-child {
		border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
	}

----------------------------------------------------------- */

/* RAXO All-mode PRO - news module - The following CSS code changes the BLOCK NAME TEXT styling of the Raxo-Bricks template
----------------------------------------------------------- */

.raxo-bricks .raxo-block-name {
	flex: 1 1 128px;
	margin: 0 2px;
	font: 18px/24px 'Open Sans',Helvetica,Arial,Sans-Serif;
	color: #1a1a1a;
}
	.raxo-bricks .raxo-block-name a {
		color: #1a1a1a;
	}

/* RAXO All-mode PRO - news module - The following CSS code changes the SHOW ALL READ MORE styling of the Raxo-Bricks template
----------------------------------------------------------- */

.raxo-bricks .raxo-block-button {
	margin: 2px; padding: 0 12px;
	font-size: 13px; line-height: 20px;
	color: #ffffff;
	border-radius: 0px;
}


/* RAXO ----- Module BLOCK --- gets rid of the line at the top of the module----- */
.raxo-bricks .raxo-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	margin-bottom: 14px; padding: 4px 10px;
	border-width: 0px 0 0; border-style: solid;
}


/* table styling for table in role of the wool broker ------ */

table.wool_table td {
  padding: 5px !important;
  border-collapse: separate !important;
  border: 1px #1a1a1a;
  border-style: solid;
}


/* JoomlArt support */
.com-content-category.category-list .table-bordered caption.visually-hidden {
    display: none;
}
.com-content-article.item-page .article-info {
    top: 50px;
    position: relative;
}

.com-content-article.item-page .page-header {
    text-align: center;
}

#s5_breadcrumb_wrap .breadcrumb li.breadcrumb-item +li.breadcrumb-item >span:before, #s5_breadcrumb_wrap .breadcrumb li.breadcrumb-item +li.breadcrumb-item >a:before {
  content: '|';
  display: inline-block;
  margin: 0 4px;
  color: #999;
}