:root{
--global--font-size-xxl: 3rem;
--table--hover-background-color: lightgray;		
--quote--font-weight: 300;
}

.is-dark-theme.is-dark-theme {
--table--hover-background-color: black;	
}

.wp-block-quote:before {
	content: "";
}

.wp-block-quote {
	    border-left: 0.25em solid gray;
	font-weight: normal;
}


.wp-block-table {
	border: 0 px solid blue;
	  
}
tr:hover {background-color: var(--table--hover-background-color);}

table td, table th, .wp-block-table td, .wp-block-table th {
    padding: calc(0.5 * var(--global--spacing-unit));
    border: 1px solid gray;
}

.wp-block-table th {
	border-bottom: 3px solid gray;
}

table th {
	border-bottom: 1px solid gray;
}



.entry-title a {
	font-size: 2rem;
}



.bannerzoom {
  padding-bottom: 10px;
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.bannerzoom:hover {
  transform: scale(1.02); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.callout {
  padding: 1rem 1rem 1rem 3rem;
  background: #3f485a;
  border: 0px solid #3740ff;
  color: ##f6f7f7;
  position: relative;
  max-width: 40rem;
	border-radius:15px;
}

.callout::before {
  content: "";
  background-size: cover;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  position: absolute;
  left: 1rem;
}

.callout p + p {
  margin-top: 1em;
}

.callout a {
  color: ##f6f7f7;
  font-weight: regular;
}

.wp-block-pullquote blockquote::before {
	content:"";
}

.wp-block-pullquote p {
	font-weight:400;
}

li {
	padding-top : 10px;
}

.newsletter {
  color: ##f6f7f7;
  font-weight: regular;
}

code {
	background-color: #555963;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 0.8em;
}

.wp-block-code{
	border-style:none;
	padding: 0;
}


.supplementary {
  padding: 1rem 1rem 1rem 3rem;
  background: #1A4464;
  border: 0px solid #3740ff;
  color: ##f6f7f7;
  position: relative;
  max-width: 40rem;
}

.supplementary::before {
  content: "";
  background-size: cover;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  position: absolute;
  left: 1rem;
}

.supplementary p + p {
  margin-top: 1em;
}

.supplementary a {
  color: ##f6f7f7;
  font-weight: regular;
}



/* -- Call out for my products START  ---*/
.product-callout-box-title {
	font-size: 0.7em;
	color: #FFFFFF;
	text-align:left;
}

.product-callout-box {
	padding: 1rem 1rem 1rem 1rem;	
	background-color:var(--global--color-gray);
	text-align:left;
	color: #FFFFFF;
	border-radius:10px;
}

.product-callout-box-text span {
	color: white;
	font-weight:bold;
}

.product-callout-box a {
  text-decoration: none;
	color:white !important;
}

.product-callout-box a:active {
  text-decoration: none;
	color:#FFFFFF;
}

.product-callout-box-text:hover {
	 text-decoration: underline;
}

/* -- Call out for my products END  ---*/

.tw-header-padding-large {
	    --header--padding:0px;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
	height: auto;	
}

.primary-navigation a {
	padding: 0 0;

}



.site-title {
	font-size:1.3rem;
		padding-top: 10px;
}

@media(max-width:480px){
	.site-title  {
		font-size:1rem;
	}
}




html {
      scroll-padding-top: 60px;
}



/* disable feature image on mobile */
@media(max-width:480px){
.attachment-post-thumbnail {
	display: none !important;
}
}


img {
  display: block;
  margin-left: auto;
  margin-right: auto;	
}

.w-full img {
	width:100% !important;
	
}

/* sticky header on desktop but not mobile START */
@media(min-width:961px){
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    transition: background-color 110ms ease-out,border-color 110ms ease-out,box-shadow 110ms ease-out;
}
	
.site-header {
    background-color: var(--header--color-background);
    max-width: none;
    padding-left: calc(50% - var(--responsive--alignwide-width)/2);
    padding-right: calc(50% - var(--responsive--alignwide-width)/2);
    padding-bottom: var(--header--padding);
	row-gap: 0px;
}	
}
/* sticky header on desktop but not mobile END */



.wp-block-latest-posts__post-title {
	font-size: 1.4rem !important;
	
}

.sidebar-button {
	padding-top: 3rem;
	padding-bottom: 3rem;	
	
}

/* ensure sidebar at least 300px for Mediavine */
.blog-sidebar {
	padding-inline-start: 40px;
}


/* Mediavine Mobile CSS */
@media only screen and (max-width: 359px){
    #primary  {
       padding-left: 10px!important;
       padding-right: 10px!important;
       min-width:100%!important;
    }
} 

/*mediavine ad background color*/
.mv-ad-box  {
	background-color:#2a303c !important;
	
}
.mv-rail-slide-400 {
	background-color:#2a303c !important;
}

.mv-rail-slide-600 {
	background-color:#2a303c !important;
	
}

.post-thumbnail {
max-width: var(--responsive--aligndefault-width) !important;
}

/*Add corner radius to all images*/
img {
	border-radius: 15px;
}

/*Add corner radius to TOC box*/
#toc_container{
	border-radius: 15px;
}

/*callouts sidebar*/
.callout2 {
	border-radius: 15px;
}

/*copy to clipboard button */
.copy-the-code-inside-wrap.copy-the-code-style-svg-icon .copy-the-code-button:not(:hover)
  {
		background-color:transparent;
		color:white;
		
}

.copy-the-code-inside-wrap.copy-the-code-style-svg-icon .copy-the-code-button 
  {
	    right: 0rem;
	    border-radius: 5px;
		padding: 5px;
		color:white;
		background-color:black;
		float:left;
		position:absolute;
}

code {
	max-width:95%;
}

blockquote p {
	max-width:95%;
}


/* adds style to divs */
/* by default all divs are hidden */
div.custom_option {
    display: none;
    border: 2px solid #ccc;
    margin-right: 5px;
    padding: 2px 5px;
    cursor: pointer;
}

/* show only divs with class "is-visible" */
div.custom_option.is-visible {
    display:inline-block;
}

/* adds the style to the selected div */
div.custom_option.on {
    background-color: #777;
    color: white;
}



/* Menu button in mobile - larger font. Before that  */
#primary-mobile-menu {
	font-size:1em !important;
}