/*
CTC Separate Stylesheet
Updated: 2019-05-24 12:26:53
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://tomusborne.com
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 15kb (gzipped) to your page size. We take full advantage of the new block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS and is translated into over 25 languages by our amazing community of users. A few of our many features include microdata integration, 9 widget areas, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover) and navigation color presets. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 2.2.2.1558697213
*/

/* just because the unstyled, un-Elementored default Wordpress Pages tend to hide their titles under sticky headers, otherwise. */
.page-template-default h1{
	padding-top: 60px;
}


#login h1 a, .login h1 a {
	width: 250px !important;
}

/* kills off the default featured image */
.featured-image.page-header-image.grid-container.grid-parent {
    display: none;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* I don't want to use elementor to template the search results page because it doesn't seem to give the same access to web category (gmedia) images as the default search page.
 * 
 * So I'm going to style that as best I can here with flex.
 * 
 */

.search-results .gmedia_gallery {
	display:none;
}

.search-results .post-image {
	overflow: hidden;
	position:relative;
}

.search-results img {
    display: block;
    width: 100%;
    max-height: none;
    max-width: none;
    -webkit-transition: -webkit-filter .3s;
    transition: -webkit-filter .3s;
    -o-transition: filter .3s;
    transition: filter .3s;
    transition: filter .3s,-webkit-filter .3s;
}

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

.search.search-results .container.grid-container {
    max-width: 100%;
    margin-left: 40px;
    margin-right: 40px;
    background: #fff;
}


.search.search-results .site-main {
	display:flex;
	flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

.search-results article.gmedia, .search-results article.type-page, .search-results article.gmedia_album {
    width: 30%;
    /* height: auto; */
    background: #fff;
	border-style: solid;
    border-color: #ddd;
    border-width: 1px;
    margin: 20px;
}
	

	
}



@media only screen and (max-width: 768px) {
.search.search-results .container.grid-container {
    max-width: 100%;
    margin-left: 10px;
    margin-right: 10px;
	}
	.search-results article.gmedia {
	width: 100%;
    margin: 0px;
	}
}
	

article.gmedia h2.entry-title {
	/* display:none; */
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*
	The following section are part of the example styling for 'testimonial' custom post type when displayed using the Pods template I created for them, 
	'Testimonial Pods Template', and when displayed using the Pods shortcode, as in the Page 'Pods Shortcode Examples'
	e.g. [pods name="testimonial" limit="5" template="Testimonial Pods Template"].

	Obviously, you may delete or edit this!
*/

div#testimonial_post_wrapper {
	box-sizing:border-box;
	display:inline-block;
	width:45%;
	min-height:250px;
	vertical-align:top;
	border-width:1px;
	border-color:gray;
	border-style:solid;
	padding:15px;
	margin:10px;
}

h2#testimonial_post_title {
	font-family:"Space Mono", sans-serif;
	font-style:italic;
	color:gray;
	font-size:2em;
	text-align:center;
}

h2#testimonial_post_title:before, h2#testimonial_post_title:after {
	content:"'";
}

div#testimonial_post_quote p:before, div#testimonial_post_quote p:after {
		content:'"';
}

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

/* some styling for the youtube video page */

.yotu-wrapper-player {
	background-color: lightgrey;
    padding: 50px;
}
.yotu-playing {
    font-weight: 600 !important;
    font-size: 20px !important;
}

.yotu-playing-description {
padding-top: 30px;
}

#content .category-articles li {
	padding-bottom:1em;
}

/*#content a {
	color:#3a3a3a;
	text-decoration:underline;
}*/

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

/* some test styles for higlighted changes for hashtags */

.icrt_text {
	color: red;
}

.tpnt_text {
	color: #0084D4;
}

.tow_text {
	color: #888B8D;
}

.clpt_text {
	color: #004976;	
}

.tmnu_text {
	color: #205C40;	
}

.ttop_text {
	color: #84329B;	
}

.tres_text {
	color: #C7579A;		
}

.tstk_text {
	color: #AB2328;	
}

.tlty_text {
	color: #FDAA63;		
}

.pckt_text {
	color: #56B7E6;
}

.tktc_text {
	color: #00B2A9;
}

.bytb_text {
	color: #FF6720;
}

.ttta_text {
	color: #FF6720;	
}
.hashtag {
	font-weight:bold;
}

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

/* some styles for fake tweet preview etc */



.tweet-wrap {
  max-width:490px;
  background: #fff;
  margin: 0 auto;
  margin-top: 50px;
  border-radius:3px;
  padding: 30px;
  border: 1px solid #e6ecf0;
  font: 14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	line-height: 20px;
}

.tweet-header {
  display: flex;
  align-items:flex-start;
  font-size:14px;
}
.tweet-header-info {
  font-weight:bold;
	display:table;
}
.tweet-header-info span {
  color:#657786;
  font-weight:normal;
  margin-left: 5px;
}
.tweet-header-info p {
  font-weight:normal;
  margin-top: 5px;
  
}
.tweet-img-wrap {
  padding-left: 60px;
}

.tweet-info-counts {
  display: flex;
  margin-left: 60px;
  margin-top: 10px;
}
.tweet-info-counts div {
  display: flex;
  margin-right: 20px;
}
.tweet-info-counts div svg {
  color:#657786;
  margin-right: 10px;
}
.avatar {
  border-radius:100px;
  width:48px;
  margin-right: 15px;
}



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

/* some styles for hashtag suggestions etc */

.suggestedTagContentWrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	font-size: 12px;
}

.hashtag:before {
  /* content: "#"; */
}
ul.suggested_hashtag {  
	flex: 0 0 48%;
    margin: 0 0 0.5em 1.5em;  
}
lh.suggested_hashtag span {
	font-weight:bold;
}

lh.suggested_hashtag:before {
	content: "Because you mentioned: ";
}

lh.suggested_hashtag:after {
	content: ", consider including: ";
}

li.suggested_hashtag {
	display:inline;
		margin-left:5px;
	margin-right:5px;
}

li.suggested_hashtag:before {
  /*content: "#"; */ 
}

li.suggested_hashtag:after {
  /*content: ", "; */
}

li.suggested_hashtag button {
	font-size:12px;
	padding:8px;
}

.hashtag_table ul.suggested_hashtag {
	display: flex;
    flex-wrap: wrap;
}

.hashtag_table ul.suggested_hashtag > li.suggested_hashtag{
    display:inline-block;
	margin:5px;
}

:root #modal-content{
	/* undoes something elementor brute forces so it doesn't happen on modal windows */
    --page-title-display: block !important;
}

a.see-all-tags {
	font-size: 12px;
    padding: 8px;
	color: #ffffff;
    background-color: #0084D4;
	white-space: nowrap;
}

.error {
	color:red;
	font-size:1.5em;
	font-weight:500;
	margin:1em;
	text-align:center;
}



.formPreview {
	display: flex;
	margin-bottom:20px;
}

.tweetPreview {
	flex: 30%;
}

.copytextarea {
	flex: 70%;
}

.headertext {
	display:table-cell;
	vertical-align: middle;
}
.copytextarea {
	
}

.copybutton {
	text-align: center;
    margin-top: 10px;
}

h2.centerme {
	padding-top:20px;
	text-align: center;
}

.copybutton {
    float: right;
}

textarea#form-field-message, textarea#copytext {
	font-size: 14px;
}


.terms_wrapper_float {
	float:right;
}
.terms_wrapper {
    display: flex;
    flex-wrap: wrap;

}
.term_container {
	border-radius: 25px;
	-webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
    border: 0 solid #818a91;
	background-color: #fff;
	box-sizing: border-box;
	 flex: 1 0 18%; /* The important bit. This percentage decides your columns. 
 The percent can be px. It just represents your minimum starting width.
  */
	margin:10px;
	text-align:center;
	min-height:60px;
	padding-left: 10px;
    padding-right: 10px;
}

li.term_list {
    list-style-type: none;
	position: relative;
    top: 25%;
}


.modal-wrapper {
	background-color: #fff;
	width:400px;
	max-width:30%;
	height:60%;
	top:16%;
	right: 20px;
    left: auto;
	border-radius: 25px;
	-webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
    border: 1 solid #818a91;
}
button.close-modal {
	float: right;
    margin-right: 20px;
    margin-top: 20px;
}

.wp-post-modal.show {
    height: 100%;
}


#modal-content h1 {
	color:#000;
	font-size:30px;
	font-weight:500;
}


#modal-content h2 {
	color:#000;
	font-size:20px;
	font-weight:400;
	line-height: 1.5em;
}

#modal-content li.term_hashtags button {
    font-size: 12px;
    margin: 2px;
}

#modal-content ul.term_hashtags  {
	display:flex;
	flex-wrap:wrap;
}

#modal-content li.term_hashtags  {
	flex: 0 0 50%;
}

li.term_hashtags {
    list-style: none;
}




.concept-wrapper {
    border: 1px solid;
    border-color: grey;
    padding: 20px;
    border-radius: 15px;
}




div.concept-cats {
    display: flex;
}

div.concept-cats b {
	padding-right:2em;
}

.concept-content {
    padding-top: 20px;
    padding-bottom: 20px;
}


.concept-wrapper a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

.concept_toc {

}

.concept_toc li {
	margin:0px;
}
.concept_toc ul  {

}

.concept_toc ul p {
	margin:0px;
}

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

/* largely temporary styles for the proof of concept poster test thingy */

.logo_preview_container img {
	/*
    position: absolute;
    top: -1500px;
    left: 360px;
    width: 400px;
    height: auto;
    border-width: 1px;
    border-style: dotted;
    border-color: lightgray;
	*/
	width: 400px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: -1500px;
	left: 0;
	right: 0;
	text-align: center;
}

.qrcode_preview_container img {
	width: 400px;
    position: absolute;
	margin-left: auto;
	margin-right: auto;
    left: 0;
	right: 0;
    top: -1100px;
    height: auto;
    max-width: 400px !important;
}


.qrcode_preview_container h2 a {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: -450px;
	left: 0;
	right: 0;
	text-align: center;
	text-decoration:none !important;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* some mobile adjustments to a few things, mostly to do with forms and modal windows */

@media only screen and (max-width: 1080px) {
.modal-wrapper {
    background-color: #fff;
    width: 100%;
    max-width: 90%;
    height: 90%;
    top: 5%;
    right: 5%;
    left: auto;
}
	.formPreview {
		display:block;
	}
	
ul.suggested_hashtag {  
	flex: 0 0 100%;
}
	
.tweetPreview, .copytextarea {
	flex: 100%;
}

textarea#form-field-message, textarea#copytext {
    height: 300px;
	min-height:300px;
	
}
	
.tweet-info-counts {
    display: none;
}
}