/* CUSTOM CSS FOR PRINT */

@page {size: A4; margin: 0 auto; display: block; margin-top:50px !important; margin-bottom:35px;}  

/* ----------------------------------------------------------------------------- */
/* NEW JUST FOR THIS SITE */


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

.print {display:block !important}
.no-print {display: none !important}
.break  {display: none}

/* Add logo to top of printed page */
body:before {content:url(../images/logo-print.png)}

/* Navs */	
.jump {display:none !important}
nav {display: none !important}

/* Text Sizes */
h1 {font-size: 2rem !important}	
h2 {font-size: 1.7rem !important}	

/* Background & Text Colors */
.bg-print {background-color: transparent !important; color:#000000 !important;}
.bg-print a {color:#000000 !important}
.text-white {color:#000000 !important}

/* Cards & Gallery */
.card {border:none !important; padding:0px 10px 0px 10px !important;}
.card-body {background-color: transparent !important; color:#000000 !important;}
.card-footer {background-color: transparent !important; color:#000000 !important;}
.card-header {background-color: transparent !important; color:#000000 !important;}
.card-img  {width:500px; height:auto; margin-top:10px !important;} /* you can adjust height if necessary */
.card-shadow {box-shadow: none!important; -webkit-box-shadow: none!important; -moz-box-shadow: none!important;}
.card-title {margin-top:20px !important; font-size: 1rem !important;} /* if there is no Header, you can take this out */
.gallery img  {width:400px !important; height:auto;}

/* Flexi Columns */
  .first {flex: 1 50%}
  .last {flex: 1 50%}
  .row > .first { order: 1}
  .row > .last { order: 2}

/* Force Background Images to print */ 
	/* This is our usual code which works in Joomla, but not here.
		* { -webkit-print-color-adjust: exact !important;  color-adjust: exact !important; } */
	/* This new version works fine in Firefox, but in Chrome the viewer needs to have the 'Print Backgrounds' option on. It's the best I can do */
.fitpic {
	height:400px; /* you can adjust height */
	font-size:0px;
	display: list-item !important;
	list-style-image: url(background-image:url(../images/*.jpg);
	list-style-position: inside;
	background-size: cover !important;
	-webkit-print-color-adjust: exact;}

/* Grayscale images */
.grayscale {
    filter: Gray();
    filter: url('../_shared/.grayscale'); 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}