/*
|| SC Eston - CSS
|| 2014-06-23 Steve Chiasson
|| 2020-08-27 Steve Chiasson
*/

/* Tags */
html { background-color: #222; padding: 0; margin: 0; font-family: 'Muli', Georgia, Times, serif; }
body { background-color: #222; padding: 0; margin: 0; font-family: 'Muli', Georgia, Times, serif; }
h1 { color: #336945; font-family: 'Philosopher', sans-serif; font-weight: 400; font-size: 250%; margin: 10px 25px 25px 25px; text-align: center; border: 0px; }
h2 { color: black; font-family: 'Philosopher', sans-serif; font-weight: 500; font-size: 160%; line-height: 160%; margin: 15px 25px 15px 25px; }
h3 { color: #222; font-family: 'Philosopher', sans-serif; font-weight: 400; font-size: 125%; line-height: 125%; margin: 15px 25px 15px 25px; }
h4 { font-family: 'Philosopher', sans-serif; font-size: 110%; margin: 15px 25px 15px 25px; font-weight: normal; }
p, ol, ul, q, blockquote, form { font-family: 'Muli', sans-serif; font-size: 100%; line-height: 150%; margin: 0 25px 10px 25px; }
blockquote { font-style: italic; }
p { text-align: justify; }
q { font-style: italic; }
a { color: #336945; }
label {  color: #334477; font-family: 'Philosopher', sans-serif; font-size: 115%; }
hr { margin: 25px; border-top: 1px gray; }

/* Custom SC */
.story-series { font-size: 80%; color: gray; }

/* General */
.clear-all { clear: both; }
.justify { text-align: justify; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.right-to-center { text-align: right; }
.small-caps { font-variant: small-caps; }
.no-dec { text-decoration: none; }
.img-right { float: right; margin: 20px; }
.img-left { float: left; margin: 0 20px 5px 0; }
.hide { display: none; }

/* Layout, Columns and Boxes */
  .main-col-10 { float: left; width: 10%; }
  .main-col-80 { float: left; width: 80%; }
  .img-90 { width: 90%; }
  .col-10 { float: left; width: 10%; }
  .col-20 { float: left; width: 20%; }
  .col-25 { float: left; width: 25%; }
  .col-33 { float: left; width: 33%; }
  .col-40 { float: left; width: 40%; }
  .col-50 { float: left; width: 50%; }
  .col-50-search { float: left; width: 50%; border-top: 1px dotted gray; padding-top: 5px; }
  .col-60 { float: left; width: 60%; }
  .col-66 { float: left; width: 66%; }
  .col-70 { float: left; width: 70%; }
  .col-75 { float: left; width: 75%; }
  .col-80 { float: left; width: 80%; }
  .col-90 { float: left; width: 90%; }
  .row:after { content: ""; display: table; clear: both; }  /* Clear floats after the columns */
  .box-white { outline: none; width: 100%; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); border-radius: 20px; background-color: white; margin: 25px 0px; padding: 25px 0px; }
    .sc-date { text-align: center; color: gray; font-size: 90%; font-variant: small-caps; margin: 10px; 0px; }
  .box-grey { outline: none; width: 100%; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); border-radius: 20px; background-color: #eee; margin: 25px 0px; padding: 25px 0px; }
  .box-black { outline: none; width: 100%; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); border-radius: 20px; background-color: #222; margin: 25px 0px; padding: 25px 0px; }
    .box-black h1, .box-black h2, .box-black h4 { color: white; }
    .box-black p, .box-black blockquote, .box-black ol, .box-black ul, .box-black q { color: white; }
	.goodreads-rating { text-align: center; font-size: 150%; }
    .star-on { color: orange; }
    .star-off { color: gray; }
    .box-black a { color: #8DD3A3; }
  .box-dark { outline: none; width: 100%; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); border-radius: 5px; background-color: #444; margin: 15px 0px; padding: 5px 0px; }
    .box-dark h4, .box-dark p, .box-dark blockquote, .box-dark ol, .box-dark ul, .box-dark q { color: #ccc; }
    .box-dark blockquote { text-align:center; }
    
  /* Comments */
  .box-comment { font-size: 90%; padding: 10px 0px; margin: 5px 50px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); border-radius: 5px; border: 1px solid gray; }
    .box-comment-reply { font-size: 90%; padding: 10px 0px; margin: 5px 50px 5px 100px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); border-radius: 5px; border: 1px solid gray; }
    .box-comment-user { border-bottom: 1px dotted grey; }
    .comment-reply { text-align: right; font-family: 'Muli', sans-serif; font-size: 90%; line-height: 150%; margin: 10px 25px 0px 25px; }
    .comment-success { font-size: 125%; font-weight: bold; color: #7FA0F4; }
  
/* Buttons */
  .bt-get { font-variant: small-caps; background-color: #336945; border-radius: 20px; width: 70%; line-height: 250%; margin: 10px 0px; display: inline-block; color: white; text-decoration: none; text-align: center; }
    .bt-get:visited { color: white; text-decoration: none; }
    .bt-get:hover, .bt-get:active { background-color: #aaa; color: black; text-decoration: underline; }
  .bt-soon { font-variant: small-caps; background-color: #AD3434; border-radius: 20px; width: 70%; line-height: 250%; margin: 10px 0px; display: inline-block; color: white; text-decoration: none; text-align: center; }
    .bt-soon:visited { color: white; text-decoration: none; }
    .bt-soon:hover, .bt-soon:active { background-color: #aaa; color: black;text-decoration: underline; }
  .bt-read { font-variant: small-caps; background-color: #3367AF; border-radius: 20px; width: 70%; line-height: 250%; margin: 10px 0px; display: inline-block; color: white; text-decoration: none; text-align: center; }
    .bt-read:visited { color: white; text-decoration: none; }
    .bt-read:hover, .bt-read:active { background-color: #aaa; color: black; text-decoration: underline; }

/* Header */
  .sc-header { background-image: url(images/bg1.jpg); background-repeat: repeat; background-position: left center; margin: 0px; padding: 40px; border-bottom: 1px solid white; }
  .sc-header-title { font-family: 'Quicksand', sans-serif; font-size: 400%; color: white; text-align: left; }
    .sc-header-title a { text-decoration: none; color: white; }
  .sc-header-titlesub { font-family: 'Quicksand', sans-serif; font-size: 100%; color: #ddd; text-align: left; }
    .sc-header-titlesub a { text-decoration: none; color: white; }

/* Top Menu */
  .topnav { background-color: #333; overflow: hidden; font-family: 'Quicksand', sans-serif; }
  .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }
  .topnav a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; }
  .topnav a.active, .dropdown button.active { background-color: #336945; color: white; }
  .topnav .icon { display: none; } 
  .dropdown { float: left; overflow: hidden; }
  .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }
  .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
  .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
  .dropdown-content a:hover { background-color: #ddd; color: black; }
  .dropdown:hover .dropdown-content { display: block; }

/* Footer */
  .sc-footer-title { font-family: 'Quicksand', sans-serif; font-size: 35px; color: #ccc; padding:0px; margin:0px 0px; text-align: center; }
  .sc-footer-titlesub { font-family: 'Quicksand', sans-serif; font-size: 10px; color: #aaa; padding:0px; margin:0px 0px 20px 0px; text-align: center; }
  .sc-footer-bar { border-top: 1px #777 solid; }
  .sc-footer-text { font-family: 'Quicksand', sans-serif; padding-top: 10px; text-align: center; font-size: 75%; color: #777; }
  .sc-footer-text a { text-decoration: none; }
  .sc-footer-text a:link, .sc-footer-text a:visited { color: #777; }
  .sc-footer-text a:hover, .sc-footer-text a:active { color: #CCC; }

/* Stories */
  .sc-stories-series-entry { list-style-type: none; }

/* Newsletter */
  .sc-newsletter-text { width: 90%; font-size: 100%; padding: 15px; margin: 5px 0px; display: inline-block; border: none; background: #f1f1f1; }
  .sc-newsletter-submit { width: 100%; font-size: 100%; padding: 15px; margin: 5px 0px; display: inline-block; border: none; background-color: #4CAF50; color: white;  cursor: pointer; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
  .sc-newsletter-submit:hover { background-color: #ddd; color: black;  }

/* Progress Bars */
  * {box-sizing:border-box}
  .bar { margin: 10px 20px; }
  .bar-h4 { margin: 5px 0px; font-variant: small-caps; }
  .bar-bg { width: 100%; background-color: #ddd; }
  .bar-format { text-align: right; padding: 10px; color: white; }
  .bar-100 { width: 100%; background-color: #3369C8; } /* colors: blue #3369C8, green #336945, red #C86945 */
  .bar-90 { width: 90%; background-color: #3369C8; }
  .bar-80 { width: 80%; background-color: #3369C8; }
  .bar-70 { width: 70%; background-color: #3369C8; }
  .bar-60 { width: 60%; background-color: #3369C8; }
  .bar-50 { width: 50%; background-color: #C86945; }
  .bar-40 { width: 40%; background-color: #C86945; }
  .bar-30 { width: 30%; background-color: #C86945; }
  .bar-20 { width: 20%; background-color: #C86945; }
  .bar-10 { width: 10%; background-color: #C86945; }

/* Search Box */
  .sc-header-search { text-align: right; }
  .sc-header-search-button { background-color: #4CAF50; border: none; color: white; padding: 6px 15px; text-decoration: none; margin: 0 0 0 5px; cursor: pointer; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; font-size: 80%; height: 30px; }
  .sc-header-search-button:hover { background-color: #ddd; color: black;  }
  #sc-search-box { margin: 0 0 10px 0; padding: 0; border: 0; }
  #sc-search-box input[type="text"] {
    background: url(images/icons/ic-search-white.png) no-repeat 12px 10px #555;
    border: 0 none;
    font: bold;
    font-size: 80%;
    color: #d7d7d7;
	height: 30px;
    width:220px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
  }
  #sc-search-box input[type="text"]:focus 
  {
    background: url(images/icons/ic-search-dark.png) no-repeat 12px 10px #fcfcfc;
    color: #6a6f75;
    outline: none;
    width: 250px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }

/* Social */
.sc-header-social { text-align: right; margin: 0px 0px 30px 0px; }
.sc-footer-social { text-align: center; margin: 0px 0px 30px 0px; }
.social { width: 40px; height: 40px; margin-left: 5px; display: inline-block; }
.social-goodreads { background:transparent url('images/icons/ic-goodreads.png') center top no-repeat; text-decoration: none; }
.social-goodreads:hover { background-image: url('images/icons/ic-goodreads-on.png'); }
.social-twitter { background:transparent url('images/icons/ic-twitter.png') center top no-repeat; text-decoration: none; }
.social-twitter:hover { background-image: url('images/icons/ic-twitter-on.png'); }
.social-amazon { background:transparent url('images/icons/ic-amazon.png') center top no-repeat; text-decoration: none; }
.social-amazon:hover { background-image: url('images/icons/ic-amazon-on.png'); }
.social-facebook { background:transparent url('images/icons/ic-facebook.png') center top no-repeat; text-decoration: none; }
.social-facebook:hover { background-image: url('images/icons/ic-facebook-on.png'); }
.social-instagram { background:transparent url('images/icons/ic-instagram.png') center top no-repeat; text-decoration: none; }
.social-instagram:hover { background-image: url('images/icons/ic-instagram-on.png'); }
.social-linktree { background:transparent url('images/icons/ic-linktree.png') center top no-repeat; text-decoration: none; background-size: 40px 40px; }
.social-linktree:hover { background-image: url('images/icons/ic-linktree-on.png'); background-size: 40px 40px; }
.social-pinterest { background:transparent url('images/icons/ic-pinterest.png') center top no-repeat; text-decoration: none; background-size: 40px 40px; }
.social-pinterest:hover { background-image: url('images/icons/ic-pinterest-on.png'); background-size: 40px 40px; }
.sc-social-share { float:right; font-family: 'Muli', sans-serif; color: gray; margin-right: 20px; font-variant: small-caps; color: gray; }

/* Blog */
.sc-blog { padding: 10px 10px 20px 10px; border: 1px solid #BFBFBF; background-color: white; box-shadow: 10px 10px 5px #aaaaaa; margin: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.sc-blog-div-right { font-family: 'Muli', sans-serif; float: right; border: 1px dotted gray; padding: 10px; margin: 15px 0px 15px 20px; text-align: center; }
  .sc-blog-div-right img { margin: 0px 0px 10px 0px; width: 300px; }
.sc-blog-cover-left { float: left; margin: 15px 20px 15px 0px; width: 300px; }
.sc-blog-cover-left-300 { float: left; margin: 15px 20px 15px 0px; width: 300px; }
.sc-blog-cover-left-150 { float: left; margin: 15px 20px 15px 0px; width: 150px; }
.sc-blog-cover-left-100 { float: left; margin: 15px 20px 15px 0px; width: 100px; }
.sc-blog-cover-right { float: right; margin: 15px 0px 15px 20px; width: 300px; }
.sc-blog-cover-right-300 { float: right; margin: 15px 0px 15px 20px; width: 300px; }
.sc-blog-cover-right-150 { float: right; margin: 15px 0px 15px 20px; width: 150px; }
.sc-blog-cover-right-100 { float: right; margin: 15px 0px 15px 20px; width: 100px; }
.sc-blog-img { margin: 15px 0px 15px 0px; }
.sc-blog-img-left { float: left; margin: 15px 20px 15px 0px; }
.sc-blog-img-right { float: right; margin: 15px 0px 15px 20px; }
.sc-blog-img-fav { float: left; margin: 0px 10px 15px 0px; width: 100px; }
.sc-blog-img-fav-get { margin: 0px 0px 10px; width: 100px; }
.sc-blog-keywords { font-variant: small-caps; font-size: 80; color: gray; }
.sc-blog-quote { font-size: 100%; }
.sc-blog-affiliate { color: gray; font-style: italic; font-size: 80%; }
.sc-blog-top-quote { color: gray; font-size: 125%; text-align: center; }
.sc-blog-fav-item { font-size: 90%; text-align: center; }
.sc-blog-citation { color: #616161; text-align: center; margin: 15px 40px; }

/* Forms/Admin */ 

h3.sc-admin { color: #50A1C7; border-bottom: dotted 1px grey; margin: 15px 25px 15px 0px;}
input[type=text], select { width: 100%; margin-bottom: 20px; padding: 12px; border: 1px solid #ccc; border-radius: 3px; }
textarea { border: 1px solid #ccc; border-radius: 3px; width: 100%; }
.textarea-wrapper { border:1px solid #999999; margin:5px 0; padding:3px; }
label { margin-bottom: 10px; display: block; }
.form-bt { padding: 10px; }
.form-bt-delete { padding: 10px; font-weight: bold; color: red; }

section.alert { padding: 0px 20px; margin: 0px 20px; }
section.alert-danger { outline: none; width: 80%; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); border-radius: 20px; background-color: #eee; margin: 25px 25px; padding: 25px 0px; }
section.alert-danger h2 { font-size:100%; color: red; }

/* Home Banners */

  * {box-sizing:border-box}
  /* Slideshow container */
  .slideshow-container { max-width: 1000px; position: relative; margin: auto; }
  /* Hide the images by default */
  .mySlides { display: none; }
  /* Next & previous buttons */
  .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
  /* Position the "next button" to the right */
  .next { right: 0; border-radius: 3px 0 0 3px; }
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
  /* 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 { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
  .active, .dot:hover { 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} }

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
  .col-20, .col-25, .col-33, .col-40, .col-50, .col-60, .col-66, .col-80 { width: 100%; padding: 0; }
  .img-90 { width: 50%; }
  .img-resp-95 { width: 95%; }
  .sc-header-title, .sc-header-titlesub, .sc-header-search, .sc-header-social { text-align: center; margin-bottom: 10px; }
  .right-to-center { text-align: center; }
  p { text-align: left; }
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
  .topnav a.icon { float: right; display: block; }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive { position: relative; }
  .topnav.responsive a.icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { float: none; display: block; text-align: left; }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; }
}