/*
 Theme Name: Modules Child
 Theme URI: https://preview.artisanthemes.io/modules/
 Author: Port 80 Services
 Author URI: https://port80.services
 Description: The Frog Blog. 
 Template: modules
 Version: 1.0.0
 Text Domain: quadroj
*/

/**--
 * You can comment the following line to avoid loading the parent theme's CSS file
 * before loading this one. Otherwise, keep in mind that all original styles from
 * the parent theme will be loaecnded before whatever you declare here. 
 */
@import url("../modules/style.css");

/* Theme customization starts here
-------------------------------------------------------------- */
/*
body {
filter: invert(1) saturate(0)}

body img, #post-1177, #colophon {
filter: invert(1)}
*/


.site-branding a {
transition:.2s}

#content p, #content .entry-summary h1.widget-title {
letter-spacing: .3px}

#content .wp-block-button a, #content a.qbtn, #masthead .search-submit, span.read-more {
background: #9eb52d;
letter-spacing: .5px;
transition:.3s;	
transform:none;	
font-family: "Red Hat Display";	
color: #fff;	
line-height:0;	
padding: 22px 30px;	
border-radius: 2px;
box-shadow: none}

form.search-form {
justify-content:space-between;	
display:flex}

#masthead .header-search {
width:315px}

#masthead .header-search .search-field {
height: 45px}

#menu-main li a {
font-family: "Red Hat Display";
font-size: 13px;
letter-spacing: 1px;}

#content .page-wrapper:has(.years-nav) {
padding-bottom: 0}

#masthead .header-right .widget_custom_html {
position: absolute;
right: 49px;
top: 50%;
transform: translatey(-50%)}

@media (min-width:760px) {
#masthead .header-right .widget_custom_html {
right:80px}	
}
@media (min-width:960px) {
#masthead .header-right .widget_custom_html {
position:absolute;	
right:0}	
}

	/*
#content .type-canvas a {
position: relative}

#content .type-canvas a:not(.qbtn)::after {
content: '';
width: 100%;
border-bottom: 1px solid #9eb52d;
opacity: .5;	
position: absolute;
bottom: 0;
left: 0;
transform-origin: center center;
transform: scale(1, 1);
transition: 250ms all ease-out}

#content .type-canvas a:not(.qbtn):hover::after {
transform: scale(0, 0)}
*/
#masthead {
box-shadow: 0 1px 30px 0 rgba(0, 0, 0, 0.20);}

.site-main {
background:#f5f5f5}

@media only screen and (min-width: 960px) {
#masthead .main-navigation {
margin-right: 60px}
}	
	
.main-navigation .menu > li.current_page_item > a::after, .main-navigation .menu > li.current-menu-item > a::after, .main-navigation .menu > ul > li.current_page_item > a::after, .main-navigation .menu > ul > li.current-menu-item > a::after, .main-navigation .menu > li.current-menu-ancestor > a::after, .main-navigation .menu > li.current_page_ancestor > a::after, .main-navigation .menu > li.current-menu-parent > a::after, .main-navigation .menu > li.current-page-ancestor > a::after, .single .main-navigation .menu > li.menu-item-home > a::after {
opacity:1;
position: absolute;
bottom: 8px;
left: 15px;
right: 0;
content: "";
border-top: 2px solid #9eb52d}

#masthead .header-right {
display: flex;
align-items: center}

#menu-main li.external-item::after {
content: "\f35d";
font-family: "FontAwesome";
display:inline-block;
font-size: 10px;
position: relative;
top: -9px;
right: -3px;
transition:.4s;	
opacity: 0}	

#menu-main li.external-item:hover:after {
opacity:.6}
}
#colophon img {
width: 300px;}

#colophon .inner-footer{
padding-top:0} 

#colophon::before {
display: block;	
content:"";
width:100%;
aspect-ratio:16/3;
background: url(mazeroux-footer2.webp) #f5f5f5 no-repeat;
background-size: cover} 

body:has(#dictionary) #colophon::before {
background-color: #f1f1f1} 

#colophon h1.widget-title {
font-size: 22px;
letter-spacing: .4px;
text-transform: capitalize}

#colophon .widg-layout1 aside:first-of-type h1::after {
content: "";
display:block;
border-bottom:1px solid #9eb52d}

#colophon .widg-layout1 aside:not(:first-of-type) h1 {
font-size: 15px;
margin: 20px 0 5px;
text-transform: capitalize}

#colophon .widget_archive, #colophon .widget_categories #cat {
margin-top:15px}

#colophon .widget_archive h1, #colophon .widget_categories h1 {
display: none}

#colophon .menu-authors-container ul{
display:flex}

#colophon .search-field {
width:95%}	

#colophon .menu-authors-container ul li:first-child{
margin-right: 20px}


#colophon li a::before {
content: "\f105";
font-family: "FontAwesome";
font-weight: 900;
margin-right: 3px;	
color:#9eb52d;	
display:inline-block}

/*
#colophon li{
position:relative}

#colophon li::before, #colophon li::after {
content: "";
background: #9eb52d;
display: inline-block;
height: 2px;
width: 7px;
transform: rotate(45deg);
position: absolute;
left:0;	
top: -8px}

#colophon li::after {
transform: rotate(-45deg);
top: initial;
bottom:-8px}	
*/
#colophon .menu-authors-container li a {
display: block;
text-align:center}

#colophon .menu-authors-container li a::before, .single span.author a::after {
content: "";
display: block;
background: url(https://frog-blog.port80services.com/wp-content/uploads/2023/12/author-matt.webp);
background-size: 100%;
height: 50px;
width: 50px;
margin:auto;
border-radius: 100%}

#colophon .menu-authors-container li:last-child a::before, .single span.author a[href*="will"]::after {
background-image: url(https://frog-blog.port80services.com/wp-content/uploads/2023/12/author-will.webp)}
	
.single span.author a[href*="saloppe-francaise"]::after {
display: none}

.single span.author a::after {
height: 60px;
width: 60px;	
border: 1px solid #fff}

#colophon select, #secondary select  {
color: #484848;
text-transform: capitalize;	
border-radius: 2px;	
font-size: 13px;	
background: #ddd;}

#content #secondary a.qbtn {
margin-top:20px;
color:#fff!important}

#secondary a.cocktaillink, #secondary a.weatherlink {
display:table}

#secondary .cocktaillink::before, #secondary .weatherlink::before {
content: "\f561";
font-family: "FontAwesome";
font-size: 17px;	
display: inline-block;	
margin: 0 7px 0 -12px;}

#secondary .weatherlink::before {
content: "\f6c4"}

#colophon .inner-footer >div:nth-child(2), #colophon .inner-footer >div:nth-child(3) {
padding-top: 20px}

#colophon .inner-footer >div:nth-child(4) {
margin-top:-16px}

#colophon .inner-footer >div:nth-child(4) img{
filter: drop-shadow(0 0 2px rgba(255,255,255,.3))}

#colophon .menu-london-years-container ul {
columns: 100px 2}

#colophon p.mazerock {
padding-left:20px;
margin-top:-15px}

#colophon p.mazerock a{
display: flex;
align-items: center;}

#colophon p.mazerock i {
transition: .3s;
font-size: 40px;
margin-right: 10px}

#colophon p.mazerock a:hover i{
color: #FF1E04}

#colophon .bottom-footer {
display:none}


#colophon li.menu-item:hover a, #colophon li.current-menu-item a {
text-decoration:underline}
/*
a.back-to-top{
opadcity: 0;
transition: opacity .5s;
height: 36px;
width: 36px;
line-height: 36px;}

a.back-to-top::before, .back-to-top::after {
content:"";
height: 12px;
width: 3px;
transition: 1s;
transition-delay: .4s;
position: absolute;
background: #fff;
left: -2px;
display: block;
top: 50%;
transform: translateY(-50%) rotate(90deg);
left: 0;
right: 0;
margin: auto;}

.back-to-top[style*='display: inline;']{
opacity:1}

.back-to-top[style*='display: inline;']::before{
top: 35%;	
left:-6px;	
transform: rotate(45deg)}

.back-to-top[style*='display: inline;']::after{
right:-6px;
	top: 35%;
transform: rotate(-45deg)}
*/
a#p80{
text-decoration: none!important;
background: url(https://port80.services/img/port80-logo-sml.png) no-repeat 0 1px;
padding-left: 17px;
background-size: 17px 17px;
line-height: 18px;
display: inline-block;
color: #fff!important}

a#p80 span{
font-size: inherit;
display: inline;
color: #0785c4}

#content .type-slogan {
display: flex;
align-items: center;
min-height: 350px;
aspect-ratio: 16/7}

#content .entry-header   {
background-attachment: scroll}	

@media (min-width: 1200px) {
#content .type-slogan, #content .archive-header,  #content .entry-header   {
background-attachment: fixed}	
}

#content #primary .type-slogan * {
color:#fff!important}

#content .type-slogan h1  {
line-height:normal;
font-size: 35px}

#content .type-slogan h1 span {
display:block;
font-size: 40%;
letter-spacing: .4px}

@media (min-width: 768px) {
#content .type-slogan h1  {
font-size: 50px}	
}

@media (min-width: 1024px) {
#content .type-slogan h1  {
font-size: 70px}	
}
#content .type-blog .inner-mod{ 
max-width:100%}

#content .type-blog .entry-inner, #content .type-blog .entry-content{ 
max-width:1000px}

#content .entry-content ol.columns { 
columns: 250px 2}

#content #grid .byline{ 
display: inline-block;
margin: 0 5px 0}

#content #grid .posted-on{ 
margin: 0}

#content #grid .posted-on{ 
margin: 0}

#content .cat-links {
opacity:1;
line-height: 	normal;
display:inline-block}


#content h1.mod-title {
margin-bottom: 25px;	
color: #063E01 !important;}

#content p.modheader-intro {
color: #063E01;}

#content h1.entry-title, #content h1, #content h2, #content h3, #content h4 {
font-weight:400;	
color: #063E01!important}

#content .has-feat-img h1.entry-title {
color: #fff!important	
}
#content h2 {
font-size: 27px	
}
#content  .entry-header h1 a {
font-size: 20px;
color: #7D8E29  !important;
letter-spacing: 0}

#content  .entry-header .cat-links a {
display: inline-block;
margin-bottom: 5px;	
padding: 0 3px;}

#content .type-blog h2, #content .type-blog h3 {
color:#063E01!important;
font-size:24px;	}

#content .type-blog h3 {
font-size:20px;
color:#063E01!important;
}

#secondary .widget_categories ul, .entry-content ul.col-list {
columns: 200px 2}

#primary input, #secondary input, #colophon .search-field, input.search-submit {
height:45px!important;	
background: #ddd;
border-radius: 2px;	
-webkit-appearance:none}

#secondary .widget_custom_html::before {
display:block;
content:"";	
width:90%;
margin-bottom:20px;	
height:1px;
border-bottom: 1px solid #063E01 }
#content .type-blog  article:not(.has-post-thumbnail) {
padding-left: 30px}

#content .blog-style-teasers .entry-thumbnail img {
transform: translate(-50%,-50%);
top: 50%;}

#content .type-blog .entry-inner {
display: flex;
width: 100%;	
flex-wrap: wrap}

#content .type-blog .entry-header * {
order: 2}

#content .type-blog .entry-header h1 {
width: 100%;
text-transform: capitalize;	
order: 1}

#content .type-blog .entry-content a, #content .type-blog .entry-header a, #content #secondary a, .blog-style-teasers .blog-item .entry-header span a {
color: #7D8E29!important;	
letter-spacing: .5px}

#content #secondary h4 a{
letter-spacing: 0}

#content .type-blog article, #content #grid article {
transition: .7s;
transition-delay: .1s;	
filter: saturate(0) contrast(1.2)}

#content .type-blog  article:has(img.in-view), #content #grid article:has(.in-view) {
filter: saturate(1) contrast(1.2)}

#secondary .wp-block-search__label, #secondary h1.widget-title {
font-weight: 400;
color: #063E01 !important;
font-family: "Antic Slab";
margin-bottom: 12px;
display: block;
font-size: 22px;
text-transform: capitalize;}

#content span.read-more , #content span.meta-nav a, #secondary button, #colophon .search-submit, #content .search-submit {
font-family: "Red Hat Display";
font-size: 12px;
box-shadow: none;
letter-spacing: 1px;}

.single #content .entry-header {
display: flex;
background-position:center;	
align-items: center}

.single #content .posted-on {
display: table;
margin:auto}

.single .entry-content> p:first-child::first-letter {
font-family: "Antic Slab";
display: inline-flex;
align-items: center;
float: left;
margin-right: 5px;
padding: 0;
color: #063E01;	
font-size: 85px;
line-height:60px;
text-transform: uppercase}

.single .entry-content figure, .single .entry-content .pa-gallery-player-widget {
margin-bottom:20px}

.single #content .comment-list article {
padding: 40px}

 #content .entry-header.has-feat-img  {
height: 550px}

#content .blog-style-teasers .blog-item:not(.has-post-thumbnail) {
padding: 30px;}

.single #content  .entry-header .dark-overlay{
opacity: .4}

.single .single-wrapper{
padding:60px 40px 0;	
max-width:900px}

.single #primary{
padding: 0 15px;
max-width: 100%;	
box-sizing: border-box;}

#content .type-insights .inner-mod{
max-width: 100%}

#content .type-insights  h4 {
font-size:50px;	
color:#fff!important}	

@media(min-width: 1024px) {
#content .type-insights  h4 {	
font-size:110px}	
}


#content .type-insights li {
display:flex;
flex-wrap:wrap}

#content .type-insights .insight-text {
align-self:center}

#content .type-insights .insight-text {
text-align:left}

#content .type-insights li p {
color:#fff;	
font-size: 100%}

 #content .entry-summary{
letter-spacing: .3px;	
font-size: 90%}

#content .type-insights img {
transition: 1s;
transition-delay: .2s;	
filter: saturate(0) contrast(1.2);
aspect-ratio: 1/1;
object-fit:cover}

#content .type-insights img.in-view {
filter: saturate(1) contrast(1.2)}

@media only screen and (max-width: 759px) {
	
#content .type-insights li {
box-sizing: border-box;
padding: 0 30px}
	
#content .type-insights div {
order:1}

#content .type-insights img {
margin-top:30px;	
order:0}	
}
@media only screen and (min-width: 760px) {
#content .type-insights img {
width:50%}	
}

#content .quadro-mod.mazeroux .mod-header {
padding: 80px 0 0}

.single #primary .entry-content {
max-width: 100%}

#content h1.archive-title {
text-align: center;	
position: relative;
z-index: 2;	
color:#fff!important}

#content .archive-header {
background:url(https://frog-blog.port80services.com/wp-content/uploads/2023/05/p80.webp);
background-size: cover;
position: relative;
display:flex;
align-items: center;
justify-content:center;
width:100%;
aspect-ratio:16/4;	
box-sizing: border-box;
background-position: center}

.author-will #content .archive-header {
background:url(https://frog-blog.port80services.com/wp-content/uploads/2010/06/488839530808.webp);
background-size: cover;
background-position: center}

.author-matt #content .archive-header {
background:url(https://frog-blog.port80services.com/wp-content/uploads/2010/06/470196980808.webp);
background-size: cover;
background-position: center}

#content .archive-header::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.3);
display: block;
content: ""}

#content .archive-header .author-box {
display: none}

#content .archive-header .archive-title {
display: block}

#content .canvas-content h2 {
font-size: 24px}

#content iframe {
width: 100%;
height:100%;
object-fit:cover;
aspect-ratio:16/9;
box-sizing: border-box}

#content .wp-block-columns.timeline {
position: relative;
align-items:center;	
margin-bottom:0;	
justify-content: space-between}

#content .wp-block-columns.timeline::before{
background: #556B2F;
display:block;	
content: "";
width: 6px;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto}

#content .wp-block-columns.timeline >div.content-col {
background: #556B2F;
border-radius: 8px;	
position: relative;	
flex: initial;
box-sizing: border-box;
width: 45%;
margin: 0;	
padding: 20px}

#content .wp-block-columns.timeline h2{
color:#fff!important;	
text-align: center}

#content .wp-block-columns.timeline p{
font-size: 17px;	
color:#fff!important}

#content .wp-block-columns.timeline img {
transition: 1s;
transition-delay: .5s;
filter: saturate(0) contrast(1.2);
max-width:40%;	
min-width:160px;	
margin:0 auto 30px;
border-radius:100%;	
display:block}

#content .wp-block-columns.timeline img.in-view {
filter: saturate(1) contrast(1.2)}

#content .years-nav {
display: flex;
margin-bottom: 20px;
justify-content: space-between}

#content .years-nav a.yearback::before, #content .years-nav a.yearforwards::after{
content: "\f100";
font-family: "FontAwesome";
display: inline-block;
margin-right: 5px}

#content .years-nav a.yearforwards::after{
content: "\f101";
margin: 0 0 0 5px}

#content .wp-block-columns.timeline >div.is-layout-flow{
margin-bottom: 0px}

#content .wp-block-columns.timeline >div:not(.is-layout-flow){
padding-bottom: 20px}

#content .wp-block-columns.timeline >div.content-col::after{
content: '';
position: absolute;
bottom: -35px;
right: 0;
left:0;	
z-index:4;	
height: 0;
width: 0;
margin:auto;	
border: 20px solid transparent;
border-top-color: #556B2F}

@media (max-width: 781px) {
	
#content .wp-block-columns.timeline .wp-block-button {
margin:0 auto;
display:table}	
	
#content .wp-block-columns.timeline >div:not(.content-col){
display:none}	
	
#post-1918	.canvas-content > div:nth-child(even){
padding:50px 0}
	
#post-1918	.canvas-content > div:last-child{
padding-bottom:0}	
	
#post-1918	.canvas-content > div:last-child  div.content-col::after{
display: none}		
}

@media (min-width: 782px) {
	
#content .wp-block-columns.timeline {
margin-bottom: 0}
	
#content .wp-block-columns.timeline::before{
background: #063E01}
	
#content .wp-block-columns.timeline::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
content: "";
display: block;
height: 60px;
width: 60px; 
border-radius:100%;
border: 10px solid #f5f5f5;
background: #063E01}

#content .wp-block-columns.timeline >div.content-col::after{
content: '';
position: absolute;
bottom: initial;
top:0;	
right: 0;
left:0;	
z-index:4;	
height: 0;
width: 0;
margin:auto;	
border: 20px solid transparent;
border-top-color: #e8e8e8}
	
#content .wp-block-columns.timeline >div.content-col::after{
top: 50%;
transform: translateY(-50%);		
right: -35px;
left: initial;
border-top-color: transparent;
border-left-color: #556B2F}

#content .wp-block-columns.timeline >div.content-col.col-right::after{
right: initial;
left: -35px;
border-color: transparent;	
border-right-color: #556B2F}
}

@media (min-width: 1000px) {
#content .wp-block-columns.timeline >div.content-col {
padding: 40px}	
	
#content .wp-block-columns.timeline img {
shape-outside: circle();
float: left;	
margin:0 40px 20px 0}

		
#content .wp-block-columns.timeline .content-col:not(.col-right) img {
float: right;	
margin:0 0 20px 40px}
	
#content .wp-block-columns.timeline h2{
font-size:36px;
text-align: left}
	
}
 


@media (max-width: 1024px) {
#content .type-wrapper #secondary, .archive #secondary {
display: none}

#content .type-wrapper .modules-wrapper, .archive #primary {
width: 100%}	
}

/* dictionary*/

.page-id-3030 .page-wrapper {
max-width: 100%;
padding: 0}

#dictionary {
background: url(books.webp) no-repeat bottom center #f5f5f5;
position: relative;
background-size: cover}

#dictionary .dark-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg,rgba(0, 0, 0, .9) 50%, rgba(0, 0, 0, 0) 90%);
z-index: 1;}

.container {
padding: 50px 10px;
position: relative;
text-align: center;
z-index: 2}
 

#dictionary h1 {
margin: 20px auto 35px;
color: #fff!important;	
font-size: 30px}

#dictionary h2 {
margin: 20px auto;
font-size: 20px;	
line-height: 145%;	
color: #fff!important;	
max-width: 900px}

#dictionary h1 a img {
max-height: 60px;
position: relative;
top: 18px}

#dictionary #logo {
max-width: 100%;
width: 400px}

#atoz {
list-style: none;
padding: 0;
margin: 20px auto;
justify-content:  center;
display: flex;
flex-wrap: wrap}

#atoz li {
font-size: 16px;
color: #fff;
text-decoration: underline;
cursor: pointer;
transition: all 2.5s .2s cubic-bezier(0.23, 1, 0.32, 1);
padding: 5px 10px;
text-align: center;
opacity: 0.55;
margin: 0 2.5px}

#atoz li:hover, #atoz li.highlighted {
text-decoration: none;
transition: all .7s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2px;
background: rgba(230,230,230,.35);
color: #fff;
opacity: 1}

.wordwrapper {
min-height: 450px}

.ind-letter {
display: flex;
overflow: hidden;
align-items: flex-start;
width:100%;
height: 0;
transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0}

.ind-letter img.close{
position: absolute;
cursor: pointer;
top: 0px;
right: 0px}

.wordwrapper .ind-letter#awords {
opacity: 1;
height: auto}

.wordwrapper .ind-letter.hiddendef, .wordwrapper .ind-letter#awords.hiddendef {
height: 0;
opacity: 0}

.wordwrapper .ind-letter.showndef, .wordwrapper .ind-letter#awords.showndef {
height: auto;
opacity: 1}

ul.definitions {
list-style: none}

ul.definitions li {
line-height: 22px;
padding: 0 50px;
font-size:16px;
letter-spacing: .2px;	
margin-bottom: 16px}

ul.definitions li span {
display: block;
letter-spacing:0;	
color: #7D8E29;
margin: 0;
font: 20px 'Antic Slab', Serif}

.book {
text-align: left;
width: 100%;
min-height: 550px;
box-sizing: border-box;
max-width: 1200px;
margin: auto;
padding: 60px 0;
position: relative;
border: 1px solid #afafaf;
box-shadow: 0 0 6px #000;
background: url(paper.png) repeat}

@media only screen and (min-width: 768px) {
ul.definitions li {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
column-width: 50%}

ul.definitions {
height: 480px;
columns: 2;
-moz-column-fill: auto;
column-fill: auto}

.book::after {
position: absolute;
top: -1px;
left: 50%;
height: calc(100% + 2px);
box-shadow: 0 0 4px #000, 0 0 12px #000, 0 0 30px #222;
display: block;
content: "";
	opacity:.8;
width: 1px;
background: #171717;
filter: blur(1px)}
	

}

/*2016 post header */
.postid-420 #main .entry-header {
background-position: 50% 20%}

/*Bowie quotes*/

html {
height: 100%
}
body.page-id-3123 {
background: #000;
height: 100%}

body.page-id-3123 #page, body.page-id-3123 #content, body.page-id-3123 #main, body.page-id-3123 .page-wrapper, body.page-id-3123 #primary, body.page-id-3123 .type-page, body.page-id-3123 .page-content {
background: #000;
  height: 100%;
  padding: 0;
max-width:100%;	
  margin: 0;
  width: 100%;}

.bowiewrapper {
height: 100%;
transition: background 1s linear;
background: #000 url(images/bg1.jpg) no-repeat;
background-size: cover;
background-position: center center}

.overlay {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  zoom: 1;
  filter: alpha(opacity=55);
  opacity: 0.55;
  z-index: 1}

#text-box {
max-width: 900px;
color: #fff;
z-index: 3;
padding: 5% 30px;
text-align: center;
margin: auto;
position: absolute;
top: 50%;
left: 0;
right: 0;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

#text-box span {
display: block;
color: #dfdfdf;
text-shadow: none;
font-family: "Antic Slab";	
margin-top: 20px;
font-size: 24px}

#text-box p {
line-height: 36px; 
font-size: 36px;
font-family: 'Bilbo';}

@media (min-width: 768px){
#text-box p {
line-height: 50px; 
font-size: 50px}
}
@media (min-width: 1024px){
#text-box p {
line-height: 70px; 
font-size: 70px}
}

p.neonpink {
text-shadow: 1px 1px 1px #000,0 0 10px #ff2d95, 0 0 15px #ff2d95, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 45px #ff2d95;
color: #fff!important}

p.neongreen {
text-shadow: 1px 1px 1px #000,0 0 10px #2dff2d, 0 0 15px #2dff2d, 0 0 20px #2dff2d, 0 0 30px #2dff2d, 0 0 45px #2dff2d;
color: #fff!important}

p.neonpurple {
text-shadow: 1px 1px 1px #000,0 0 10px #2626FF, 0 0 15px #7E00ED, 0 0 20px #7E00ED, 0 0 30px #7E00ED, 0 0 45px #1EE4FF;
color: #fff!important}

p.neonred {
text-shadow: 1px 1px 1px #000,0 0 10px #D30300, 0 0 15px #D30300, 0 0 20px #D30300, 0 0 30px #D30300, 0 0 45px #D30300;
color: #fff!important}

p.neonblue {
text-shadow:1px 1px 1px #000,0 0 10px #1E9999, 0 0 15px #1E9999, 0 0 20px #1E9999, 0 0 30px #1E9999, 0 0 45px #1E9999;
color: #fff!important}

p.burning {
color: #fff!important;
text-shadow: 1px 1px 1px #000,0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;}

/*
p.righeous {
line-height: 60px; 
font-size: 60px;
color: #FC029C;
font-family: 'Righteous';}

p.sigmar {
line-height: 70px; 
font-size: 70px;
font-family: 'Sigmar One';}

p.waler {
line-height: 70px; 
font-size: 70px;
color: #9B0000;
font-family: 'Walter Turncoat';}

p.angerine {
line-height: 70px; 
font-size: 65px;
color: #02CAFC;
font-family: 'bilbo';}

p.reenie {
line-height: 70px; 
font-size: 60px;
font-family: 'Calligraffitti';}
*/

#text-box span.blackstar {
display: block;
font-size: 400px;
line-height: 300px;
color: #000;
text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 45px #1E9999;
}

.page-template-template-centered  #primary, .page-template-template-centered  .page-content {
max-width:100%;
width:1000px}

.page-template-template-centered  .mod-title {
font-size: 46px;
text-align:center;	
line-height: 54px;	
margin-top: 40px}

.page-template-template-centered  #content .page-content p:first-of-type {
color: #063E01;
text-align: center;	
max-width: 700px;
margin: 0 auto 40px; 
font-size: 120%;	
letter-spacing:.3px}

.page-template-template-centered  #content .type-slogan h1 {
color: #fff!important}

.page-template-template-centered  #content a.qbtn {
display:table;
margin:auto}

#content .wp-block-gallery  img{
aspect-ratio:16/12}

div.scrim {
background: rgba(0,0,0,0.9)!important}

.wp-lightbox-overlay.zoom.active .lightbox-image-container img {
object-fit:contain!important}

#content .vid-note {
font-size:85%;
line-height: 135%;
font-style:italic}


.recipe-wrap {
display: flex;
background: #2d2d2d;
background:#556B2F;	
margin-bottom:80px;
justify-content:space-between;
flex-wrap:wrap}

.recipe-wrap > div {
box-sizing: border-box}

#content .recipe-wrap * {
color:#f8f8f8!important}

#content .canvas-content .cocktails h2 {
font-size: 25px;}

.recipe-wrap > div.recipe {
display: flex;
order: 1;
flex-wrap: wrap;	
padding: 10px}


div.recipe .intro{
font-size: 16px;
line-height: normal;	
font-style:italic;}

.recipe-img img {
height: 100%;
display: block;	
width:100%;	
object-fit:cover}

.recipe ul  {
width: 100%;
margin-left:0}

.recipe ul li {
padding: 6px;
  font-size: 16px;
  font-weight: bold;
display: flex;
justify-content:space-between}

.recipe ul li:first-child {
background: rgba(255,255,255,.15);
border:0!important;	
  display: flex;
  align-items: center;
  color: #fff;
  text-transform: uppercase;}

.recipe ul li span{
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 14px;}

.recipe ul li:not(:last-child) {
border-bottom:1px dotted #bbb}


div.recipe .steps{
background: rgba(255,255,255,.15);
margin-top: auto;	
  padding: 10px;
font-size: 15px;
  line-height: normal;}
 

@media (max-width:679px) {
.recipe-img {
aspect-ratio:1.5/1}	
}
	
@media (min-width:680px) and (max-width:1023px) {
.cocktails   {
display:flex;
align-items: stretch;	
justify-content:space-between;	
flex-wrap:wrap	}	

.recipe-wrap   {
width:49%;}	
	

.recipe-img {
width: 100%;	
height:30%}	
	
.recipe {
align-items: flex-start;	
	flex-direction: column;
height:70%}	
	
		
}

@media (min-width:1024px) {
.recipe-wrap   {
width:100%;}	

.recipe-wrap > div {
width:40%;}	
	
.recipe-wrap > div.recipe {
order: 2;
padding: 20px 30px 30px;	
width:60%}
	
#content .canvas-content .cocktails h2 {
font-size: 30px;}

div.recipe .steps{
padding: 20px}	
}
/*
#content .recipe-wrap {
transition: .4s;
filter: saturate(.2)}

#content .recipe-wrap:has(.in-view) {
filter: saturate(1)}

*/

/*Dark mode*/

#masthead  a.dark-mode-btn{
position:relative;	
overflow:hidden;
width: 34px;
  height: 16px;
display:block;
border-radius:20px; 
cursor:pointer;
border: 1px solid #ccc;
background: #ccc;}

#masthead a.dark-mode-btn::after{
display: block;
content: "\f185";
font-family: "FontAwesome";
color:#fff;
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
height: calc(100% - 4px);
width: 40%;
transition: .3s;
background: #353535;
border-radius: 100%;
padding: 3px;
box-sizing: border-box}	

.dark-mode #masthead a.dark-mode-btn {
background: #353535}

.dark-mode #masthead a.dark-mode-btn::after{
transform:translatex(16px)}	

.dark-mode #masthead .site-title img {
filter: brightness(1.3)}


.dark-mode #masthead {
box-shadow: 0 1px 30px 0 rgba(230, 230, 230, 0.20);}

.dark-mode body, .dark-mode #secondary .wp-block-search__label, .dark-mode #secondary h1.widget-title {
color:#ccc!important}

.dark-mode #primary input, .dark-mode #secondary select,.dark-mode #secondary input, .dark-mode #colophon .search-field{
background: #ddd}

.dark-mode #content .posted-on {
background: #3E3E3E}

.dark-mode #content .posted-on time{
color: #7D8E29 !important}

.dark-mode #masthead, .dark-mode #masthead .header-1st-row, .dark-mode #main, .dark-mode #post-1205 {
background:#171717}

.dark-mode #masthead .menu-toggle-icon {
background:#fff!important}

.dark-mode #masthead .menu li a  {
color:#eee}

@media (min-width: 782px) {
.dark-mode  #content .wp-block-columns.timeline::after {
border: 10px solid #171717}
}

.dark-mode #masthead  a.dark-mode-btn {
border-color:#fff}

.dark-mode #masthead a.dark-mode-btn::after{
background:#fff}		

.dark-mode #colophon::before {
background-color:#171717}

.dark-mode #content .type-blog article, .archive.dark-mode #grid article {
background: #333}

.dark-mode #primary .wp-block-heading, .dark-mode.single .entry-content > p:first-child::first-letter, .dark-mode #content h1.mod-title, .dark-mode #content p.modheader-intro, .dark-mode.page-template-template-centered  #content .page-content p:first-of-type  {
opacity:1;
color: #4C8447 !important;}

.dark-mode  .post-navigation a {
color:#9eb52d!important}

.dark-mode .single .nav-links div {
border-top: 3px solid #555;}

.dark-mode .book {
box-shadow: 0 0 6px #000;
border-color: #171717;
background: #171717}

.dark-mode .recipe-wrap {
filter: brightness(.9) contrast(1.2)}