* {
	margin: 0;
	padding: 0;
}
	
html {
	font: 1em "PT Serif Caption", "Source Serif Pro", "IBM Plex Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.clear {
	clear: both;
}

a {
	text-decoration: none;
}

a.hover {
	color: #f78b00;
}
	
a.buybutton.small {
	padding: 0 20px;
	font-size: 2.3em;
}
	
@media (max-width: 1100px) {
	
	ul div.menu-items li {
		margin: 4px 10px 14px 10px;
	}
	
	.splashtitles h2 {
		font-size: 2em;
	}
		
	/*.splashtitles a.buybutton {
		font-size: 1.8em;
	}*/
	
	div.cover {
	width: calc(var(--baseline) * 80);
	height: calc(var(--baseline) * 40);
	}
	
}	
	
@media (min-width: 1000px) {
	div.splashcontainer {
		min-height: 500px;
	}
}

.navcontainer {
	background-color: #188dbb;
	position: relative;
}

nav.menu li a.homepage-link {
	font-family: 'Lemon', 'Lemonada', 'Sansita Swashed';
	font-size: 1.2em;
	color: #f9ae25;
}


div.coming-soon {
	width: 44%;
	text-align: center;
	margin: 15% 3%;
	padding: 15px;
}


@media (max-width: 1000px) {
	.banner .discount {
		font-size:1.1em;
	}

	ul div.mobile-nav-icon {
		display: block;
		position: absolute;
		right: 20px;
		color: white;
		cursor: pointer;
		top: 4px;
		font-size: 1.3em;
	}
	
	.menu {
		font-size: 1.5em;
	}
	
	ul div.menu-items.shown {
	display: block;
	}
	
	.mobile-nav-icon img {
		width: 50px;
		position: relative;
		top: 10px;
		overflow: visible;
	}

	ul div.menu-items { font-size: 1.2em;
		display: none;
		position: absolute;
		width: 75%;
		top: 70px;
		background-color: orange;
		right: 1px;
		padding: 10px 40px 20px 10px;
		z-index: 200;
	}

	.menu-items li{
		text-align: right;
		width: 100%;
	}
	
	li p.subscript {
		color: #03729d;
		top:24px;
	}

	div.splashcontainer div.splashtitles h2 {
    font-size: 3em;
	}
	
	.splashtitles a.buybutton {
	padding: 8px 14px;
	}
	
	a.buybutton.small {
		font-size: 2.5em;
	}
	
	.intro {
		font-size: 1.1em;
	}
	
	div.tser-image img.book-image, .wholesale-image img {
		width: 100%;
		margin: 0 auto;
	}
	
	div.inside-view, div.even-right {
		width: 100%;
		text-align: center;
		bottom: 0%;
		left: 0%;
		padding: 40px 20px;
	}
	
	div.bookteaser, div.message-form {
		width: 100%
	}
	
	.tser-image, .wholesale-image {
		position: relative;
		display: inline-block;
	}
	
	.series {
		font-size: 1.4em;
	}
	
	.teaser p {
		font-size: 1.2em;
	}
	
	div.cover {
	width: calc(var(--baseline) * 74);
	height: calc(var(--baseline) * 37);
	}
	
}

/*********Styles for Discount Banner at top************/
.discount {
	font-size: .9em;
	text-align: center;
}

.banner {
	margin-bottom: 2px;
}

.banner>.ribbon span {
	padding: 8px;
	height: 35px;
}

.banner>.ribbon::before {
	top: 8px;
	left: 5px;
	border-top: 17px solid rgba(60, 60, 60, 0.3);
	border-bottom: 17px solid rgba(60, 60, 60, 0.3);
	border-right: 27px solid rgba(60, 60, 60, 0.3);
	border-left: 20px solid transparent;
}

.banner .after-shad {
	top: 8px;
	right: 5px;
	border-top: 17px solid rgba(60, 60, 60, 0.3);
	border-bottom: 17px solid rgba(60, 60, 60, 0.3);
	border-left: 20px solid rgba(60, 60, 60, 0.3);
	border-right: 27px solid transparent;
}

.banner>.ribbon span::before {
	top: 4px;
	left: -45px;
	border-top: 17px solid #EEBB1D;
	border-bottom: 17px solid #EEBB1D;
	border-right: 25px solid #EEBB1D;
	border-left: 20px solid transparent;
	z-index: 1;
}

.banner>.ribbon span::after {
	top: 4px;
	right: -45px;
	border-top: 17px solid #EEBB1D;
	border-bottom: 17px solid #EEBB1D;
	border-right: 25px solid transparent;
	border-left: 20px solid #EEBB1D;
}

.banner>.ribbon::after {
	height: 5px;
	bottom: -5px;
	left: 52px;
	right: 52px;
}

/****************end Top Banner styles*************/

.menu-items {
	display: block;
	float: right;
	background-color: #188dbb;
	padding-right: 10px;
	padding-bottom: 4px;
}


.mobile-nav-icon {
	display: none;
}

nav.menu {
	padding: 6px 0px;
	font-weight: bold;
}

nav.menu li {
	display: inline-block;
	margin: 12px 10px;
	position: relative;
}
	
nav.menu li a{
	color: white;
}

.subscript {
	font-size: .8em;
	position: absolute;
	right: -6px;
	Top: 16px;
	color: #f9ae25;
	font-weight: bold;
}

.splashcontainer {
	background-image: url(../images/Hamstersite-splashimage.jpg);
	background-size: cover;
	background-position: top center;
	width: 100%;
	max-height: 2000px;
	min-height: 400px;
	padding-bottom: 20px;
}
	
/*90% width wrapper for content sections*/
.splashcontent, nav.menu, .intro, .featuredbook, .foot-content, .wholesale-content {
	position: relative;
	max-width: 3000px;
	margin: 0 auto;
}


.splashcontent {
	padding-top: 10%;
	min-height: 200px;
}

.splashtitles {
	position: relative;
	margin-left: 40%;
	width: 60%;
	text-align: center;
	font-family: 'Lemon', 'Lemonada', 'Sansita Swashed';
	padding: 0px 20px;
}

.splashtitles h2 {
	font-size: 3.5em;
	position: relative;
	color: #f78b00;
	margin-bottom: 20px;
	line-height: 1.3em;
	text-shadow: #2F2B1A -2px 2px 1px;
}
	
a.buybutton {
	padding: 10px 20px;
	position: relative;
	margin: 10px;
	border: solid;
	border-width: .15em;
	text-decoration: none;
	color: #188dbb;
	font-size: 2.5em;
	display: inline-block;
	border-radius: .2em;
}

a.buybutton:hover {
	color: white;
	background-color: #188dbb;
}
	
.introcontainer {
	background-color: white;
	text-align: center;
	padding: 20px 10px;
	font-size: 1.5em;
	font-family: 'Lemon', 'Lemonada', 'Sansita Swashed';
	color: #188dbb;
}

.intro {
	width: 90%;
}

.odds {
	background-color: #c1c6ce;
}

.evens {
	background-color: #febc66;
}
/****************Coloring Page Section*****************/
div.coloring-contain {
	background-color: #e8b460;
}

.teaser h3.coloring-title {
	font-size: 2.5em;
}

.teaser p.coloring-par {
	color: white;
	font-size: 1.2em;
}

.teaser a.coloring-print {
	background-color: #188dbb;
	color: #fff;
	border: none;
	padding: 8px 20px;
}

a.coloring-print:hover {
	color: #188dbb;
	background-color: #b5d3df;
}

img.book-image, .bookteaser, .message-form  {
	width: 50%;
	position: relative;
	display: inline-block;
	float: left;
	
}
.stacked-books {
	width: 90%;
	max-width: 1500px;
	margin: 0 5%;
}

.button-translucent {
	background-color: #6a6a6a66;
	padding: 10px 20px;
	font-size: 2.5em;
	z-index: 200;
	position: absolute;
	color: white;
	font-family: 'Lemon', 'Lemonada', 'Sansita Swashed';
	bottom: 0%;
	left: 10%; 
}


.inside-view, .buybutton {
	cursor: pointer;
}

.inside-view:hover {
	color: #99e2ff;
}

.even-right {
	right: 0;
}

.hidden {
	display: none;
}

.container-lbox {
	position: absolute;
	width: 100%;
}

.content-lb {
	height:1400px;
	max-width: 3000px;
	z-index: 300;
	position: relative;
}

.lb-shadow {
	background-color: #000000d6;
	width: 100%;
	position: fixed;
	z-index: -100;
	height: 100%;
	
}


.exit {
	float: right;
	margin: 20px;
	font-size: 3em;
	font-family: arial, sans-serif;
	color: white;
	position: fixed;
	width: 10%;
	margin-left: 90%;
	top: 20px;
	right: 10px;
	color: #188dbb;
	z-index: 500;
	font-size: 5em;
cursor: pointer;
}

/****************Book Preview CSS**************/
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,600|Tulpen+One&display=swap');

:root {
  /* colors */
  --body-bg: #FAFAFABF;
  --page-bg: #F5F5F5;
  --dark-text: #2A2935;
  
  /* spacing */
  /* this is what defines the global scale */
  --baseline: 12px;
  
  /* fonts */
  --book-title: 'Tulpen One', sans-serif;
  --title: 'Cormorant Garamond', serif;
  --body: 'Cormorant Garamond', serif;
  --base-size: var(--baseline) * 1.2;
}

* {
  box-sizing: border-box;
}

.lb-content-wrap {
	/*background-color: var(--body-bg);*/
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}

.cover {
  width: calc(var(--baseline) * 90);
  max-width: 2400px;
  height: calc(var(--baseline) * 45);
  max-height: 1200px;
  box-shadow: 0 0 100px rgba(0, 0, 0, .3);
  position: relative;
}

.book {
  width: 100%;
  height: 100%;
  display: flex;
  perspective: 1200px; }
  
.book__page {
    position: relative;
    width: 50%;
    height: 100%;
    display: grid;
    transform: rotateY(0deg);
    transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-origin: 0% 0%;
    background-color: var(--page-bg);
    background-image: linear-gradient(90deg, #e3e3e3 0%, rgba(247, 247, 247, 0) 18%); }
    
.book__page:nth-of-type(1) {
      background-image: linear-gradient(-90deg, #e3e3e3 0%, rgba(247, 247, 247, 0) 18%); }
      
.book__page--1 {
      cursor: pointer;
      overflow: hidden; }
      
.book__page img {
        width: 100%;
        max-width: 100%;
        height: auto; }
        
.book__page--2 {
      position: absolute;
      right: 0;
      pointer-events: none;
      transform-style: preserve-3d;
      background-color: var(--page-bg);
      background-image: linear-gradient(90deg, #e3e3e3 0%, rgba(247, 247, 247, 0) 18%); }
	
.book__page--4 {
      cursor: pointer;
      padding: 0 calc(var(--baseline) * 3); }
	
.book__page-front {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: rotateY(0deg) translateZ(1px); }
    .book__page-back {
      position: absolute;
      width: 100%;
      height: 100%;
      /*padding: 0 calc(var(--baseline) * 1.8);*/
      transform: rotateY(180deg) translateZ(1px); }
    .book__page .page__content {
      padding: var(--baseline);
      height: 100%;
      position: relative;
      text-align: center; }
      .book__page .page__content-book-title {
        font-family: var(--book-title);
        font-size: calc(var(--base-size) * 3);
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: var(--dark-text);
        margin-top: calc(var(--baseline) * 5);
        margin-bottom: calc(var(--baseline) * 2); }
      .book__page .page__content-author {
        font-family: var(--title);
        font-size: calc(var(--base-size) * 1.2);
        font-weight: 100;
        text-transform: uppercase;
        color: var(--dark-text);
        border-top: 1px solid var(--dark-text);
        border-bottom: 1px solid var(--dark-text);
        display: inline-block;
        padding: calc(var(--baseline) / 2) calc(var(--baseline) / 5);
        margin-bottom: calc(var(--baseline) * 6); }
      .book__page .page__content-credits {
        font-family: var(--title);
        text-transform: uppercase;
        font-size: calc(var(--base-size) * 0.8);
        margin-bottom: calc(var(--baseline) * 2);
        letter-spacing: 1px; }
        .book__page .page__content-credits span {
          display: block;
          font-size: calc(var(--base-size) * 1.2);
          letter-spacing: 0; }
      .book__page .page__content-copyright {
        position: absolute;
        width: calc(100% - (var(--baseline) * 2));
        bottom: calc(var(--baseline) * 2);
        font-family: var(--title);
        font-size: calc(var(--base-size) * 0.8);
        text-transform: uppercase; }
      .book__page .page__content-title {
        font-family: var(--title);
        font-size: calc(var(--base-size) * 1);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: calc(var(--baseline) * 5);
        margin-bottom: calc(var(--baseline) * 3); }
      .book__page .page__content-table {
        width: 100%;
        margin-top: calc(var(--baseline) * 2); }
        .book__page .page__content-table td {
          font-family: var(--title);
          font-size: calc(var(--base-size) * 1);
          padding-bottom: calc(var(--baseline) * 1.5);
          text-transform: uppercase; }
      .book__page .page__content-blockquote {
        margin-bottom: calc(var(--baseline) * 2); }
      .book__page .page__content-blockquote-text {
        font-family: var(--title);
        font-size: calc(var(--base-size) * 1.67);
        font-style: italic;
        text-align: center; }
      .book__page .page__content-blockquote-reference {
        font-family: var(--title);
        font-size: calc(var(--base-size) * 0.7);
        margin-top: calc(var(--baseline) * 0.3);
        float: right;
        text-transform: uppercase; }
      .book__page .page__content-text {
        font-family: var(--title);
        font-size: calc(var(--base-size) * 0.67);
        text-align: center;
        text-indent: var(--baseline); }
    .book__page .page__number {
      position: absolute;
      bottom: var(--baseline);
      width: calc(100% - (var(--baseline) * 2));
      font-family: var(--title);
      font-size: calc(var(--base-size) * 0.9);
      text-align: center; }
  .book input[type="radio"] {
    display: none; }
    .book input[type="radio"]:checked + .book__page {
      transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform: rotateY(-180deg); }



/*************End Book Preview***************/
.teaser {
	margin:10px;
	text-align: center;
	padding: 8% 8% 2% 8%;
	
}

.teaser h3, .teaser h4{
	margin: 10px 0;
}

.teaser p {
	margin: 20px 0px;
}

/**************ribbon styles*************/
.ribbon {
	overflow: visible;
  /* so we can see the pseudo-elements we're going to add to the anchor */
  position:relative;
  font-size: 1.1em;
  /* font-size and line-height must be equal so we can account for the height of the banner */
  
  line-height: 1.1em;
}

.ribbon:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 4px;
left: 21px;
border-top: 20px solid rgba(60, 60, 60, 0.3);
border-bottom: 20px solid rgba(60, 60, 60, 0.3);
border-right: 29px solid rgba(60, 60, 60, 0.3);
border-left: 29px solid transparent;
}

.ribbon:after {
  /* This adds the second part of our dropshadow */
content: "";
height: 4px;
background: rgba(60, 60, 60, 0.3);
display: block;
position: absolute;
bottom: -4px;
left: 79px;
right: 79px;
}

.after-shad {
	height: 0;
	width: 0;
	display: block;
	position: absolute;
	top: 4px;
	right: 21px;
	border-top: 20px solid rgba(60, 60, 60, 0.3);
	border-bottom: 20px solid rgba(60, 60, 60, 0.3);
	border-left: 29px solid rgba(60, 60, 60, 0.3);
	border-right: 29px solid transparent;
}

.ribbon span {
	display: block;
	padding: 11px;
	position: relative;
	background: #fecc30;
	overflow: visible;
	height: 40px;
	margin: 0px 50px;
	color: black;
	text-decoration: none;
}

.ribbon span:after {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
right: -29px;
border-top: 20px solid #FECC30;
border-bottom: 20px solid #FECC30;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}


.ribbon span:before {
  /* this creates the "forked" part of our ribbon */
  
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
left: -29px;
border-top: 20px solid #FECC30;
border-bottom: 20px solid #FECC30;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}

/*********Darker Ribbon version***********/
.ribbon.darker span {
	display: block;
	padding: 11px;
	position: relative;
	background: #0089d0;
	overflow: visible;
	height: 40px;
	margin: 0px 50px;
	color: #fff;
	text-decoration: none;
}

.ribbon.darker span:after {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
right: -29px;
border-top: 20px solid #0089d0;
border-bottom: 20px solid #0089d0;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}


.ribbon.darker span:before {
  /* this creates the "forked" part of our ribbon */
  
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
left: -29px;
border-top: 20px solid #0089d0;
border-bottom: 20px solid #0089d0;
border-right: 29px solid transparent;
border-left: 29px solid transparent;
}

/**************end ribbon styles*************/
.teaser h3, .wholesale-text h3 {
	font-size: 2em;
	font-family: 'Lemon', 'Lemonada', 'Sansita Swashed';
line-height: 1.1em;
color: #005480;
}

.wholesale-text-cont{
	background-color: #c1c6ce;
	text-align: center;
	padding: 20px;
}

.wholesale-text {
	max-width: 1200px;
margin: auto;
}

.wholesale-text p {
	margin: 20px 0px 10px;
font-size: 1.4em;
}

form {
  /* Center the form on the page */
	margin: 6% 2% 6% 5%;
	width: 90%;
	padding: .5em;
	border-radius: 1em;
	position: relative;
}

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

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 110px;
  text-align: right;
}

input,
textarea {
	font: 1em sans-serif;
	width: 450px;
	box-sizing: border-box;
	border: 1px solid #999;
	padding: 5px;
}

input#mail {
	width: 350px;
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 8em;
}

.button {
  /* Align buttons with the text fields */
  /*padding-left: 90px;  same size as the label elements */
}

button {
	margin: 0 20%;
	padding: 6px 15px;
	font-size: 1.5em;
	border: solid;
	border-width: .15em;
	text-decoration: none;
	color: #188dbb;
	border-radius: .3em;
	font: 1.5em "PT Serif Caption", "Source Serif Pro", "IBM Plex Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

footer {
	background-color: #188dbb;
	padding: 20px 0;
	color: white;
}

.foot-content {
	text-align: center;
	
}

.contact a{
	font-size: 1.6em;
	 text-decoration: underline;
	 color: white;
}