/**
 * Theme Name:  Stargazer Child
 * Theme URI:   https://www.vei.ie/
 * Description: Stargazer Child Theme
 * Version:     1.2.1
 * Author:      G Brangan
 * Author URI:  https://www.vei.ie/
 * Template:    stargazer
 * Tags:        one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, left-sidebar, post-formats, responsive-layout, right-sidebar, rtl-language-support, theme-options, threaded-comments, translation-ready
 * Text Domain: stargazer
 * License:     GNU General Public License v2.0 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

 
 
/********************************************************************************************************
 * TABLE OF CONTENTS:
 * 	1 - Danger Zone (things to not modify in your child theme) 
 *	However, this stargazer-child theme does overwrite certain layout items, changing the
 *	max-widths for one-column wide and narrow
 *	2 - Fun Zone (things you can modify in your child theme)
 *	3 - VEI classes (for this child-theme.)
 * 	4 - Fixes ()to make plugins and specific classes work with theme)
 *
 ********************************************************************************************************/

 
/********************************************************************************************************
 * 1 - Danger Zone
 *
 ********************************************************************************************************/ 
 
/* 
 *
 * 	Hide the stargazer site branding, this includes site title and sub heading
 *
 */
	.wordpress.child-theme #branding {
		display:none;
	}
/* Also override the stargazer styling for h1 and h2 elements */
	h1, h2 {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		border-bottom: 0;
		margin-bottom: 0;
	}


/* 
 *
 * 	In order to allow sections, .wrap is pushed to 100% and a new wrapper, .card is inside every article.
 *	The background and width for a section is then set via the article class
 *
 */
	.wordpress.child-theme > #container > .wrap  {
		margin-top:0px;
		margin-bottom:1rem;
		width: 100%;
		max-width: none;
		background-color: transparent;
	}
	.wordpress.child-theme > #container > .wrap  > div#main {
		padding:0;
	}

/* 
 *
 * 	In stargazer-child we use .entry for 100%-width page sections,
 *	This allows us to style is via custom post settings
 * 	However, margins and width for content must be deferred to the child elements
 * 	Stargazer's one-column narrow layout is reset to 1025px, the stargazer wide setting
 *	Stargazer's one-column wide is reset to 100%, which we are also making the default
 *
 */
	.entry,
	.layout-1c .entry {
		width:100% !important;
	}
		.sidebar-subsidiary,
		.entry > *,
		.layout-1c .entry > *,
		.layout-1c section#comments-template ,
		section#comments-template {
			display: block;
			margin: 0;
			max-width: 100%;
			padding-left:  20px;
			padding-right: 20px;
		}
	
		@media only screen and ( min-width: 950px ) {	
			
			.sidebar-subsidiary,
			.entry > *,
			.layout-1c .entry > *,
			.layout-1c section#comments-template ,
			section#comments-template {
				padding-left:  50px;
				padding-right: 50px;
			}
				
		}
		

/* narrow layout */

/* We need to override the following parent theme settings */
	.layout-1c-narrow #container > .wrap {
		width: 100%;
	}
	

	.layout-1c-narrow #menu-secondary > .wrap, 
	.layout-1c-narrow #footer        > .wrap,
	.layout-1c-narrow #menu-primary > .wrap {
		max-width: 1075px;
	}

	.custom-background.layout-1c-narrow #container > .wrap { max-width: 100%; }

	.layout-1c-narrow .entry {
		width:100%;
		
	}
	
	.layout-1c-narrow .sidebar-subsidiary,
	.layout-1c-narrow .entry > *,
	.layout-1c-narrow section#comments-template,
	.layout-1c-narrow section.related-content .entry > *
	{
		display: block;
		margin: 0 auto;
		max-width: 1025px;	
		box-sizing: border-box;
	}
		
	.breadcrumb-trail {
		max-width: 1025px;
		display: block;
		margin: 0 auto;
		text-align: right;		
		padding: 10px 25px;

		
	}
		
	
	
/* 
 *
 * 	For a singular page or post the heading is inside the article,
 *	For a multipage post, we need to format the .loop-meta div
 *
 */
	main.content > .loop-meta {
		margin: 0 auto;
		width: 1025px;
	}

	
	
/**
 * Images
 * --------------------------------------------------------------------------- */

img {
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
}

/* If there is an article, give it a margin at the top,
 *	This is overridden by .showcase class 
 */

article.entry:first-of-type {
	margin-top:3rem;
}




/* === Headers === */

h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 400;
	}
	
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a	{
	text-decoration: none;	
}

	h1 { font-size: 3rem;    }
	h2 { font-size: 2.5rem;      }
	h3 { font-size: 1.5625rem; }
	h4 { font-size: 1.375rem;  }
	h5 { font-size: 1.3125rem; }
	h6 { font-size: 1.25rem;   }
	
	
/* === fonts === */
.main,
.mceContentBody {
	font-weight: 300;
}	
	

/********************************************************************************************************
 * 2 - Fun Zone
 *
 * This section of the stylesheet is what I call the fun area.  For the most part, you should feel free 
 * to overwrite the following in your child theme's `style.css` file if your design calls for it.  
 * Specifically, this deals with fonts and colors.  Those things are really the things that give your 
 * child theme its uniqueness.  Have fun with it.  Go wild!
 ********************************************************************************************************/

/**
 * 2.1 - Font Family Definitions
 *
 * This theme operates with three dinstinct font rules.  The "primary" font is used for the majority of 
 * text throughout the theme.  The "secondary" font is used for handling secondary use cases.  The 
 * "headlines" font is specific to h1-h6 headers (with the exception of #site-description).
 *
 * If building a child theme for public release with custom fonts, the child theme should define only the 
 * font rules it needs.  Copy the specific section below that you want to overwrite into the child theme. 
 * Make sure to include the `.font-*` class as this will maintain forward compatibility with future 
 * changes in the parent theme.
 */

/* ====== Primary Font ====== */

.font-primary,
body,
input,
textarea,
.label-checkbox,
.label-radio,
.required,
#site-description,
#reply-title small { 
	font-family: Roboto, Calibri, sans-serif; 
	-webkit-font-smoothing: antialiased;
}

/* ====== Secondary Font ====== */

.font-secondary,
dt,
th,
legend,
label,
input[type="submit"],
input[type="reset"], 
input[type="button"],
button,
select,
option,
.wp-caption-text,
.gallery-caption,
.mejs-controls,
.wp-playlist-item-meta,
.entry-byline,
.entry-footer,
.chat-author cite,
.chat-author,
.comment-meta,
.menu,
.breadcrumb-trail,
.media-info .prep,
.comment-reply-link,
.comment-reply-login,
.clean-my-archives .day,
.whistle-title {
	font-family: Calibri, sans-serif;
}

/* ====== Headlines Font ====== */

.font-headlines,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Raleway, 'Calibri light', sans-serif !important;
}

/**
 * 2.2 - Color Definitions
 *
 * The following are all of the colors defined by the theme.  The only other colors are part of the theme 
 * customizer options and should not be overwritten.  If needed, copy the specific sections below into 
 * your child theme and make the necessary changes there.
 */

/*
 * Fun Zone: The colors below are safe to overwrite depending on what you need to do.  Have at it!
 */

/* ====== color: #63666A ====== */

body,
.media-shortcode-extend .media-info,
.wp-playlist-dark .wp-playlist-item {
	color: #000;
}

/* ====== border-color: #e3e3e3 ====== */

h1,
h2,
hr,
code,
pre,
.form-allowed-tags code,
fieldset,
legend,
input,
select,
textarea,
.gallery .gallery-icon a img,
.avatar,
.display-header-text #header,
.entry,
.format-chat .chat-author,
.media-info li,
.wp-playlist-tracks,
.wp-playlist-item,
.loop-description,
.loop-pagination,
.loop-nav,
#sidebar-subsidiary,
li.ping,
.comment-content,
.clean-my-archives .day-duplicate .day,
.whistles-tabs-nav li a,
.whistles-tabs .whistles-tabs-nav li a:hover,
.whistles-tabs .whistles-tabs-nav li a:focus,
.whistles-tabs .whistles-tabs-wrap,
.whistles-toggle .whistle-title,
.whistles-accordion .whistle-title,
.whistles-toggle .whistle-content,
.whistles-accordion .whistle-content {
	border-color: #e3e3e3;
}

/* ====== color: #555 ====== */

h6,
.whistles-tabs .whistles-tabs-nav li[aria-selected="true"] a,
.whistles-tabs .whistles-tabs-nav li a:hover,
.whistles-tabs .whistles-tabs-nav li a:focus,
.whistles-toggle .whistle-title:hover,
.whistles-toggle .whistle-title:focus,
.whistles-toggle .whistle-title[aria-selected="true"],
.whistles-accordion .whistle-title:hover,
.whistles-accordion .whistle-title[aria-selected="true"],
label:hover,
label:focus,
label.focus,
.loop-pagination .current {
	color: #555;
}

/* ====== color: #858585 ====== */

caption,
td,
label,
input,
textarea,
select,
.gallery .gallery-caption,
.page-links,
.loop-pagination,
.loop-nav,
.widget_recent_entries .post-date,
.widget-entry-views .entry-view-count,
.gallery-count,
.comment-respond .must-log-in,
.comment-respond .logged-in-as,
.comments-closed,
.comment-notes,
.form-allowed-tags,
.whistles-tabs-nav li a,
.whistles-toggle .whistle-title,
.whistles-accordion .whistle-title,
.wp-playlist-dark .wp-playlist-item-meta {
	color: #858585;
}

/* ====== background: #63666A ====== */

#menu-primary,
#menu-primary .search-form > div,
#footer,
.audio-shortcode-wrap,
.media-shortcode-extend .media-info,
.media-info-toggle,
.entry-content .media-info-toggle,
.media-info-toggle:hover,
.media-info-toggle:focus,
.wp-audio-shortcode.mejs-container,
.mejs-controls,
.mejs-volume-button .mejs-volume-slider,
.mejs-overlay-play .mejs-overlay-button::after,
.mejs-time-rail .mejs-time-float,
.wp-playlist-dark {
	background: #63666A;
}

/* ====== background: transparent ====== */

hr,
.mejs-container, 
.mejs-embed, 
.mejs-embed body,
.mejs-overlay-button,
.mejs-controls > .mejs-button button:hover,
.mejs-controls > .mejs-button button:focus,
#menu-primary .menu-toggle button,
#menu-primary .menu-toggle button:hover,
#menu-primary .menu-toggle button:focus,
#menu-primary .search-toggle,
#menu-primary .search-toggle:hover,
#menu-primary .search-toggle:focus  {
	background: transparent;
}

/* ====== background: #fff ====== */

html,
#container > .wrap,
#reply-title small a,
.whistles-tabs .whistles-tabs-nav li[aria-selected="true"] a {
	background: #FAFAFA;
}

/* ====== Other colors ====== */

h1 { color: #000; }
h2 { color: #63666A; }
h3 { color: #63666A; }
h4 { color: #63666A; }
h5 { color: #63666A; }
h6 { color: #63666A; }

code {
	color:        #FFF;
	background:   #63666A;
}

tr,
thead,
tfoot,
td { border-color: #f3f3f3; }

td { background: #fcfcfc; }

input[type="number"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea,
select {
	background: #f3f3f3;
	border-color: #e3e3e3;
}

input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
	color:        #555;
	background:   #efefef;
	border-color: #d3d3d3;
}

.wp-caption .wp-caption-text {
	color:      #e3e3e3;
	background: rgba( 0, 0, 0, 0.75 );
}

.gallery .gallery-icon a img { background: #f9f9f9; }

.gallery-icon a:hover img,
.galley-icon a:focus img { background: #f3f3f3; }

#menu-primary .menu-toggle button { color: rgba( 255, 255, 255, 0.75 ); }

#menu-primary li a,
#menu-secondary li li a,
#menu-primary .menu-toggle button:hover,
#menu-primary .menu-toggle button:focus { color: rgba( 255, 255, 255, 0.75 ); }

@media only screen and (max-width: 799px) {

	#menu-secondary .wrap,
	#menu-primary .search-form > div { background: #1f1f1f; }

	#menu-primary li a,
	#menu-secondary li a,
	#menu-secondary .menu-toggle button {
		color:        rgba( 255, 255, 255, 0.75 );
		background:   #1f1f1f;
		border-color: #1c1c1c;
	}

	#menu-primary li a:hover,
	#menu-secondary li a:hover,
	#menu-primary li a:focus,
	#menu-secondary li a:focus {
		color: #fff;
		background: #191919;
	}
}

#site-title a:hover,
#site-title a:focus { border-bottom-color: #d3d3d3; }


.entry-title a { color: #63666A; }

.entry-byline,
.entry-footer,
.comment-meta,
.wp-playlist-item-meta { color: rgba( 85, 85, 85, 0.75 ); }

.image-sizes .sep { color: #e3e3e3; }

.format-chat .chat-speaker-1 .chat-author,
.format-chat .chat-speaker-11 .chat-author { color: #3498db; }
.format-chat .chat-speaker-2 .chat-author,
.format-chat .chat-speaker-12 .chat-author  { color: #f1c40f; }
.format-chat .chat-speaker-3 .chat-author,
.format-chat .chat-speaker-13 .chat-author  { color: #e74c3c; }
.format-chat .chat-speaker-4 .chat-author,
.format-chat .chat-speaker-14 .chat-author  { color: #2ecc71; }
.format-chat .chat-speaker-5 .chat-author,
.format-chat .chat-speaker-15 .chat-author  { color: #f39c12; }
.format-chat .chat-speaker-6 .chat-author,
.format-chat .chat-speaker-16 .chat-author  { color: #9b59b6; }
.format-chat .chat-speaker-7 .chat-author,
.format-chat .chat-speaker-17 .chat-author  { color: #95a5a6; }
.format-chat .chat-speaker-8 .chat-author,
.format-chat .chat-speaker-18 .chat-author  { color: #16a085; }
.format-chat .chat-speaker-9 .chat-author,
.format-chat .chat-speaker-19 .chat-author  { color: #e67e22; }
.format-chat .chat-speaker-10 .chat-author,
.format-chat .chat-speaker-20 .chat-author  { color: #1abc9c; }

.loop-description {
	color:      #757575;
	background: #f9f9f9;
}

li.ping,
.comment-content { background: #f9f9f9; }

#footer a { color: rgba( 255, 255, 255, 0.75 ); }

.clean-my-archives .comments-number { color: #aaa; }

.whistles-tabs-nav li a,
.whistles-toggle .whistle-title,
.whistles-accordion .whistle-title { background: #f3f3f3; }

.whistles-tabs .whistles-tabs-nav li a:hover,
.whistles-tabs .whistles-tabs-nav li a:focus { background: #efefef; }

.whistles-tabs .whistles-tabs-nav li[aria-selected="true"] a {
	border-bottom-color: #fff;
}

.media-shortcode-extend .audio-info     { border-color: #202020; }
.media-shortcode-extend .media-info li,
.wp-playlist-dark .wp-playlist-item     { border-color: #353535; }
.wp-video-shortcode .mejs-controls,
.wp-playlist-dark .mejs-controls        { border-color: #151515; }
.mejs-time-rail .mejs-time-float        { border-color: #454545; }
.mejs-time-rail .mejs-time-float-corner { border-top-color: #fff; }

.whistles-toggle .whistle-title:hover,
.whistles-toggle .whistle-title:focus,
.whistles-toggle .whistle-title[aria-selected="true"],
.whistles-accordion .whistle-title:hover, 
.whistles-accordion .whistle-title:focus, 
.whistles-accordion .whistle-title[aria-selected="true"] {
	background: #efefef;
}

.mejs-time-rail .mejs-time-total,
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-volume-button .mejs-volume-slider .mejs-volume-total {
	background: #454545;
}

.mejs-time-rail .mejs-time-current { background: rgba( 255, 255, 255, 0.35 ); }

.mejs-overlay-play .mejs-overlay-button::after { text-shadow: 1px 1px 2px #151515; }

.mejs-button button:focus { outline-color: #555; }

	/* Menu colors */

	@media only screen and (min-width: 800px) {

		.menu li > ul::before {
			border-right-color:  transparent;
			border-bottom-color: #63666A;
			border-left-color:   transparent;
		}

		.menu li li > ul::before {
			border-top-color:    transparent;
			border-bottom-color: transparent;
		}

		.ltr .menu li li > ul::before { border-right-color: #63666A; }
		.rtl .menu li li > ul::before { border-left-color:  #63666A; }

		#menu-primary   li li a,
		#menu-secondary li li a {
			background:   #1f1f1f;
			border-color: #1d1d1d;
		}

		#menu-primary   ul ul li a:hover,
		#menu-secondary ul ul li a:hover,
		#menu-primary   ul ul li a:focus,
		#menu-secondary ul ul li a:focus { background: #191919; }

		#menu-primary .search-form .search-toggle::before {
			color: rgba( 255, 255, 255, 0.75 );
		}

		#menu-primary .search-toggle:hover::before,
		#menu-primary .search-toggle:focus::before { color: #fff; }

	}

/* =/=/=/=/=/= End fun zone. =/=/=/=/=/= */

/*
 * Colors Danger Zone: The white color is used in contrast to the 'primary' theme color. It's not recommended to 
 * overwrite this specific color section. If overwriting, it should be a very light color.
 */

::selection {
	color: #fff; /* Don't combine with other elements. Breaks Firefox. */
}

blockquote,
blockquote a:hover,
blockquote a:focus,
.entry-content blockquote a:hover,
.entry-content blockquote a:focus,
.wp-calendar td.has-posts a,
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
#menu-primary .menu-toggle button:hover,
#menu-primary .menu-toggle button:focus,
#menu-primary   li.current-menu-item > a,
#menu-primary   li a:hover,
#menu-primary   li a:focus,
#menu-secondary li li a:hover,
#menu-secondary li li a:focus,
#menu-sub-terms li a,
.page-links a,
.page-links a:hover,
.page-links a:focus,
.widget-title > .wrap,
.widget-title > .wrap a,
#comments-number > .wrap,
#reply-title > .wrap,
.attachment-meta-title > .wrap,
.comment-reply-link,
.comment-reply-login,
.comment-reply-link:hover,
.comment-reply-link:focus,
.comment-reply-login:hover,
.comment-reply-login:focus,
.media-shortcode-extend a,
.media-shortcode-extend a:hover,
.media-shortcode-extend a:focus,
.media-info-toggle,
.entry-content .media-info-toggle,
.mejs-time .mejs-currenttime,
.mejs-time .mejs-duration,
.mejs-volume-button .mejs-volume-slider .mejs-volume-current,
.mejs-volume-button .mejs-volume-slider .mejs-volume-handle,
.media-info-toggle:hover,
.media-info-toggle:focus,
.mejs-overlay-play .mejs-overlay-button::after,
.mejs-time-rail .mejs-time-float,
.wp-playlist-dark .wp-playlist-playing,
.wp-playlist-dark .wp-playlist-caption:hover, 
.wp-playlist-dark .wp-playlist-caption:focus, 
.wp-playlist-dark .wp-playlist-item:hover
.wp-playlist-dark .wp-playlist-item:focus,
.skip-link .screen-reader-text:focus {
	color: #fff;
}

pre,
.form-allowed-tags code {
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, 0.5)), color-stop(.5, transparent), to(transparent));
	background-image: -webkit-linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
	background-image:    -moz-linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
	background-image:      -o-linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
	background-image:         linear-gradient( rgba( 255, 255, 255, 0.5 ) 50%, transparent 50%, transparent );
}

blockquote { border-color: rgba( 255, 255, 255, 0.15 ); }

blockquote a,
.entry-content blockquote a {
	color:        rgba( 255, 255, 255, 0.75 );
	border-color: rgba( 255, 255, 255, 0.25 ); 
}

blockquote a:hover,
blockquote a:focus,
.entry-content blockquote a:hover,
.entry-content blockquote a:focus { border-color: #fff; }

/* =/=/=/=/=/= End colors danger zone. =/=/=/=/=/= */

/********************************************************************************************************
 * This concludes the fun area for making your child theme unique.
 ********************************************************************************************************/
/********************************************************************************************************
 *
 * 3 - VEI classes (3a) and specific referencs (3b)
 *
 ********************************************************************************************************/  
 
 
 
/********************************************************************************************************
 *
 * 3a - General VEI classes
 *
 ********************************************************************************************************/ 

 /* 
 *
 *	.showcase
 *	
 * 	This class is used with ""query post plugin" and the amr_widget to showcase mutliple posts/projects on the one page
 * 	It is meant to have a magazine feel to it.
 * <body class="showcase">
 * 		<article class="entry "> - this is the single page
 * 			<div class="entry-header"></div> - the page title
 * 			<div class="entry-content"> - the page content
 * 				<section class="posts"> - all the posts, 
 * 					<div class="entry {widget-class}"> - a div for each post, 
 *						...
 * 					</div>
 * 					<div class="entry {widget-class}"> - a div for each post
 *						... 				
 * 					</div>
 *
 *					...etc
 *			
 *				</section>
 *			</div>
 *		<article>
 *	</body>
 *
 */
 
/*
 *
 * 	An .showcase .entry should be a single page entry which is the parent of mutliple child entries. 
 *	It should have no width or margin so that the individual entries can have their own 100% width.
 *
 */

 
 
	article.showcase.entry:first-of-type {
		margin-top:0;
	}
		article.showcase.entry > *  
		/* All entry-header, entry-content etc so we can set the background-color*/
		{
			margin: 0;
			padding-left: 0 !important;
			padding-right: 0 !important;
			max-width: none;	
			text-align: center;
		}
		

			
		/* The title of the page */
 		article.showcase.entry > .entry-header , 
		article.showcase.entry > .entry-footer		{
			margin: 0 auto;
			max-width: 1075px;
		}
		
		article.showcase.entry .entry  > .entry-content {

		}
		
		article.showcase.entry .entry-content section.posts {

			
		}
		/* The default */
		
		article.showcase.entry .entry-content section.posts > .entry {
			margin-top:0;
			margin-bottom:0;
			padding-top: 3rem;
			padding-bottom: 3rem;
		}
		
		article.showcase.entry .entry-content .whistles,
		article.showcase.entry .entry-content section.posts > .entry  > *,
		article.showcase.entry .entry-content section.related-content	.entry > *	{
			margin: 0 auto;
			padding-left: 0;
			padding-right: 0;
			max-width: 1025px;				

		}
		
		article.showcase.entry .entry-content section.posts > .entry.wide  > * {
			max-width: 100%;		
			padding-left: 50px;
			padding-right: 50px;			

		}				
		
		
		article.showcase.entry .entry-content section.posts > .entry.full-width  > *  {
			max-width: 100%;		
			padding-left: 0;
			padding-right: 0;			

		}		
		
		
		
		article.showcase.entry .entry-content section.posts > .entry  > .entry-content{

		}
		
		@media only screen and (max-width: 799px) {
			article.showcase.entry .entry-content section.related-content .entry > *,
			article.showcase.entry .entry-content section.posts > .entry  > *,
			article.showcase.entry .entry-content section.posts > .entry.wide  > *,
			article.showcase.entry .entry-content section.posts > .entry.full-width  > * 
			{
				margin: 0px;
				padding-left: 20px;
				padding-right: 20px;
			}	
		}


		
		
		@media only screen and (min-width: 800px) {
			article.showcase.entry .entry-content section.posts > .entry.card  > *{
				max-width: 1025px;
			}
			
			/* Type A */
			article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) * {
				max-width: 55%;
			}
			article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) > a > img  {
				float: right;
			}
			
			/* Type B */
			article.showcase.entry .entry-content section.posts > .entry.card:nth-child(2) * {
				text-align:center;
			}		
			
			
			/* Type C */
			article.showcase.entry .entry-content section.posts > .entry.card:nth-child(3) > * {
				text-align:right;

			}
			article.showcase.entry .entry-content section.posts > .entry.card:nth-child(3) > a > img  {
				float: left;
				max-width:45%;
			}		
			article.showcase.entry .entry-content section.posts > .entry.card:nth-child(3) * p {
				text-align:right;
				max-width: 55%;
				margin-left: 45%;				
			}	
		

			/* showcase-override-template-1, like promo video boxes */
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-1 > .entry-title,
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-1 > .entry-meta
			{
				display: none;
			}
			
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-1 > * {
				text-align:center;
				max-width: 100%;
				display: block;
				margin: 0;
				max-width: 100%;
				padding-left:  20px;
				padding-right: 20px;				
			}
			

			@media only screen and ( min-width: 950px ) {	
				
				article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-1 > * {
					padding-left:  50px;
					padding-right: 50px;
				}
					
			}			
			
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-1 > a > img  {
				float: none;
			}		
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-1 * p {
				text-align:center;
				max-width: 100%;
				margin-left: auto;
			}				
			
			/* showcase-override-template-2, like promo video boxes */
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-2 > .entry-title,
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-2 > .entry-meta
			{
				display: none;
			}			
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-2 > * {
				text-align:left;
				max-width: 1025px;
			}
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-2 > a > img  {
				float: none;
			}		
			article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-2 * p {
				text-align:center;
				max-width: 100%;
			}		
			
		}

		/* Global is displayed differently */
		@media only screen and (min-width: 800px) {
			.vei-global article.showcase.entry .entry-content section.posts > .entry.card * {
				text-align: left;
			}
			.vei-global article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) * {
				max-width: 1025px;
			}
			.vei-global article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) > a > img  {
				float: none;
			}
			.vei-global article.showcase.entry .entry-content section.posts > .entry.card:nth-child(3) * p {
				text-align:left;
				max-width: 1025px;
				margin-left: 0;				
			}				
		}

		
		/* Colours for the sections of showcase page */

		.vei-global article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1),
		.vei-global article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) > * 
		.vei-global article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) > *  > a,		
		.vei-global article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1)  > *  > a:visited		{
			background-color: #0086BF !important;			
			color: #fff !important;		
		}			
		
		
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1),
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) > * 
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1) > *  > a,		
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(1)  > *  > a:visited		{
			background-color: #E3E3E3 !important;			
			color: #000 !important;			
		}		
		
		
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(2),
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(2) > * 
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(2) > *  > a,		
		.front-page article.showcase.entry .entry-content section.posts > .entry.card:nth-child(2)  > *  > a:visited		{
			background-color: #0086BF !important;			
			color: #fff !important;			
		}			
		
		.products article.showcase.entry .entry-content section.posts > .entry.card.category-products:nth-child(2),
		.products article.showcase.entry .entry-content section.posts > .entry.card.category-products:nth-child(2) > * 
		.products article.showcase.entry .entry-content section.posts > .entry.card.category-products:nth-child(2) > *  > a,		
		.products article.showcase.entry .entry-content section.posts > .entry.card.category-products:nth-child(2)  > *  > a:visited		{
			background-color: #0086BF;			
			color: #fff;			
		}		
			
		.services article.showcase.entry .entry-content section.posts > .entry.card.category-services:nth-child(2),
		.services article.showcase.entry .entry-content section.posts > .entry.card.category-services:nth-child(2)  > *,
		.services article.showcase.entry .entry-content section.posts > .entry.card.category-services:nth-child(2)  > * > a,		
		.services article.showcase.entry .entry-content section.posts > .entry.card.category-services:nth-child(2)  > *  > a:visited
		{
			background-color: #E0004D;			
			color: #fff;			
		}			






		
		article.showcase.entry .entry-content section.related-content {
			background-color: #E3E3E3 !important;				
		}

		
		article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-1 {
			background-color: #E3E3E3 !important;			
			color: #000 !important;			
		}			
		article.showcase.entry .entry-content section.posts > .entry.card.showcase-override-template-2 {
			background-color: #E3E3E3 !important;			
			color: #000 !important;			
		}		

		.post-2175 > * {
			display: block !important;
			margin: 0 !important;
			max-width: 100% !important;
			padding-left:  20px !important;
			padding-right: 20px !important;
		}
		.post-2175 * {
			text-align: left !important;
		}


			
		
/*
 *
 * 	A .video-player general class
 * 	A .ackground-header for all backgrounds inc. video at top of the page
 *
 */

	 
	.background-header {
		position: relative;
		display:block;
		width:100%;
		height:40vh; /* This is the default */
	} 
 		@media only screen and (max-width:320px) {
			#background-header {
				height:150px;
			}
		}	
	 
	.background-header figure.video-player {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;		
		overflow: hidden;
		background-repeat: no-repeat;
		display: block;
		clear: both;
		margin: 0 !important;
		z-index: 0;
		
	}

	.background-header figure.video-player video {
		position: relative;

		width: 100%;
		height: 54vw;
		margin:0 !important;
		object-fit: fill;
	}
	.background-header figure.video-player .video-control {
		display:none;	
	}

	
	/* For IE 8 */
	video { display: block; }

	/* These can be used for all video of video-player class */
	figure.video-player  figcaption {
		background-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align:center;
	}

	figure.video-player figcaption {
		background-color: rgba(0, 0, 0, 0.5);
	}


	figure.video-player .layer-content {
	  position: relative;
	  top: 40%;
	  transform: translateY(-50%);
	}

	figure.video-player .layer-content a {
		margin-left:1rem;
	}

	figure.video-player .layer-content a:first-of-type {
		margin-left:0;
	}


	figure.video-player .layer-content h3 {
		color: #FFF;
		font-size: 3rem;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
	}

	figure.video-player .layer-content p {
		color: #FFF;
		font-size: 2rem;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
	}
	
	
	figure.video-player  .video-control {
		text-decoration: none; 
		font-size: 3rem; 
		color: #fff;
		border: 3px solid #fff;
		border-radius: 50%;	
		padding: 10px;
	}

	figure.video-player  a.video-control:hover {
		color: #fff !important;
		border-color: #fff !important; 
	}
	figure.video-player  a.video-control:visited {
		color: #afafaf !important;
		border-color: #afafaf !important; 
	}



/*
 *
 * 	A wrapper class to make youtube, vimeo iframe responsive
 *
 */
	.iframeVideoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
		margin: 20px;
	}
	.iframeVideoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}	
	


/*
 *
 * 	An extension of the .btn class
 *
 */

	.btn {
		display:inline-block;
		-webkit-border-radius: 3;
		-moz-border-radius: 3;
		border-radius: 3px;
		font-family: inherit;
		background-color: transparent;
		padding: 1rem 2rem !important;
		text-decoration: none  !important;
		border:1px solid  !important;
		font-weight: bold;
		/* Defaults - equivalent to btn-grey */
		border-color: #63666A ;
		color: #63666A ;
		
	}
	.btn:hover {
		/* Defaults - equivalent to btn-grey */
		background: #63666A ;
		color:#FFF ;
		border-color: #63666A !important;
		text-decoration: none;
		font-weight: bold;
	}


	.btn-grey  {
		background-color:#FFF !important;
		border-color: #63666A !important;
		color: #63666A !important;
	}


	.btn-grey:hover {
		background: #63666A !important;
		color:#FFF !important;
		border-color: #63666A !important;
	}


	.btn-green
	 {
		border-color: #97D700 !important;
		color: #97D700 !important;
	}

	.btn-green:hover
	 {
		background: #97D700 !important;
		color:#FFF !important;
		border-color: #97D700 !important;
	}
	
	.btn-green-block
	 {
		background: #97D700 !important;
		color:#0086BF !important;
		border-color: #97D700 !important;
	}

	.btn-green-block:hover
	 {
		border-color: #97D700 !important;
		color: #63666A !important;	 
	}	

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

	.btn-white:hover {
		background: #FFF !important;
		color:#63666A !important;
		border-color: #FFF !important;
	}
		
		
 /********************************************************************************************************
 * This concludes the 3a. VEI classes section.
 ********************************************************************************************************/
 
 /********************************************************************************************************
 * 3b. Styling of specific page or elements on the VEI web site
 *
 * Note:
 *
 *	Background-image url should be provided for for mobile & tablet
 *		mobile: With the suffix -300x169.jpg
  ********************************************************************************************************/ 	

	body, .main, #menu-secondary, #menu-primary  {
		background-color: transparent !important;
	}


	
	#menu-secondary, #menu-primary  {
		z-index: 200 !important;

	}
	 
	#menu-primary li a,
	#menu-secondary li a {
		color: #FFF;
		font-weight: 700;
		font-size:1rem;
	} 

	

	/* The defaults, which might need to be overridden for certain pages */
	#background-header {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	/* Default background image */
	#background-header {
			background-image: url("./images/accessgreen_chameleon.gif");
	} 
 		@media only screen and (max-width:320px) {
			#background-header {
				background-image: url("./images/box.jpg");
			}
		}	
		

	



 

 

		
	
		
	
		
	

	
	/* =/=/=/=/=/= Adjustments for cards.css =/=/=/=/=/= */	
	
	.single-card .card,
	.card-group .card {
		font-size: 0.9rem !important;
	}

	.single-card {
		width: 300px;
		margin:20px;
	}
	
	.card figure img,
	.card-active:hover figure img { 
		opacity: 1;
	}
	
	._card figure img {
		
		-webkit-filter: contrast(150%) grayscale(100%) brightness(0.8);
		filter: contrast(150%) grayscale(100%);
		filter: gray;
		filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
		opacity: 1; 
		-webkit-transition: all 0.5s ease-in-out;
		   -moz-transition: all 0.5s ease-in-out;
		      -o-transition:  all 0.5s ease-in-out;
		        transition: all 0.5s ease-in-out;
	}

		._card-active:hover figure img { 
			opacity: 1; 
			-webkit-filter: contrast(100%) grayscale(0) brightness(1);
			filter: contrast(100%) grayscale(0);		
		}		
	/* =/=/=/=/=/= Adjustments for cards.css =/=/=/=/=/= */	


 
  /********************************************************************************************************
 * This concludes the 3b.: Styling of specific page or elements on the VEI web site
 ********************************************************************************************************/
 
 
 
/********************************************************************************************************
 * 4 - Fixes
 *
 ********************************************************************************************************/ 
	
/* 
 *
 * 	The hybrid columns plugin doesn't specify how it responds to different widths
 *	Default for all columns: Break rows into a single column on screens smaller than 900.
 *
 */
 
	@media only screen and (max-width: 800px) {

		.column-grid > .column {
			clear: both;
			float: none;
			width: 100%;
			margin-right: 0;
			margin-left: 0;
		}
	}
	
	@media only screen and (min-width: 800px) {	
		/* Each column should be the same height */
		.column-grid {
			display: flex;
		}
	}

	/* On the site overview, don't show the third, fourth, fifth columns */
	body.front-page div.post-2498 .whistle-content > div.column-grid:nth-of-type(3), 
	body.front-page div.post-2498 .whistle-content > div.column-grid:nth-of-type(4), 
	body.front-page div.post-2498 .whistle-content > div.column-grid:nth-of-type(5) {
		display: none;
	}

	
/* 
 *
 * 	the stargazer parent theme has styles that impact on other elements of the site 
 *	These are dealt with in the following fixes
 *
 */
 
	/* =/=/=/=/=/=fixes for soliloquy =/=/=/=/=/= */
	.soliloquy-container ul {
			max-width: none !important;
	}
	.soliloquy-container li {
			margin-left:0 !important;
	}
	.soliloquy-container li  img{
			margin:0 !important;
			padding:0 !important;
	}
	/* =/=/=/=/=/= End fixes for soliloquy. =/=/=/=/=/= */

 /********************************************************************************************************
 * This concludes the fixes section.
 ********************************************************************************************************/
 
body.singular-page article.entry > .entry-header > .entry-title {
	display: none;
} 

body.archive article.entry > .entry-header > .entry-title {
	display: block;
} 





@media only screen and (max-width: 799px) {	
		/* Container */
		#menu-primary,
		#sidebar-sliding-panel,
		.sp-toggle		{
			display: none;
		}
		#menu-secondary  {
			top:0;
			padding-top:0;
			text-align:left !important;
			opacity: 1;
		}
		
		#menu-secondary  button{
			margin: 0 !important;
		}		
		
		.background-header figure figcaption .layer-content > *:not(.entry-title) {

		}
		.background-header figure figcaption .entry-title {
			font-size:1.2rem;
		}
} 
 
 
@media only screen and (min-width: 800px) {	
		 #menu-primary {
			text-align:right;
		 }
		 
		 #menu-secondary {
			display: none;
		}			 
		 
		.ltr #menu-primary .search-form {
			right: 25px !important;
			top: 50px !important;
		}
		
		
		.ltr #menu-primary #menu-primary-items li:last-child {
			right:25px;
			position: absolute;
			top: -1px;
			width:100px !important;
			min-width:92px !important;

		}
	
		/*
			The text is removed by jquery in site.js
		*/
		
		.ltr #menu-primary #menu-primary-items li:nth-last-child(2) {
			margin-right: 100px;
		}


		/* Container */
		#sidebar-sliding-panel {}

			/* Inside wrapper. */
			.sp-wrap {
				max-width:33%;
				}

				/* Container for widgets. */
				.sp-content {}

					/* Inside wrapper for widgets. */
					.sp-content-wrap {}

						/* Individual widgets. */
						.sp-content .widget {
							width:100%}
						.sp-content .widget-title {}

				/* Toggle button. */
				.sp-toggle {
					float: left;
					margin-left:0;
					}

					/* Toggle button link. */
					.sp-toggle a {
						text-decoration: none !important;	
						padding: 25px 20px 20px 20px !important;		
						background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;				
					}
					.sp-toggle a:hover {
						text-decoration: none !important;					
					}			
					.sp-toggle a::after { 
						font-family: 'Genericons' !important;		
						content: '\f419'; 
						color: #FFF; 
						font-size: 1.3rem;
					} 

					.menu-slider{
					}
						.menu-slider .menu-items a {
						  display: block;
						  /* background-color: #CCC; */
						  text-decoration: none;
						  padding: 10px 10px 10px 25px;
						  color: #FFF;
						}

						/* add hover behaviour */
						.menu-slider .menu-items a:hover {
							/* background-color: #C5C5C5; */
						}
						
						.menu-slider .menu-items, 
						.menu-slider .sub-menu 	{
						  list-style: none;
						  padding:	0 0 0 25px !important;
						  margin: 0 !important;
						}					

						.menu-slider .menu-items li:hover  .sub-menu {
						  display: block;
						  max-height: 500px;
						}					
					
					
						.menu-slider .sub-menu a {
						  /* background-color: #999; */
						}

						/* hover behaviour for links inside .submenu */

						.menu-slider .sub-menu a:hover,
						.menu-slider .sub-menu a:active
						{
						  /* background-color: #666; */
						}

						/* this is the initial state of all submenus.
						  we set it to max-height: 0, and hide the overflowed content.
						*/
						.menu-slider .sub-menu {
						  overflow: hidden;
						  max-height: 0;
						  -webkit-transition: all 0.9s ease-out;
						  -webkit-transition: all 0.9s ease-in;
						}					
					
}

@media only screen and (min-width: 1025px) {	
				.sp-toggle {
						margin-left: calc((100vw - 1025px) / 2) !important;
					}	
}


article.post_format-post-format-video  .embed-wrap   {
	padding-bottom: 32% !important;
}


.synved-social-container-share:after {
	content: "Share this";
	margin-left: 5px;
	color: rgba( 85, 85, 85, 0.75 );
	font-family: Calibri, sans-serif;
    font-style: normal;
	font-size: 1rem;
}

article.showcase.entry .entry-content section.posts > .entry.card.post-2498 > .entry-title,
article.showcase.entry .entry-content section.posts > .entry.card.post-2498 > .entry-meta {
	display: none;
}



body.downloads  table {
	font-size: 1rem;
}

body.downloads  table.downloads {
	counter-reset: downloads;
}
body.downloads  table.brochures {
	counter-reset: brochures;
}
body.downloads  table.downloads span.counter::before {
	counter-increment: downloads;
	content: counter(downloads);
}