@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------------------
 * Note that default CSS is for small mobile sizes */

* {
  box-sizing: border-box;
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
  padding: 0;
  margin: 0;
  font-family: arial,helvetica;
  }
table {
  border-spacing: 0;
  }
fieldset,img {
  border: 0;
  }
strong{
  font-weight: bold;
  }
ol,ul {
  list-style: none;
  margin:0;
  padding:0;
  }
h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  margin:0;
  padding:0;
  }

/* Custom CSS
 * --------------------------------------- */
/* Cat Calendar CSS */

.intro {
  position:absolute;
  top:0;
  /* width:20%;  1/n of the width of the gallery */
  }

table#month-select {
  width:90%;
  height:60%;
  margin:auto;
  border-spacing:1em;
  font-size:2em;
  }
#month-select td {
  background-color:rgba(255,255,255,0.7);
  border-radius:1em;
  }
.date-container {
  height:100%;
  max-width:100%;
  }
.cotd {
  }
h1.date {
  float:right;
  margin:0.5em;
  white-space:nowrap;
  padding:0.3em 1em;
  background-color:rgba(255,255,255,0.5);
  font-size:2em;
  color:#000000;
  border:1px solid #888888;
  border-radius:0.5em;
  box-shadow:0.15em 0.15em 0.25em rgba(0,0,0,0.5);
  }
.month-text {
  margin:0.5em 1em;
  padding:0.3em 1em;
  background-color:rgba(255,255,255,0.5);
  font-size:2em;
  color:#000000;
  border:1px solid #888888;
  border-radius:0.5em;
  box-shadow:0.15em 0.15em 0.25em rgba(0,0,0,0.5);
  }
.month-cal {
  position:absolute;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  font-size:1.5em;
  color:#ffffff;
  margin:auto;
  border-top-left-radius:1em;
  }
.month-cal tr td {
  text-align:center;
  padding:0.25em 0.5em;
  }
.month-cal tr.week-days td {
  font-size:60%;
  }
.month-cal tr th {
  text-align:center;
  padding:0.25em 0.5em;
  color:#ffff88;
  letter-spacing:0.1em;
  font-weight:bold;
  }
.quote-container {
  background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 15%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.6) 100%) repeat scroll 0 0;
  bottom: 0;
  color: #ffffff;
  display: block;
  height: 24%;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  width: 100%;
  }
p.quote {
  bottom: 0;
  left: 0;
  margin: 1em;
  position: absolute;
  right: 0;
  }
.quote-len1 {
  font-size:3.22em;
  }
.quote-len2 {
  font-size:2.93em;
  }
.quote-len3 {
  font-size:2.66em;
  }
.quote-len4 {
  font-size:2.42em;
  }
.quote-len5 {
  font-size:2.2em;
  }
.quote-len6 {
  font-size:2em;
  }
.info-quote {
  display:block;
  position:absolute;
  left:0;
  right:0;
  height:50%;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  font-size:1em;
  color:#ffffff;
  min-width:768px;
  margin:auto;
  padding:1.0em;
  }
.info-quote.credits {
  height:100%;
  padding:10% 25%;
  font-size:2em;
  background-color:rgba(0,0,0,0);
  }
img.credits-image {
  position:absolute;
  width:100%;
  min-height:100%;
  left:50%;
  top:50%;
  transform:translateY(-50%) translatex(-50%);
  -webkit-transform:translateY(-50%) translatex(-50%);
  }
img.day-image {
  position:absolute;
  width:100%;
  min-height:100%;
  left:50%;
  top:50%;
  transform:translateY(-50%) translatex(-50%);
  -webkit-transform:translateY(-50%) translatex(-50%);
  z-index:-99;
  }
.day-slide {
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  }
.img-wrapper {
  z-index:-100;
  }
a {
  color:#ffffff;
  text-decoration:none;
  }
p.info-quote.credits {
  padding:25%;
  font-size:200%;
  }
a.icon {
  display:block;
  margin-top:2.5em;
  }
.icon > img {
  width:15%;
  }
.caption {
  display:block;
  font-size:0.8em;
  }
ul.credits li {
  font-size:2.5em;
  color:#ffeedd;
  }
h1.credits {
  margin:3em;
  font-size:3.5em;
  color:#ffffff;
  }
.scroll {
  -webkit-transform-style:preserve-3d;
  -webkit-animation-name: scroller;
  -webkit-animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: repeat;
  -webkit-animation-play-state: running;
  animation-name: scroller;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: repeat;
  animation-play-state: running;
  position:absolute;
  line-height:3em;
  width:100%;
  }
@keyframes scroller {
  0% {top:100%;}
  100% {top:-170em;} /* Approx. the number of (42 lines x 3em line height) + (2 h1 x 3em per margin x 2 margins) */
  }
.month-section{
  text-align:center;
  position: relative;
  }
#credits{
  background-color:#000000;
  height:100%;
  overflow:hidden;
}

/*************************** From original style sheet ************************** */


/**
 * 16.0 Media Queries (Borrowed from the Wordpress twentyfifteen theme)
 */

/*
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */

@-ms-viewport {
  width: device-width;
  }

@viewport {
  width: device-width;
  }



@media screen and (min-width: 10em),
       screen and (min-width: 10em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 20em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 30em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid #ace; */
    }
  h1.date {
    font-size:1.25em;
    }
  .quote-container {
    height:45%;
    }
  .quote-len1 {
    font-size:2.00em;
    }
  .quote-len2 {
    font-size:1.72em;
    }
  .quote-len3 {
    font-size:1.44em;
    }
  .quote-len4 {
    font-size:1.16em;
    }
  .quote-len5 {
    font-size:0.88em;
    }
  .quote-len6 {
    font-size:0.60em;
    }
  .month-text {
    font-size:1.00em;
    }
  .month-cal {
    font-size:0.65em;
    }
  }
@media screen and (min-width: 15em),
       screen and (min-width: 15em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 30em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 45em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid #aec; */
    }
  h1.date {
    font-size:1.5em;
    }
  .quote-container {
    height:42.5;
    }
  .quote-len1 {
    font-size:2.25em;
    }
  .quote-len2 {
    font-size:1.95em;
    }
  .quote-len3 {
    font-size:1.65em;
    }
  .quote-len4 {
    font-size:1.35em;
    }
  .quote-len5 {
    font-size:1.05em;
    }
  .quote-len6 {
    font-size:0.75em;
    }
  .month-text {
    font-size:1.10em;
    }
  .month-cal {
    font-size:0.75em;
    }
  }
@media screen and (min-width: 20em),
       screen and (min-width: 20em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 40em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 60em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid #cae; */
    }
  h1.date {
    font-size:1.75em;
    }
  .quote-container {
    height:40.0%;
    }
  .quote-len1 {
    font-size:2.60em;
    }
  .quote-len2 {
    font-size:2.26em;
    }
  .quote-len3 {
    font-size:1.92em;
    }
  .quote-len4 {
    font-size:1.58em;
    }
  .quote-len5 {
    font-size:1.24em;
    }
  .quote-len6 {
    font-size:0.90em;
    }
  .month-text {
    font-size:1.25em;
    }
  .month-cal {
    font-size:0.90em;
    }
  }




@media screen and (min-width: 30em),
       screen and (min-width: 30em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 60em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 90em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid #cea; */
    }
  h1.date {
    font-size:2.25em;
    }
  .quote-container {
    height:37.5%;
    }
  .quote-len1 {
    font-size:3.00em;
    }
  .quote-len2 {
    font-size:2.60em;
    }
  .quote-len3 {
    font-size:2.20em;
    }
  .quote-len4 {
    font-size:1.80em;
    }
  .quote-len5 {
    font-size:1.40em;
    }
  .quote-len6 {
    font-size:1.00em;
    }
  .month-text {
    font-size:1.50em;
    }
  .month-cal {
    font-size:1em;
    }
  }
@media screen and (min-width: 40em),
       screen and (min-width: 40em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 80em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 120em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid blue; */
    }
  h1.date {
    font-size:3em;
    }
  .quote-container {
    height:35.0%;
    }
  .quote-len1 {
    font-size:3.40em;
    }
  .quote-len2 {
    font-size:2.95em;
    }
  .quote-len3 {
    font-size:2.50em;
    }
  .quote-len4 {
    font-size:2.05em;
    }
  .quote-len5 {
    font-size:1.60em;
    }
  .quote-len6 {
    font-size:1.15em;
    }
  .month-text {
    font-size:2.00em;
    }
  .month-cal {
    font-size:1.50em;
    }
  }
/* Android MotoX and iPhone5 iPad? */
@media screen and (min-width: 60em),
       screen and (min-width: 60em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 120em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 180em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid green; */
    }
  h1.date {
    font-size:4em;
    }
  .quote-container {
    height:32.5%;
    }
  .quote-len1 {
    font-size:3.80em;
    }
  .quote-len2 {
    font-size:3.50em;
    }
  .quote-len3 {
    font-size:3.20em;
    }
  .quote-len4 {
    font-size:2.90em;
    }
  .quote-len5 {
    font-size:2.60em;
    }
  .quote-len6 {
    font-size:2.30em;
    }
  .month-text {
    font-size:3.00em;
    }
  .month-cal {
    font-size:2.00em;
    }
  }





@media screen and (min-width: 80em),
       screen and (min-width: 80em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 160em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 240em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid red; */
    }
  h1.date {
    font-size:4.5em;
    }
  .quote-container {
    height:30.0%;
    }
  .quote-len1 {
    font-size:4.00em;
    }
  .quote-len2 {
    font-size:3.60em;
    }
  .quote-len3 {
    font-size:3.20em;
    }
  .quote-len4 {
    font-size:2.80em;
    }
  .quote-len5 {
    font-size:2.40em;
    }
  .quote-len6 {
    font-size:2.00em;
    }
  .month-text {
    font-size:4.00em;
    }
  .month-cal {
    font-size:2.00em;
    }
  }
@media screen and (min-width: 100em),
       screen and (min-width: 100em) and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-width: 200em) and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-width: 300em) and (-webkit-min-device-pixel-ratio: 3) {
  body {
    /* border:5px solid yellow; */
    }
  h1.date {
    font-size:5em;
    }
  .quote-container {
    height:27.5%;
    }
  .quote-len1 {
    font-size:4.00em;
    }
  .quote-len2 {
    font-size:3.60em;
    }
  .quote-len3 {
    font-size:3.20em;
    }
  .quote-len4 {
    font-size:2.80em;
    }
  .quote-len5 {
    font-size:2.40em;
    }
  .quote-len6 {
    font-size:2.00em;
    }
  .month-text {
    font-size:4.50em;
    }
  .month-cal {
    font-size:2.5em;
    }
  }