
/*** DEFINE CUSTOM FONTS ***/

/** body - sans serif **/
/* standard 
@font-face {
  font-family: 'gillsans';
  src:
	url('../fonts/GIL.otf')
	format('opentype');
}
/* bold 
@font-face {
  font-family: 'gillsans';
  src:
	url('../fonts/GILB.otf')
	format('opentype');
  font-weight: bold;
}
/* italic 
@font-face {
  font-family: 'gillsans';
  src:
	url('../fonts/GILI.otf')
	format('opentype');
  font-style: italic;
}
*/
/** heading - serif **/
/* standard */
@font-face {
  font-family: 'perpetua';
  src:
	url('../local/fonts/PER.otf')
	format:('opentype');
}
/* bold */
@font-face {
  font-family: 'perpetua';
  src:
	url('../local/fonts/PERB.otf')
	format:('opentype');
  font-weight: bold;
}
/* italic */
@font-face {
  font-family: 'perpetua';
  src:
	url('../local/fonts/PERI.otf')
	format:('opentype');
  font-style: italic;
}



/* BOOTSTRAP v3 OVERRIDES */
/** NAVIGATION MENU **/
.t3-mainnav,
.t3-mainnav ul.nav {
	width: 100%;
	font-family: 'perpetua', serif;
	font-size: 1.2em;
}
.t3-mainnav .nav > li {
	width: 16.66%;
}

 /* get rid of grey background active state */
.t3-mainnav ul.nav li.open a,
.t3-mainnav ul.nav li.active a,
.t3-mainnav ul.nav li.open a:hover,
.t3-mainnav ul.nav li.current a {
	background: #fff;
	color: #555555;
}
.t3-mainnav ul.nav > li.active > a {
	text-decoration: underline;
	color: #DD5914;
}
/* horrible menu item hack to reduce size of a single li element */
.t3-mainnav ul.nav  li.item-149 a {
	font-size: .9em;
}
.t3-mainnav ul.nav > li a,
.t3-mainnav ul.nav > li a:hover {
	border: 2px solid transparent;
}

.t3-mainnav ul.nav li.parent > a:hover,
.t3-mainnav ul.nav li.parent:hover > a /* this keeps the hover state open on adjascent a element with the sub menu ul is active */ {
	border: 2px solid #A4A4A2;/* now we add the hover state border */
	border-bottom: none; /* but not on the bottom */
	border-radius: 10px 10px 0 0;
}
.t3-mainnav ul.nav li a:hover {
	text-decoration: underline;
	color: #DD5914 !important;
	transition: color 0.3s linear;
}
/* fix menu jump */
.clearfix::after, .container::after, .container-fluid::after, .row::after, .form-horizontal .form-group::after, .btn-toolbar::after, .btn-group-vertical > .btn-group::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .pager::after, .panel-body::after, .modal-footer::after {
/*	clear: none;	*/
}
/* remove down arrow on parent menu items */
em.caret {
	display: none;
}

/** sub menus **/
.t3-mainnav ul.dropdown-menu {
	border-radius: 0 0 10px 10px;
	webkit-border-radius: 0 0 10px 10px;
	moz-border-radius: 0 0 10px 10px;
	border: 2px solid #A4A4A2;
	border-top: 0;
	min-width: 100%;
	max-width: 100%;
	box-shadow: none;
	font-size: 0.75em;
/*	overflow: hidden; */
}
/* fix for making long menu items wrap */
.t3-mainnav ul.dropdown-menu li  a {
	white-space:normal;
}

/* OFF CANVAS MENU */
.off-canvas-toggle {
	position: absolute;
	bottom: 0;
	right: 1%;	
	background: transparent;
	opacity: 0.6;
}
button.off-canvas-toggle:hover {
	background: none;
	opacity: 1;
	transition: opacity 0.3s linear;
}
.off-canvas-toggle i.fa-bars {
	color: #DD5008;
	font-size: 2.5em;
	line-height: inherit;
	opacity: 0.7;
}
/* hide the off canvas header */
#t3-off-canvas {
	height: auto !important;
	overflow-y: scroll;  
	top: 10px !important;
	width: 200px !important;
	border-radius: 10px 0 0 10px;
	opacity: 0.9;
	font-size: 1.1em;
}

/* just of the menu transition */
body {
	transition: height 1s;
}
#t3-off-canvas .t3-off-canvas-body {
	padding: 0;
}
.t3-off-canvas,
.t3-off-canvas .t3-off-canvas-header {
	background: #B94E16;
	color: #fff;
	font-family: "perpetua", serif;
	font-size: 1.3em;
}
.t3-off-canvas-header h2 {
	display: none;
}

#t3-off-canvas ul.nav-pills li a,
#t3-off-canvas ul.nav-pills li span.separator {
	padding-left: 30px;
}
.nav-pills li {
	margin: 0;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
	background: none;
}
.nav-pills > li > a {
	border-radius: 0;
}
/* hide inactive submenus */
#t3-off-canvas ul.dropdown-menu {
	display: block;
	max-height: 0;
	opacity: 0;
	background-color: transparent;
	margin: 0;
	font-size: 0.9em;
	transition: max-height 0.5s, opacity 1s;
}
/* but display them upon hover/click or if they are the active page */
#t3-off-canvas li.active ul.dropdown-menu,
#t3-off-canvas li:hover ul.dropdown-menu {
	max-height: 600px;
	opacity: 1;	
}
#t3-off-canvas li.active a:before {
	content: "\f0d9";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #fff;
	font-size: 1.5em;
	position: absolute;
	right: -1px;
	top: 0;
	margin: auto;
}
#t3-off-canvas ul.dropdown-menu li a:before {
	content: none;
}
#t3-off-canvas li a:hover,
#t3-off-canvas li a.active {
	background: #CE845D;	
/*	border-bottom: 2px solid #fff;	*/
}
#t3-off-canvas li.current {
	background: #C8764D;	
/*	border-bottom: 2px solid #fff;	*/
}
#t3-off-canvas li a  {
	color: #fff;
}
#t3-off-canvas ul.dropdown-menu li a {
	padding-left: 50px;
}

/* general */
.t3-mainbody {
	padding-top: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'perpetua', serif;
	text-transform: uppercase;
	color: #DD5008;
}
h1, .h1, h2, .h2, h3, .h3 {
	margin: 30px 0 0 0;
}
h3 {
	font-size: 1.5em;
}
p {
	margin: 0 0 20px;
	font-size: 1.15em;
}
img.home {
	width: 300px;
	height: auto;
	padding: 0 0 20px 0;
}
.article-content {
	padding: 0 10% 5% 10%;
}
.article-content p {
	font-family: 'Noto Sans', sans-serif;
	color: #3F3F3F;
}
p.quote {
	padding: 2% 0;
	opacity: 0.8;
	font-style: italic;
	color: #3F3F3F;
}
.logo {
	text-align: center;
}
#t3-content {
	background-color: #F2F2F2;
	border-radius: 15px;
	padding-top: 4%;
}
#t3-footer,
#t3-mainnav {
	background-color: #fff;
	border: none;
}
.t3-copyright {
	border: none;
}
h1, .h1 {
	text-align: center;
	font-size: 1.6em;
	letter-spacing: 1px;
	word-spacing: 3px;
	color: #3F3F3F;
}
hr {
	border-color: #E5E5E5;
	clear: both;
}
/* poems page */
/* for left margin, see media query breakpoints (MD and above) */
.poems div.poem {
	margin: 0;
}
.poem p {
    font-style: italic;
}

/* prayers page */
.prayers p {
	line-height: 1.6;
}
.prayers .article-content > p:first-child {
	margin: 0 0 70px 0;
}
.prayerbox {
	margin: 0;
}
/* press page */
.press h3,
.stockists h3 {
	border-bottom: 2px solid #DD5008;
	margin-left: 2%;
	padding-bottom: 5px;
	display: inline-block;
}
.press ul.weblinks,
.writing .cworld ul.weblinks,
.stockists ul {
	list-style: none;
	margin-left: 25px;
	padding-left: 5px;
	/* text-indent: -1.5em; */
}
.press ul.weblinks li,
.stockists ul li,
.writing .cworld ul.weblinks li {
	padding: 3px 0;
}
.press .weblinks a,
.stockists a,
.writing .weblinks a {
	color: #3F3F3F;
	text-decoration: none;
	line-height: 1.2;
	margin: 5px 0;
}
.press .weblinks a:hover,
.stockists a:hover,
.writing .weblinks a:hover {
	color: #2A77A0;
}
.press .weblinks a::before,
.stockists a::before,
.writing .weblinks a::before {
	content: ">";
	padding: 0 1em 0 0;
	color: #3F3F3F;
	font-family: 'gillsans', Arial, sans-serif;
}
/* writings */
a.btn-default {
	background: transparent;
	margin: 0 2%;
	border-radius: 15px;
	border: 1px solid #433F49;
}
a.btn-default:hover {
	background: #fff;
	color: #435789;
	transition: background 0.3s linear;
}
.writing section.article-content {
	padding: 0 5% 5% 5%;
}
.writing section h2 {
	border-bottom: 1px solid #dd5008;
}
.writing .cworld {
	float: right;
}
.writing .cworld p.description {
	font-style: italic;
	font-size: 0.9em;
}

img.feature {
	width: 70%;
	height: auto;
	margin: 4% 0 4% 4%;
}
/* cards page */
.cards h2 {
	margin-top: 70px;
	border-bottom: 1px solid #dd5008
}
.cards h3 {
	/*border-bottom: 1px solid #dd5008;  for the stockists section, this has been styled using the code from the weblinks 'press' page. */
}
.cards .stockists h3 {
	font-size: 1.3em;
    padding: 5px 12px;
	border: 1px solid #dd5008;
    border-radius: 4px;
    margin: 10px 0;
    font-weight: 100;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}
.cards .article-content p:first-child {
	margin-bottom: 50px;
}
.stockists .nsw,
.stockists .tas,
.stockists .wa {
	clear: left;
}
.stockists > div {
    padding: 0;
}
.stockists div:last-child {
	margin-bottom: 10%; /* add some space after the last stockist section */
}
/* contact form page */
.contact .article-content {
	font-family: "Noto Sans",sans-serif;
}
.rsform .form-group {
    margin-bottom: 5px;
}
.rsform-block-disclaimer {
	margin-left: 20px !important;
	margin-right: 20px !important;
	margin-bottom: 40px;
	padding: 25px;
/*	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333; 
	background-color: #F9F9F9;
	border-radius: 10px; */
	font-size: 1.2em;
	opacity: 0.8;
}

/* events page */

.whs {
	font-weight: bold;
}
.spiel {
	font-style: italic;
}

/* recent cartoon page */
.rec-cartoons #t3-content {
	background: none;
}
.rec-cartoons div.leading article {
	text-align: center;
}
.rec-cartoons div.leading article section img {
	margin: 0 auto;
}
.rec-cartoons section.article-intro p {
	margin-bottom: 0;
}
.rec-cartoons .fa-calendar {
	display: none;/* hide calendar icon next to date */
}
.rec-cartoons .article-footer dd {
	float: right;/* float right underneath image */
	margin-right: -5%;
	font-size: 1.4em;
	font-family: 'perpetua', serif;
}
.rec-cartoons  .items-leading .article-footer dd {
	margin-right: -15%;
}
.rec-cartoons hr.divider-vertical {
	display: none;
}
.rec-cartoons .article-content,
.rec-cartoons .article-content p {
	padding: 0;
	margin: 0;
}
.rec-cartoons ul.pagination,
.rec-cartoons ul.pagenav {
	float: none;
	width: 100%;
	margin: 0 auto;
}
.rec-cartoons ul.pagenav {
	width: 30%;
}
.rec-cartoons .pagination a {
	border: none;
}
.rec-cartoons .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	background-color: #fff;
	color: #333333;
	border: 2px solid #E57014;
	border-radius: 3px;
	padding: 6px 10px;
	
}
.rec-cartoons .pagination li  a{
	border: 2px solid transparent;
}
/* sidebar for recent cartoons */
.recart {
	font-size: 1.15em;
	padding-right: 0;
	/* margin set for SM and up */
}
.recart h3 {
	font-size: 1.5em;
	letter-spacing: 2px;
	border-bottom: 1px solid #DDDDDD;
}
.recart ul li {
	padding: 8px 0 8px 10px;
}
.recart .module-ct > div {
	display: none; /* hide the 'powered by mod-lca' slogan */
}

/* footer */
.t3-copyright {
	padding-top: 20px;
}
div.icons {
	margin-bottom: 20px;
}
div.icons a {
	display: inline-block;
	opacity: 0.5;
}
div.icons a:hover {
	opacity: 1;
	transition: opacity 0.4s linear;
}
img.icons {
	width: 30px;
	height: auto;
	margin: 0 15px 0 0;
}
section.t3-copyright small {
	display: none;
}
footer div.custom {
	text-align: center;
}
footer div.custom p {
	padding-top: 10px;
}
p.copyright {
	font-size: 1.2em;
}
p.credits {
	font-size: 1em;
	opacity: 0.7;
}
p.credits .small {
	font-size: 1em;
	opacity: 0.8;
}

/* misc */
#scrollToTop {
	z-index: 998 !important; /* we want to to sit underneath modal windows like the sige gallery when an image is opened */
}


/** SIGE GALLERY ADJUSTMENTS **/
.gallery .article-content {
	padding: 0 5% 5%;
	text-align: center;
}
div.sige_mod {
	text-align: center; /* used to center child elements within this containing element */
}
ul.sige {
	margin: 3% 3%;
	float: none;
}
li.sige_cont_0,
li.sige_cont_1,
li.sige_cont_2 {
	float: none;
	height: auto;
	width: auto;
}
span.sige_thumb {
	margin: 5%;
}
.sige_mod ul {
	margin: 0;
}


/** MOBILE BREAKPOINT CHANGES **/
/* NOTE: Bootstrap (3) is "mobile first" meaning changes made to XS flow up to all other breakpoints unless overuled. Thus any change made at XS will flow up until, say, overuled at MD which would then flow up to LG without having to reiterate the rule. */

/* XS BREAKPOINT | Extra Small Devices */
	@media (max-width: 480px) {
		div.insetimg {
			width: 100%;
			height: auto;
			text-align: center;
		}
		div.insetimg img {
			display: inline-block;
			height: auto;
		}
		.contact .form-group input {
			width: 100%;
		}
		img.feature {
			margin: 20px auto 0 auto;
		}
        #t3-content {
            border-radius: 0;
        }
        /* off-canvas mobile menu */
        #t3-off-canvas {
            border-radius: 0;
        }
        .article-content {
            padding: 0;
        }
        /* space card stockists in mobile view */
        .stockists ul li {
            padding: 6px 0;
        }
        .cards .stockists h3 {
            text-align: center;
            display: block;
        }
	}
/* SM BREAKPOINT | Small devices (tablets, 768px and up) */
	@media (min-width: 768px) {
		h1, .h1, h2, .h2, h3, .h3 {
			margin: 30px 0 15px 0;
		}
		footer div.custom {
			text-align: left;
		}
		p.quote {
			padding: 2% 10% 0;
		}
		h1, .h1 {
			font-size: 2.5em;
			letter-spacing: 1.5px;
			word-spacing: 5px;
		}
		.t3-mainnav {
			margin: 30px 0 0 0;
		}
		/* FAQ page */
		div.faq {
			padding: 0 0 0 5%;
		}
		.poems div.poem,
		.prayerbox {
			margin: 0 0 0 10%;
		}
		
		button.off-canvas-toggle  {
			display: none;
		}
		.recart {
			margin: 40% 0 0 0;
		}
	}
/* MD BREAKPOINT | Medium devices (desktops, 992px and up) */
	@media (min-width: 992px) {
		img.contact-pic {
			float: right;
			width: 40%;
			height: auto;
			clear: left;
		}
		
		.contact section {
			margin: 0 5% 5% 5%;
		}
		.contact section.article-content {
			padding: 0;
		}
		img.feature		{
			float: right;
			width: 40%;
			height: auto;
			margin: 4% 0 4% 4%;
		}
		footer p.copyright {
			text-align: center;
		}
		footer p.credits {
			text-align: right;
		}
		.t3-mainnav ul.dropdown-menu {
			font-size: 0.85em;
		}
		.poems div.poem,
		.prayerbox {
			margin: 0 0 0 25%;
		}
		.rec-cartoons ul.pagination,
		.rec-cartoons ul.pagenav {
			width: 85%;
		}
	}

/* LG BREAKPOINT | Large devices (large desktops, 1200px and up) */
	@media (min-width: 1200px) {
		.poems div.poem,
		.prayerbox {
			margin: 0 0 0 35%;
		}
		.rec-cartoons  .items-leading .article-footer dd {
			margin-right: -10%;
		}
		.rec-cartoons ul.pagination,
		.rec-cartoons ul.pagenav {
			width: 70%;
		}
	}
