/*
Theme Name: Zentao Classic Custom
Theme URI: https://www.dlkeur.com
Description: A hand-coded, zero-bloat classic theme tailored for DLKeur.
Author: D. L. Keur
Version: 1.0
*/


* {
  box-sizing: border-box;
} 

div {display: block; fill:none;} 

img {
max-width:100%;
height:auto;
}

div {margin:0;padding:0;}

html {
font-size: 100%;
margin: 0 0;
padding: 0 0;
}

body {
overflow-x:hidden;
background-image: url("https://www.dlkeur.com/images/zentaoBG2014_s.png");
background-repeat: repeat-x;
background-color: #000;
background-attachment: fixed;
width: 100%;
height: 100%;
margin: 0 0;
padding: 0 0;
font-family: Arial,Tahoma,sans-serif;
color: #c9a86d; /* #c78f29; #CEA424;  #bf7b2d;*/
word-break: normal;
overflow-wrap: break-word;
line-height: 170%;
font-weight: 100;
text-align:justify;
}



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

/* TEXT */

.fas-external-link {
color:#fff;
content: '\f011';
}
.fas-fa-bars {
color:#fff;
content: '\f0c9';
}

p {
font-size: 1.1rem;
text-align: justify;
}

ol {
font-size: 1.1rem;
text-align: justify;
}

ul {
font-size: 1.1rem;
text-align: justify;
}

blockquote {
font-size: 1.1rem;
text-align: justify;
}


p.light, ol.dark, ul.dark, blockquote.dark {
font-size: 1.1rem;
color: #ccc;
text-align: justify;
}

p.dark ol.dark, ul.dark, blockquote.dark {
font-size: 1.1rem;
color: #000;
text-align: justify;
}

p.little, ol.little, ul.little, blockquote.little {
font-size: .8rem;
text-align: justify;
}

p.smlight, ol.smlight, ul.smlight, blockquote.smlight {
font-size: .8rem;
color: #a9b0b1;
text-align: justify;
}

p.smdark, ol.smdark, ul.smdark, blockquote.smdark {
font-size: .8rem;
color: #566365;
}

li {
padding-bottom: 1.2rem;
line-height: 160%;
}

h1 {
color: #c9a86d;
font-stretch: 50%;
font-weight:400;
} 

h2, h3, h4, h5, h6 {
color: #c9a86d;
font-stretch: 80%;
font-weight:400;
} 

h1 {font-size:2.4rem;font-weight:100;line-height:2.8rem;}
h2 {font-size:2rem;font-weight:100;line-height:2.4rem;}
h3 {font-size:1.8rem;font-weight:100;line-height:2.2rem;}
h4 {font-size:1.6rem;font-weight:bold;line-height:2rem;}
h5 {font-size:1.4rem;font-weight:bold;line-height:1.8rem;}
h6 {font-size:1.2rem;font-weight:bold;line-height:1.6rem;}

.noscript li {
display: inline;
float: right;
margin: 1rem 2rem 0 2rem;
}


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

/* LINKS */

a {color:#CEA424;}
a:visited {color:#CEA424;}

a.dark {color:#1e7481;} /*85bcad 0e5f4e  1e7481*/  /* for light bgs */
a.dark:active {color:#666;}
a.darkt:hover {color:#000;}
a.name {padding-top: 150px;}

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

/* LAYOUT DIVS */

/* pageContainer1 */

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

#pageContainer1 {
margin: 0 auto 0 auto;
padding: 100px 0;
width: 67%;
max-width:1240px;
/*background-color: transparent;*/
background-color: rgb (0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);
}
}

@media screen and (max-width: 900px) {
#pageContainer1 {
margin: 0 auto;
padding: 1% 2%;
width: 94%;
max-width:94%;
/*background-color: transparent;*/
background-color: rgb (0, 0, 0);
background-color: rgba(0, 0, 0, 0.6);

}
}

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

.slider-wrapper {z-index:-1!important;}

#header {
z-index:5;
box-sizing: border-box;
display:inline-block;
position:fixed;
top:0;
/* position: -webkit-sticky; */ /* Safari */
/* position:sticky; */
top:0;
width:100%;
margin:0 0 0 0;
padding: 0 1rem;
background-color: #000;
}

#logo {
margin:0 0 0 0;
padding:0 0 0 0;
width: 100%;
/*background-color: rgba(0, 0, 0, 0.6);*/
}

#topslider {
background-color:#000;
width:100%;
max-width:1240px;
height:auto;
margin: 0 auto;
padding: 0 0;
}

.carousal {
display:block;
margin: 0 auto;
padding: 0 0;
width:100%;
height:auto;
max-width:1240px;
max-height:300px;
}

/* pageContainer2 BEGINS ------ */

@media screen and (min-width: 901px) {
#pageContainer2 {
background-color: rgba(0, 0, 0, 0.6);
margin: 0 auto 0 auto !important; /* margin: -10px auto 0 auto; */
padding: 0 0;
width: 100%;
max-width:1240px;
}
}

@media screen and (max-width: 900px) {
#pageContainer2 {
background-color: rgba(0, 0, 0, 0.6);
margin: 0 auto 0 auto !important; /* margin: -10px auto 0 auto; */
padding: 1% 2%;
width: 100%;
max-width:100%;
}
}

@media screen and (max-width: 1920px) {
#main {
background-color: rgba(0, 0, 0, .8);
width:75%;
margin: 1% auto 6% auto;
padding: 4% 5%;
border: none;
}
}

@media screen and (max-width: 1280px) {
#main {
background-color: rgba(0, 0, 0, .8);
width:75%;
margin:  1% auto 6% auto;
padding: 3% 5%;
border: none;
}
}

@media screen and (max-width: 900px) {
#main {
background-color: rgba(0, 0, 0, .8);
width:100%;
margin:  1% auto 6% auto;
padding: 2% 3%;
border: none;
}
}



#page-title {
width:100%;
background-color: #f3f5f5; /*#c8dad4;*/
margin: 0 auto !important;
padding: 1%;
text-align:center;
width:100%;
border-top: 1px solid #dbe4e5;
border-bottom: 1px solid #dbe4e5;
}

#page-title h1 {font-weight: lighter;line-height:2.4rem;}

/*#main {
display:inline-block;
width:98%;
margin: 1% 1%;
padding: 1% 1%;
border: 1px solid #ccc;
}*/

#footer {
background-color: rgba(0, 0, 0, 0.9);
position:sticky;
bottom:0px;
/* left:0px; */
width:100%;
margin: 0 0 !important;
padding: 0.2% 1% 0.2% 1%;
border-top: 1px solid #333;
}

#subfooter {
/*display:inline-block;*/
width:100%;
margin: 0 0 0 0 !important;
padding: 1% 1%;
background-color: rgba(0, 0, 0, 0.6);
}

#sidebar {
float:right;
/*display:inline-block;*/
width:400px;
margin: 0 0;
padding: 1% 1%;
}


.slider {
margin: 0 auto;
width: 100%;
max-width: 333px;
height: auto;
max-height: 500px;
}

@media screen and (min-width: 901px) {
.article1 {
  column-count: 2;
  column-gap: 2rem;
}
}


@media screen and (min-width: 901px) {
.section1 {
display:inline-block;
margin:0 0;
padding:1rem 1rem;
width: 100%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.section1 {
width: 100%;
margin:0 0;
padding:1rem 1rem;
}
}


@media screen and (min-width: 901px) {
.section2 {
display:inline-block;
margin:0 0;
padding:1rem 1rem;
width: 100%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.section2 {
width: 100%;
margin:0 0;
padding:1rem 1rem;
}
}



@media screen and (max-width: 900px) {
.article1 {
  column-count: 1;
}
}

@media screen and (min-width: 901px) {
#article {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 1rem;
width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
#article {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 1rem;
  }
}

@media screen and (min-width: 901px) {
#section {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 1rem;
width: 50%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
#section {
width: 100%;
margin:0 0;
padding:1rem 1rem;
}
}


#aside {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 1rem;
width: 25%;
}


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

/* TOPNAV RESPONSIVE */

/*.topnav {
  display: inline;
  overflow: hidden;
  background-color: #fff;
}*/



@media screen and (min-width: 901px) {
.topnav {
float:left;
overflow: hidden;
background-color: transparent;
width: 100%;
margin:0 0 0 0; /* margin-top: 0; */
text-align: right;
}
}

@media screen and (max-width: 900px) {
.topnav {
float:left;
overflow: hidden;
background-color: transparent;
width: 100%;
margin:0 0; /* margin-top: 0; */
text-align: right;
}
}

.topnav a {
float: left;
display: inline-block;
color: #CEA424;
text-align: right;
padding: 2rem 1rem 1rem 1rem;
text-decoration: none;
font-size: 1.2rem;
}

/* .topnav a:hover {
  color: #99210c;
}

.active {
  color: #ccc;
}
*/

.topnav .icon {
  display: none;
}

@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


@media screen and (min-width: 901px) {
.site-info {
float:left;
width: 50%;
padding:0;
margin:0;
}
}

@media screen and (max-width: 900px) {
.site-info {
float:none;
width: 100%;
padding:0;
margin:0;
}
}

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

/* FOOTNAV RESPONSIVE */

/*.topnav {
  display: inline;
  overflow: hidden;
  background-color: #fff;
}*/

@media screen and (max-width: 900px) {
.footnav {
float:right;
overflow: hidden;
background-color: transparent;
width: 100%;
padding-bottom: 0;
margin-bottom: 0;
margin-top: 1rem;
text-align: right;
}
}
@media screen and (min-width: 901px) {
.footnav {
float:right;
overflow: hidden;
background-color: transparent;
width: 50%;
padding-bottom: 0;
margin-top: 1rem;
margin-bottom: 0;
text-align: right;
}
}
.footnav a {
  float: right;
  display: inline-block;
  color: #1e73be;
  text-align: center;
margin:0;
  padding: 0 1.1rem 0 1.1rem;
  text-decoration: none;
  font-size: .8rem;
}

.footnav a:hover {
  color: #fff;
}

.active {
  color: #fff;
}

.footnav .icon {
  display: none;
}

@media screen and (max-width: 900px) {
  .footnav a:not(:first-child) {display: none;}
  .footnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .footnav.responsive {position: relative;}
  .footnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .footnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

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

.logo {min-width:100px;height:auto;} /* width:235px;height:100px;max-width:235px;max-height:100px; */

.site-title {font-variant:small-caps;font-size:3rem;padding-top:2rem;}


.row {
display:grid;}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

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

/* AUTOMATED SLIDESHOW */

.mySlides {display: none;}
img.sldshw {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


/* ACCORDIAN -------------------------------------------------------------------------------------------------------------- */

.accordion {
  background-color: #111;
  color: #ccc;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: justify;
  outline: none;
  font-size: 1.1rem;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #333;
}

.panel {
  padding: 0 18px;
  background-color: #000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* ZOOM ------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 901px) {
img.zoom {
background: #fff;
margin: 0 auto;
padding:1rem 1rem;
border:1px solid #ccc;
transition: transform .2s; /* Animation */
}
}

@media screen and (max-width: 900px) {
img.zoom {
background: #fff;
text-align: center;
margin: 0 auto;
padding:1rem 1rem;
border:1px solid #ccc;
transition: transform .2s; /* Animation */
}
}

@media screen and (min-width: 901px) {
img.zoom:hover {
background: #fff;
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari */
  transform: scale(2);
margin-left: 3rem;
margin-right: 3rem;
}
}

@media screen and (max-width: 900px) {
img.zoom:hover {
background: #fff;
text-align: center;
margin: 0 auto;
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari */
  transform: scale(1);
}
}

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

/* CLASSES ONE-HALF, ONE-THIRD, ONE-FOURTH, ONE-FIFTH, TWO-THIRDS, THREE-FOURTHS, TWO-FIFTHS, THREE-FIFTHS, FOUR-FIFTHS */

/* ONE-HALF */

@media screen and (min-width: 901px) {
.one-half {
display:inline-block;
fill:none;
background-color:transparent;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 50%;
}
}

@media screen and (max-width: 900px) {
.one-half {
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* ONE-THIRD */

@media screen and (min-width: 901px) {
.one-third {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 33.33%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.one-third {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* ONE-FOURTH */

@media screen and (min-width: 901px) {
.one-fourth {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 25%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.one-fourth {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* ONE-FIFTH */

@media screen and (min-width: 901px) {
.one-fifth {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 20%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.one-fifth {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* TWO-THIRDS */

@media screen and (min-width: 901px) {
.two-thirds {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 66.67%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.two-thirds {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* THREE-FOURTHS */

@media screen and (min-width: 901px) {
.three-fourths {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 75%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.three-fourths {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* TWO-FIFTHS */

@media screen and (min-width: 901px) {
.two-fifths {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 40%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.two-fifths {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* THREE-FIFTHS */

@media screen and (min-width: 901px) {
.three-fifths {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 60%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.three-fifths {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}

/* FOUR-FIFTHS */

@media screen and (min-width: 901px) {
.four-fifths {
display:inline-block;
float:left;
margin:0 0;
padding:1rem 3rem;
width: 80%;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
.four-fifths {
/*background-color:red;*/
width: 100%;
margin:0 0;
padding:1rem 3rem;
  }
}


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

/* MAXBUTTON */

.maxbutton-2.maxbutton.maxbutton-gathering-purchase-button {
    position: relative !important;
    text-decoration: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    border-color: #000 !important;
    width: 260px !important;
    height: 30px !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-style: solid !important;
    border-width: 2px !important;
    background: rgba(30, 115, 190, 1) !important;
    -pie-background: linear-gradient(rgba(30, 115, 190, 1) 45%, rgba(122, 159, 191, 1)) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(30, 115, 190, 1)), color-stop(1, rgba(122, 159, 191, 1))) !important;
    background: -moz-linear-gradient(rgba(30, 115, 190, 1) 45%, rgba(122, 159, 191, 1)) !important;
    background: -o-linear-gradient(rgba(30, 115, 190, 1) 45%, rgba(122, 159, 191, 1)) !important;
    background: linear-gradient(rgba(30, 115, 190, 1) 45%, rgba(122, 159, 191, 1)) !important;
    -webkit-box-shadow: 0px 0px 2px 0px #fff !important;
    -moz-box-shadow: 0px 0px 2px 0px #fff !important;
    box-shadow: 0px 0px 2px 0px #fff !important;
}


.maxbutton-2.maxbutton.maxbutton-gathering-purchase-button:hover {
    border-color: #0a0a0a !important;
    background: rgba(255, 255, 255, 1) !important;
    -pie-background: linear-gradient(rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1)) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(255, 255, 255, 1)), color-stop(1, rgba(255, 255, 255, 1))) !important;
    background: -moz-linear-gradient(rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1)) !important;
    background: -o-linear-gradient(rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1)) !important;
    background: linear-gradient(rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1)) !important;
    -webkit-box-shadow: 0px 0px 2px 0px #fff !important;
    -moz-box-shadow: 0px 0px 2px 0px #fff !important;
    box-shadow: 0px 0px 2px 0px #fff !important;
}

.maxbutton-2.maxbutton.maxbutton-gathering-purchase-button:hover .mb-text {
    color: #1e73be !important;
}

.maxbutton-2.maxbutton.maxbutton-gathering-purchase-button .mb-text {
    color: #fff !important;
    font-family: Tahoma !important;
    font-size: 15px !important;
    text-align: center !important;
    font-style: normal !important;
    font-weight: normal !important;
    padding-top: 8px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    line-height: 1em !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: unset !important;
}

.maxbutton-1.maxbutton.maxbutton-buy-button {
    /*position: relative !important;*/
    text-decoration: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    border-color: #4c1900 !important;
    width: 80px !important;
    height: 38px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-style: solid !important;
    border-width: 1px !important;
    background: rgba(201, 94, 40, 1) !important;
    -pie-background: linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(201, 94, 40, 1)), color-stop(1, rgba(10, 10, 10, 1))) !important;
    background: -moz-linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    background: -o-linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    background: linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    -webkit-box-shadow: 0px 0px 2px 0px #333 !important;
    -moz-box-shadow: 0px 0px 2px 0px #333 !important;
    box-shadow: 0px 0px 2px 0px #333 !important;
}

.maxbutton-2.maxbutton.maxbutton-series-buy-button {
    /*position: relative !important;*/
    text-decoration: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    border-color: #4c1900 !important;
    width: 120px !important;
    height: 50px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-style: solid !important;
    border-width: 1px !important;
    background: rgba(201, 94, 40, 1) !important;
    -pie-background: linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(201, 94, 40, 1)), color-stop(1, rgba(10, 10, 10, 1))) !important;
    background: -moz-linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    background: -o-linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    background: linear-gradient(rgba(201, 94, 40, 1) 45%, rgba(10, 10, 10, 1)) !important;
    -webkit-box-shadow: 0px 0px 2px 0px #333 !important;
    -moz-box-shadow: 0px 0px 2px 0px #333 !important;
    box-shadow: 0px 0px 2px 0px #333 !important;
}

.maxbutton-1.maxbutton.maxbutton-buy-button .mb-text {
    color: #e2e2e2 !important;
    font-family: Tahoma !important;
    font-size: 15px !important;
    text-align: center !important;
    font-style: normal !important;
    font-weight: bold !important;
    padding-top: 12px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    line-height: 1em !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: unset !important;
}


.maxbutton-2.maxbutton.maxbutton-series-buy-button .mb-text {
    color: #e2e2e2 !important;
    font-family: Tahoma !important;
    font-size: 15px !important;
    text-align: center !important;
    font-style: normal !important;
    font-weight: bold !important;
    padding-top: 11px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    line-height: 1em !important;
    box-sizing: border-box !important;
    display: block !important;
    background-color: unset !important;
}

.maxbutton-1.maxbutton.maxbutton-buy-button:hover {
    border-color: #6b1100 !important;
    background: rgba(201, 67, 0, 1) !important;
    -pie-background: linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(201, 67, 0, 1)), color-stop(1, rgba(33, 33, 33, 1))) !important;
    background: -moz-linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    background: -o-linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    background: linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    -webkit-box-shadow: 0px 0px 2px 0px #333 !important;
    -moz-box-shadow: 0px 0px 2px 0px #333 !important;
    box-shadow: 0px 0px 2px 0px #333 !important;
}

.maxbutton-1.maxbutton.maxbutton-buy-button:hover .mb-text {
    color: #fff !important;
}

.maxbutton-2.maxbutton.maxbutton-series-buy-button:hover {
    border-color: #6b1100 !important;
    background: rgba(201, 67, 0, 1) !important;
    -pie-background: linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(201, 67, 0, 1)), color-stop(1, rgba(33, 33, 33, 1))) !important;
    background: -moz-linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    background: -o-linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    background: linear-gradient(rgba(201, 67, 0, 1) 45%, rgba(33, 33, 33, 1)) !important;
    -webkit-box-shadow: 0px 0px 2px 0px #333 !important;
    -moz-box-shadow: 0px 0px 2px 0px #333 !important;
    box-shadow: 0px 0px 2px 0px #333 !important;
}

.maxbutton-2.maxbutton.maxbutton-series-buy-button:hover .mb-text {
    color: #fff !important;
}

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

/* -- The Popover / Dropdown Blurb -- */

/* Style the clickable link */
details.blurb-drop summary {
    color: #c9a86d;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    margin-bottom: 0.5rem;
}

details.blurb-drop summary:hover {
    text-decoration: underline;
}

/* Style the text box that reveals itself */
details.blurb-drop .blurb-content {
    background: #111; /* Slightly lighter than pure black for contrast */
    padding: 1rem;
    border-left: 2px solid #c9a86d;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}



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

/* TABLE */

table {
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
}



td {
    display: table-cell;
    padding: 5px 20px;
}

tr:nth-child(odd) {
  background-color: rgba(80, 80, 80, 0.3)
}


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

/* BOOKS BY GENRE SECTION */

.bookrow {
display:inline-block;
margin: 1rem 2rem; /* margin: 8px -16px; */
}

.bookrow {
display:inline-block;
/*  margin: 1rem 2rem; margin: 8px -16px; */
}

/* Add padding BETWEEN each column (if you want) */
.bookrow,
.bookrow > .genre {
display:inline-block;
padding: 1rem; /* 8px; */
}

.bookrow:after {
  content: "";
  display: table;
  clear: both;
}

.authorprofile:after {
  content: "";
  display: table;
  clear: both;
}

.authorbkrow:after {
  content: "";
  display: table;
  clear: both;
}

.genre {
display: none; /* Hide columns by default */
}

.show {
display: inline-block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn:active {
  background-color: #666;
   color: white;
}

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

/* MODAL */


/* <style id='modalcss-inline-css' type='text/css'> */

		.modal .modal-backdrop,
		.modal {
          background: rgba(0,0,0,0.5);
        }
        .modal .modal-backdrop.in {
          opacity: 0.99607843202;
        }
        .modal-dialog .modal-content .close {
          color: #ffffff;
		  background: rgba(0,0,0,1);
		  opacity: 1;
		  text-shadow: none;
		  position: absolute;
		  right: -15px;
		  top: -15px;
        }
        .modal-dialog .modal-content .close:hover {
          color: #ffffff;
		  background: rgba(0,0,0,.5);
		  border: none;
		}
		.modal-dialog .modal-title {
			color: rgba(0,0,0,1);
		}
        .modal-dialog .modal-content {
          color: rgba(0,0,0,1);
          background: rgba(255,255,255,1);
		}
		.modal-dialog .modal-header{
			text-align:center;
			position: relative;
		}
        .modal-dialog {
          text-align:left;
        }
        .modal-dialog .modal-footer {
          text-align:center;
		}
		.admin-bar  .modal.in .modal-dialog {
			top: 46px;
		}
		@media screen and (min-width: 783px) {
			.admin-bar  .modal.in .modal-dialog {
				top: 32px;
			}
		}
        
		.modal-dialog .modal-header {
		  border-bottom: none;
        }
        .modal-dialog .modal-footer {
          border-top: none;
        }
        
/* ---toggle-------------------------------------------- */
/* ------------ */
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

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

/* Force your exact, original Zentao fixed background matrix across all system wrappers */
html, 
body, 
.wp-site-blocks, 
.site-header, 
.site-footer, 
div[class^="wp-block-"] {
    background-color: #000000 !important;
    background-image: url("https://www.dlkeur.com/images/zentaoBG2014_s.png") !important;
    background-repeat: repeat-x !important;
    background-attachment: fixed !important;
    background-position: center top !important;
}

/* Your signature semi-transparent reading canvas */
#pageContainer2 {
    background-color: rgba(0, 0, 0, 0.6) !important; /* Lets the background gradient whisper through */
    background-image: none !important;
    max-width: 1200px !important;
    width: 95% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Ensure the text wrappers don't paint flat black blocks over your opacity */
.entry-content, 
.entry-content > *, 
.post, 
article {
    background-color: transparent !important; /* Strips out the solid black blocks */
    background-image: none !important;
    color: #dbb065 !important;
}



/* ==========================================================================
   APPLE SAFARI MOBILE FIXES (Paste this at the very bottom of the file)
   ========================================================================== */
html, 
body, 
.wp-site-blocks, 
.site-header, 
.site-footer, 
div[class^="wp-block-"] {
    background-color: #000000 !important;
    background-image: url("https://www.dlkeur.com/images/zentaoBG2014_s.png") !important;
    background-repeat: repeat-x !important;
    background-position: center top !important;
    background-attachment: scroll !important; 
    -webkit-background-size: contain !important;
    background-size: contain !important;
}

@media screen and (min-width: 1025px) {
    html, body {
        background-attachment: fixed !important;
    }
}

#pageContainer2 {
    background-color: rgba(0, 0, 0, 0.6) !important;
    background-image: none !important;
    max-width: 1200px !important;
    width: 95% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}

.entry-content, 
.entry-content > *, 
.post, 
article {
    background-color: transparent !important;
    background-image: none !important;
    color: #dbb065 !important;
    -webkit-text-size-adjust: 100% !important;
}


/* ==========================================================================
   THE ZENTAO KINETIC FLIP CARD MATRIX 
   ========================================================================== */

/* The outer frame establishing the 3D space perspective */
.book-card {
    background-color: transparent;
    width: 300px;         /* Set this to your preferred display width for covers */
    height: 450px;        /* Set this to your preferred display height */
    perspective: 1000px;  /* Creates the optical illusion of depth when spinning */
    margin: 20px auto;
    cursor: pointer;
}

/* The actual engine that spins */
.book-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Elegant human-paced speed */
    transform-style: preserve-3d;
}

/* DESKTOP HOVER: Spins the inner card when a mouse glides over it */
@media (hover: hover) {
    .book-card:hover .book-card-inner {
        transform: rotateY(180deg);
    }
}

/* MOBILE TAP: Spins the inner card when tapped on a touch screen */
.book-card.flipped .book-card-inner {
    transform: rotateY(180deg);
}

/* Anchor both faces flat against each other back-to-back */
.book-card-front, .book-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Apple Safari Mobile Fix */
    backface-visibility: hidden;
    border-radius: 4px;
    overflow: hidden;
}

/* FRONT FACE: Fits your cover art perfectly */
.book-card-front {
    background-color: #000000;
}
.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* BACK FACE: The smoky canvas for the blurb and target button */
.book-card-back {
    background-color: rgba(0, 0, 0, 0.9) !important; /* Slightly deeper smoke for legibility */
    border: 1px solid #dbb065;                       /* Subtle gold perimeter ring */
    color: #dbb065;
    transform: rotateY(180deg);                      /* Starts flipped around so it faces the correct way when spun */
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Formatting for the inner blurb text */
.blurb-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #a9b0b1;
    text-align: left;
    overflow-y: auto; /* Allows long blurbs to scroll smoothly inside the card if needed */
    margin-bottom: 15px;
}

/* The Amazon Action Link */
.buy-button {
    background: #dbb065;
    color: #000000 !important;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 0.85rem;
    border-radius: 3px;
    transition: background 0.3s;
}
.buy-button:hover {
    background: #f1c473;
}

/* ==========================================================================
   THE ZENTAO THEME SKIN FOR THE NEWSLETTER PLUGIN FORMS
   ========================================================================== */

/* The entire form background wrapper */
.tnp-subscription, 
.tnp-subscription-minimal,
.tnp {
    background-color: transparent !important; 
}

/* Force the Input Fields (Email, Name) to match your smoky translucent look */
.tnp-subscription input[type=email], 
.tnp-subscription input[type=text],
.tnp-field input {
    background-color: rgba(0, 0, 0, 0.6) !important; /* Your signature 60% smoke */
    border: 1px solid #dbb065 !important;           /* Bound by your elegant gold */
    color: #dbb065 !important;                       /* Pure gold text typing */
    font-family: 'Courier New', Courier, monospace !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Ensure the typing caret and placeholder text aren't lost in the dark */
.tnp-subscription input::placeholder {
    color: #888888 !important;
}

/* Force the Subscribe/Submit Button to match your classic layout action style */
.tnp-subscription input[type=submit],
.tnp-subscription button {
    background-color: #dbb065 !important;            /* Flat gold base button */
    color: #000000 !important;                       /* Stark black button text */
    border: none !important;
    font-weight: bold !important;
    padding: 12px 25px !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}

/* Elegant desktop hover reaction for the form button */
.tnp-subscription input[type=submit]:hover,
.tnp-subscription button:hover {
    background-color: #f1c473 !important;            /* Lighter bright gold flare */
}


/* ==========================================================================
   THE ZENTAO OVERRIDE FOR THE BLINDING WHITE POPUP BOX
   ========================================================================== */

/* Target the main background box of the Newsletter popup overlay */
div[id^="tnp-popup"], 
.tnp-popup-box, 
.tnp-popup-content,
#tnp-popup-wrapper {
    background-color: #000000 !important;             /* Kill the white, force flat black */
    background-image: none !important;
    border: 2px solid #dbb065 !important;             /* Frame it in your signature gold */
    box-shadow: 0 0 20px rgba(219, 176, 101, 0.3) !important; /* Give it a subtle gold glow instead of a harsh drop shadow */
}

/* Force the field labels (First name, Last name, Email) to turn gold so they are visible on black */
div[id^="tnp-popup"] label,
.tnp-popup-box label,
.tnp-popup-content label {
    color: #dbb065 !important;
    font-family: 'Courier New', Courier, monospace !important;
}

/* Force the little close "X" at the top right to turn gold instead of dark grey */
div[id^="tnp-popup"] .tnp-popup-close,
.tnp-popup-box .tnp-close,
.tnp-popup-close-button {
    color: #dbb065 !important;
    opacity: 1 !important;
}


/* ==========================================================================
   THE ULTIMATE NEWSLETTER POPUP NUCLEAR OVERRIDE
   ========================================================================== */

/* Target the absolute root containers of the plugin's popup extension */
div.tnp-popup,
div.tnp-popup-overlay,
div.tnp-popup-box,
div[id^="tnp-popup-"] {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 2px solid #dbb065 !important;
}

/* Force every structural nested div inside the popup to drop white backgrounds */
div.tnp-popup div,
div.tnp-popup-box div,
.tnp-popup-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* Force text labels and checkboxes to light gold so you can read them */
div.tnp-popup label,
div.tnp-popup form,
div.tnp-popup p,
div.tnp-popup span,
.tnp-popup-content text {
    color: #dbb065 !important;
}
/* BLOG TITLE */
h1.entry-title {margin-top: 4em !important;}

/* Force the central main container to never shrink below a clear floor */
#main {
    min-height: 75vh !important;
}