@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
/* https://fonts.google.com/icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons&display=swap');


:root {
    --sectionHeaderHeight: 232px;
    --sectionHeaderBGColor: #000000;
    --sectionFooterHeight: 232px;
    --sectionFooterBGColor: #000;
	--sectionFooterColor: #fff;
    --navigationBGColor: #1d1d1d;
    --navigationTextColor: #999;
    --subnavigationBGColorBAK: #a7a6a6;
    --subnavigationBGColor: #bfbac5;    
    --subnavigationTextColor: #000000;
    --sub2navigationBGColor: #e9e9e9;
    --sub2navigationTextColor: #2b2b2b;
    --subnavigationWidth: 250px;
	--mainBodyBGColor: #f9f4ef/*#f1f1f1*/;
    --mainBodyColor: #464646;
	--mainBodyLinkColor:#000;
    --mainDisplayFontFamily: 'Metamorphous';
	
}

body {
    background-color: var(--mainBodyBGColor);
    color: var(--mainBodyColor);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*background-image: url('/images/background.jpg');*/
    margin: 0;
}


section.header {
    background-color: var(--sectionHeaderBGColor);
    height: var(--sectionHeaderHeight);
    background-image: url('/Images/header-WinterMoonReview.png');
    background-size: cover;
    background-position: top left;
	background-repeat: no-repeat;
    background-color: #000000;
}

section.header h1 {
    padding: 30px;
    color: white;
    font-family: 'Metamorphous', cursive;
    font-weight: 400;
    visibility: hidden;
}

section.navigation {
    background-color: var(--navigationBGColor);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    height: 48px;
    padding: 0 20px;
    z-index: 120;
}

section.navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;
}


/* Main Navigation Tabs */

section.navigation>ul>li>h2 {
    color: var(--navigationTextColor);
    font-size: large;
    font-weight: 500;
    padding: 0 12px;
    margin: 0;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    font-family: var(--mainDisplayFontFamily), cursive;
    font-weight: 400;
}

section.navigation ul>li>h2>a {
    text-decoration: none;
    color: var(--navigationTextColor);
    height: 48px;
    display: block;
    line-height: 48px;
    padding: 0;
}
section.navigation ul>li>h2>a .material-icons{font-size: 36px;line-height: 48px;}

section.navigation>ul>li h2:hover,
section.navigation>ul>li h2:hover a,
section.navigation>ul>li.selected,
section.navigation>ul>li.selected h2 {
    background-color: var(--subnavigationBGColor);
    color: var(--navigationBGColor);
}




/* 2nd Tier Navigation */

section.navigation>ul>li>ul {
    list-style: none;
    margin: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    background-color: var(--subnavigationBGColor);
    padding: 0px;
    z-index: 2;
    transition: height 0.5s;


}


section.navigation>ul>li.selected>ul {
    display: flex;
    flex-direction: column;
    background-color: var(--subnavigationBGColor);
    height: 480px;
    justify-content: center;
    z-index: 3;
    box-shadow: rgb(0 0 0 / 38%) 0px 8px 8px;
}

section.navigation>ul>li>ul>li>h3 {
    font-size: medium;
    font-weight: 600;
    width: 200px;
    margin: 0;
    height: 32px;
    line-height: 32px;
    color: var(--subnavigationTextColor);
    width: calc(var(--subnavigationWidth) - 20px);
    height: 100%;
    cursor: pointer;
    padding: 0 20px;
}

section.navigation>ul>li>ul>li.selected>h3 {
    color: var(--sub2navigationTextColor);
    background-color: var(--sub2navigationBGColor);
}


/* 3rd Tier Navigation */
section.navigation li.subNav2 {
    display: flex;
    flex-direction: row;
    cursor: pointer;
}


section.navigation>ul>li>ul>li>ul {
    display: none;
    flex-direction: column;
    font-size: small;
    font-weight: 400;
    line-height: 24px;
    width: calc(100% - var(--subnavigationWidth));
    color: var(--subnavigationTextColor);
    background-color: var(--sub2navigationBGColor);
    position: absolute;
    left: var(--subnavigationWidth);
    top: 0;
    justify-content: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    height: calc(100% - 40px);
    border-left: 1px solid var(--sub2navigationBGColor)c;
    padding: 20px;
    margin: 0px;

}

section.navigation>ul>li>ul>li>ul li {
    height: 24px;
    line-height: 24px;
    /* width: calc(100% / 8); */
    margin: 0 50px 0 0;
}

section.navigation>ul>li>ul>li>ul li h4 {
    color: rgb(0, 0, 0);
    font-weight: 400;
    margin: 0;
}

section.navigation>ul>li>ul>li>ul a {
    color: inherit;
    text-decoration: none;
}

section.navigation>ul>li>ul>li.selected>ul {
    display: flex;
	flex-wrap: nowrap;
}

section.navigation>ul>li>ul>li.selected>ul.hasSubNav {
    color: #000;
}
.subNav2>ul {
    width: calc(100% - var(--subnavigationWidth));
    margin-left: 250px !important;
    color: green;
    position: absolute;
    top: 0;
    display: none;
}

.subNav2.selected>ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: calc(100% - 40px);
    padding: 20px;
    gap: 0px;
    width: -webkit-fill-available;
	background-color: #f0f0f0;
}

.subNav2.selected>h4 {
    font-weight: 500;
	background-color: #f0f0f0;
}
.subNav2>h4 .material-icons {
    font-weight: normal;
    font-size: 10px;
    padding-right: 4px;
}
/* Tags overrides */

section.navigation ul.tags ul {

    flex-wrap: wrap;
    flex-direction: row !important;

    gap: 20px;
}

section.navigation ul.tags ul li {
    padding: 4px;
    flex-grow: 0;
}

section.navigation ul.tags li a {
    padding: 0 12px;
    background-color: #f8f7e32e;
    border-radius: 8px;
    text-align: center;
}

section.navigation .breadcrumbs {
    position: absolute;
    top: 60px;
    left: 32px;
    font-size: small;
    z-index: 1;
}
section.navigation .breadcrumbs a {
	color:var(--sub2navigationTextColor);
}

section.main {
    background-color: transparent;
    min-height: calc(100% - var(--sectionHeaderHeight) - var(--sectionFooterHeight));
}
/** Hero Content **/
section.hero {
    background-color: transparent;
    height: fit-content;
    /*background: url('img/SB2.jpg') no-repeat top center;
    background-size: cover;*/
}
section.hero h1.welcome.home {
    font-size: 48px;
    color: #000;
    font-family: 'Metamorphous', cursive;
    font-weight: 400;
    text-align: center;
    padding: 0px;
}

/** Page Content **/

section.article {
    background-color: transparent;
    min-height: calc(100% - var(--sectionHeaderHeight) - var(--sectionFooterHeight) );
    max-width: 1560px;
    margin: auto;
	padding: 0 40px;
}
section.article a{
	color:var(--mainBodyLinkColor);
}

section.article h1.welcome {
    font-size: 36px;
    color: #000000;
    text-align: left;
    padding: 30px 0px 0 0;
    font-family: 'Metamorphous', cursive;
    font-weight: 400;
}
section.article h1.welcome.home {
    font-size: 48px;
    text-align: center;
    padding: 0px;
}
section.article .biblio h1.welcome {
    margin: 0 0 0 0;
    line-height: normal;
    padding: 0;
}
section.article h1.welcome:empty {
	display:none
}


section.article .biblio {
    white-space: pre-line;
    margin: 40px 0 20px 0px;
}

section.article .subheading {
    height: 42px;
    line-height: 42px;
    font-family: 'Metamorphous', cursive;
    font-weight: 400;
    font-size: 22px;
    color: white;
    background-color: #5f5567;
    text-align: center;
}
section.article h2.subheading {
    font-family: 'Metamorphous', cursive;
    font-size: 1.25em;
    margin-bottom: .25em;
    color: var(--mainBodyColor);
    background-color:transparent;
    text-align: left;
    font-weight: 600;
}



section.article .clear {clear:both}
section.article div.content-block {
    margin: 0px 0 40px 0;
    padding: 0px;
    /*background-color: #ffffffb5;*/
    font-size: medium;
    color: var(--mainBodyColor);
    text-align: justify;
    line-height: 160%;
}
section.article div.content-block p {
    margin: 0 0 0 0;
	line-height: 160%;
    margin-block-end: 1.25em;
}
section.article div.content-block p.last {
    border: 1px solid;
    padding: 20px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


section.article div.content-block img {
    float: left;
}

section.article div.content-block img:nth-child(even) {
    float: right;
    margin: 0 0 0 20px;
}
section.article div.content-block img {
    float: left;
    margin: 0 20px 0 0;
}
section.article div.content-block img.hero {
    float: right;
    margin: 20px 0 20px 20px;
}

/* Captioned image - Default is Left */

section.article div.content-block .captioned-image{
	float:left;
	margin: 8px  20px 0 0;
    width:min-content;
}
section.article div.content-block .captioned-image.right{
	float:right;
	margin: 8px 0 20px 20px;
}
section.article div.content-block .captioned-image.center{
	float:none;
	margin: 8px  auto;
}
section.article div.content-block .captioned-image img{
	float:none;
    border: 1px solid #ccc;
    padding: 6px;
    margin:0;
}

section.article div.content-block .captioned-image i{
	text-align: center;
	display: block;
    margin: 8px 0 0 0;
}
section.article .tagGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 30px 0;
    padding: 0;
    flex-direction: row;
}

section.article .tagGrid a {
    text-decoration: none;
    display: block;
    width: 0px;
    padding: 6px;
    background-color: #e9e9e9;
    color: #000;
    gap: 6px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-content: space-around;
    align-items: flex-start;
    border: 1px solid #555;
    flex: 0 0 calc(25% - 10px); /* 25% - gap*/
    justify-content: flex-start;
    box-sizing: border-box;
}

section.article .tagGrid a.nolink {
    color: #999;
    cursor:not-allowed;
}
section.article .tagGrid a h4 {
    margin: 0
}
section.article .tagGrid a div.details {
    display: flex;
    flex-direction: column;
}
section.article .tagGrid .tag-title {
    font-weight: 700;
}
section.article .tagGrid .tag-description {
    font-weight: 400;
    font-size: smaller;

}
section.article .tagGrid a img {

    height:96px;
}
section.article .tagGrid a span {
    display: block;
    font-size: medium;
    color: #333;
}

/** Footer **/

section.footer {
    background-color: var(--sectionFooterBGColor);
    min-height: var(--sectionFooterHeight);
	display: flex;
    flex-wrap: nowrap;
    /* align-content: flex-start; */
    justify-content: space-evenly;
    align-items: stretch;
	width:100%;
	
}
section.footer .column {
	padding:20px 40px;
}
section.footer .column p,
section.footer .column label
{
	color:var(--sectionFooterColor)
}
section.footer .column a,
section.footer .column a:link,
section.footer .column a:visited,
section.footer .column a:active,
section.footer .column a:hover{
	color:var(--sectionFooterColor);
    text-decoration: none;
    
}
section.footer .column .site-info{
	font-family: var(--mainDisplayFontFamily);
    white-space: nowrap;
}
section.footer .column .site-info > span.icon{
    display: inline-block;
    height: 64px;
    width: 64px;
    background-image: url(/Images/header-WinterMoonReview.png);
    background-repeat: no-repeat;
    background-position: -54px -67px;
	margin-right: 10px;
	vertical-align: middle;
}
section.footer .column .site-email{
    white-space: nowrap;
}

/** Breadcrumbs **/

/** Page Tags **/

.page-tags {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    justify-content: center;
}

.page-tags a {
    display: block;
    margin: 0;
    text-decoration: none;
    font-size: small;
    color: #ffffff;
    padding: 6px;
    background-color: #7a6a8b;
    border-radius: 6px;

}

/** Posts **/

	#posts{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: stretch;
		align-items: stretch;
		justify-content: space-evenly;

	}
	.post{
		background-color: transparent;
		border: 0px solid #0023ff;
		margin: 0 0 10px 0;
		display: flex;
		align-content: stretch;
		justify-content: space-around;
		flex-wrap: wrap;
		flex-direction: row;

	}
	@media screen and (min-width: 380px) {.post{width:100%; }}
	@media screen and (min-width: 1280px) {.post{width:50%;float:left; }}
	@media screen and (min-width: 1440px) {.post{width:33%;float:left;margin: 0 0 10px 0; }}

	.post-container{background-color:white;margin:0 15px;border:1px solid #ccc}
	.featured-media{max-width:100%;overflow:hidden;position: relative;}
	.featured-media img{max-width:100%!important;width:100%!important;height:auto}
	.post-header{padding:20px 40px}
	.post-header .post-title{font-family: 'Metamorphous', sans-serif;font-size: 1.20em;line-height: 156%;font-weight: 700;color: #2B3542;word-break: break-word;}
		.post-header .post-title a {text-decoration: none;font-size: 1.25em;color:#000}
	.post-excerpt{padding:35px 40px}


	.featured-media:before{content:"";height: 0;width: 0;z-index:111;border: 13px solid transparent;border-top: 10px solid #ffffff;top:0;position: absolute;left: 41px;}
	img.hero {display:block;float:none;margin: 20px 0;}


/** Page Navigation **/

.page-navigation .prev-next {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
}
.page-navigation .prev-next a{
    color:#7a6a8b;

}

/*** Search ***/
.searchform .screen-reader-text{
    display:none;
}
.searchform input{
    height: 42px;
    width: 300px;
    font-size: larger;
}
.searchform .searchsubmit{
    width: 80px;
}
.searchform .searchsubmit-mobile {display:none;}

/******** Affiliate Links *************/
.ads{
	margin: 20px 0;
	gap:20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;+
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}
.ads img {
	max-width: 100%!important;
	height:auto!important;
}

/*** Reponsive **/

@media only screen and (max-width: 1280px) {
	section.article div.content-block img.hero {
		float: none;
		max-width: 100%;
		margin: 20px auto;
	}
}

@media screen and (min-width: 340px) and (max-width: 640px ) {


    section.navigation {
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
    }
    section.navigation>ul{padding:0}
    section.navigation>ul>li {padding:0 4px}
    section.navigation>ul>li.selected>ul{height: fit-content!important;}
    section.navigation>ul>li>h2{
        font-size: 16px;
        padding:0;
    }
    section.navigation>ul>li>ul>li>ul li{
        min-height: 38px !important;
        line-height: inherit !important;
        font-size: large;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        height: auto;
    }
    section.navigation>ul>li>ul>li>h3{
        height: 42px !important;
        line-height: 42px;
        width: 100%;
        /*font-size: 13px;*/
        font-size: large;
        font-weight: 400;
    }
    section.navigation>ul>li>ul>li.selected>ul{
        position: relative;
        left: 0;
        height: fit-content;
        width: 100%;
        padding: 0px 0px 10px 30px;
    }
    section.navigation li.subNav2.selected{
        flex-direction: column;
        height: fit-content !important;
        width: 100%;
    }
    section.navigation .subNav2.selected>ul{
        position: static;
        height: fit-content;
        width: 100%;
        padding: 0px 0px 10px 24px;
        margin: 0 0 0 24px !important;
    
    }
    section.navigation .subNav2.selected>h4{
        width:100%;       
        line-height: 36px;
        height: 36px;
    }
    section.navigation .subNav2.selected>h4 .material-icons{
        font-weight: normal;
        font-size: 19px;
        padding: 0 5px 0 0;
        line-height: 36px;
        vertical-align: middle;
    }

    section.navigation ul>li>h2>a .material-icons{font-size:28px!important;}
    



    section.header{height: auto !important;min-height: 96px;background-size: cover;}
    section.header h1 {margin:0; padding:0;font-size: 36px;}
    section.hero{height: fit-content!important;}
        .slideshow{max-width:100%; height:calc(56.29vw)!important;/*max-height: 100%;height: 100%!important;*/}
        .slideshow .slick-slide {height:calc(56.29vw)}

        .slideshow img{width:100%; max-width:100%; height:auto; /*max-height: 100%;height: 100%!important;*/}
        .slideshow .slick-arrow{display:none!important;}
    section.article{padding:0 20px;}
    section.article .biblio h1.welcome {font-size: 22px;}
    section.article h1.welcome {font-size: 22px;margin-top: 36px;}
    section.article h1.welcome.home{margin:0; padding:20px 0;font-size: 22px;}

    section.article .subheading {font-size: 18px;}
    section.article h2.subheading {line-height: 1.5em;height: fit-content;padding: 0;margin-block-end: 1em; } 
   
    section.article div.content-block .captioned-image,
    section.article div.content-block .captioned-image.right   
    {width:calc(100% - 0px)!important;float:none!important;margin:0 auto 20px auto;}

    section.article div.content-block img {
        width: auto;
        margin: 10px auto !important;
        float: none !important;
        display: block;
    }
    section.article div.content-block .captioned-image img{width: calc(100% - 12px) !important;margin: 0;}


    section.article div.content-block a[href*="amzn.to"],
    section.article div.content-block a[href*="www.amazon.com"]
    {
        display: block;text-align:center;
    }

    section.article #posts .post-header .post-title {font-size: 1.0em; }
    section.article #posts .post-header .post-title a{font-size: 1.0em; }

    section.article .tagGrid {
        flex-direction: column;
    }

    section.article .tagGrid a{
        width: 100%;
    }
    section.article .tagGrid a img {
        height: 60px;
    }
    section.page-navigation .page-tags{flex-wrap: wrap;}
    .page-navigation .prev-next {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
        margin:10px 20px;
    }
    .page-navigation .prev-next p:last-child {text-align: right}

    section.footer {  padding-bottom: 60px; flex-wrap: wrap!important;}
    section.footer .column {padding: 0 20px; width: 100%;}
    section.footer .column br + br {display:none }


    .searchform .search-field {width: 250px;border:1px solid #c0add5; -webkit-appearance: none!important;appearance: none;}
    .searchform .search-field:focus{outline: none;border:1px solid #7a6a8b;}

    .searchform .searchsubmit {width: 90px; background-color: #7a6a8b;color:#fff; border-radius: 25px;-webkit-appearance: none!important;appearance: none;}


    .results {padding:0;width:100%!important;}
    .results li {width:100%!important;flex-wrap: nowrap!important;}
    .results li .tags {flex-wrap: wrap!important;justify-content: left;}
}
@media screen and (min-width: 641px) and (max-width:1279px){
    
    .slick-prev:before, .slick-next:before {
        height: 40px !important;
        font-size: 40px !important;
        line-height: 47px !important;
        color: #ffffff !important;
        opacity: 1 !important;
        background-color: #1d1d1d;
        display: inline-block;
        border-radius: 20px;}

    .slick-next {right: 38px!important; height: 40px !important;}
    .slick-prev {left: 18px!important; height: 40px !important;z-index: 100}
}
@media screen and (max-width:945px){
    section.footer {  padding-bottom: 60px; flex-wrap: wrap!important;}
    section.header{
        background-image: url('img/header-WinterMoonReview-M.png');
        background-position: bottom left;
        height: calc(100vw * 0.2473);
    }
    section.main section.hero .slideshow{width:100%!important; height:calc(56.29vw)!important;}
    section.main section.hero    .slideshow .slick-slide {height:calc(56.29vw)}
    section.main section.hero    .slideshow .slick-slide img{height:calc(56.29vw)}
}




@media screen and (min-width: 1280px) {}
@media screen and (min-width: 1440px) {}