/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/

@import url(https://fonts.googleapis.com/css?family=Jost:200,300,400,500,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* UNIVERSAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
	background-color: #fff;

}


html{
	overflow-x:hidden;
	overflow-y:auto;
}


/* ROOT FONT STYLES */

// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.jost-regular {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

* {
  font-family: 'Jost', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #232A5F;
  line-height: 1.5;

}


/* TYPOGRAPHY */

/* This is the main pink header font that is slanted */
h1 {
  font-size: 2rem;
  font-family: 'Pacifico', cursive;
  margin-bottom: 1.5em;
  margin-top: 0;
  color: #EA5378;
  transform: rotate(-5deg);
	font-weight:400;

}

/* This is the blue subheader text on the book page*/
h2 {
  font-family: 'Jost', sans-serif;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.4rem;
	color:#2A3558;
	font-weight:400;
}

/* This is the pink subheader font that is straight*/
h3 {
  font-size: 1.4rem;
  font-family: 'Pacifico', cursive;
  margin-bottom: .2em;
  margin-top: .3em;
  color: #EA5378;
	font-weight:400;
}

/* This is the pink subheader font bold*/
h4 {
  font-size: 1.1rem;
  font-family: 'Jost', sans-serif;
  color: #EA5378;
  margin-top: 0;
	font-weight:600;
}

/* This is the white subheader text*/
h5 {
  font-size: 1.1rem;
  margin-bottom: 0;
  margin-top: 0;
  color: #fff;
	font-weight:400;
}

/* This is the blue sub-subheader text on the book page*/
h6 {
  	font-size: 1rem;
	color:#2A3558;
	font-weight:400;
}

/* This is the blue body text font */
h7 {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  margin-top: 0;
	color:#2A3558;
}

/* This is the blue book title font */
h8 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 0;
  color: #232A5F;
}

/* This is the blue body header text font */
h9 {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  margin-top: 0;
  color: #232A5F;
}

/* This is the white body text*/
h10 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin-top: 0;
  color: #fff;
}

/* This is the blue subheader italisized text on the book page*/
h11 {
  font-family: 'Jost', sans-serif;
font-style: italic;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.4rem;
	color:#2A3558;
	font-weight:600;
}
.font-light {
  font-weight: 200;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 500;
}

/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin: 0 auto;
}

.justify {
  text-align: justify;
}

/* ==== GRID SYSTEM ==== */

.head {
  width: 100%;
  margin: 0 auto;
  background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;

}

.foot {
  width: 100%;
  margin: 0 auto;
  background: #232A5F;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-bottom: 5em;

}
.container {
  width: 90%;
  margin: 0 auto;
	display: flex;
	flex-direction: column;
}



.row {
  position: relative;
  width: 100%;


}

.row [class^="col"] {
  float: left;
  margin: 8px 2%;
  min-height: 2px;


}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

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

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 540px) {
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 768px) {
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 960px) {
  .container {
    width: 70%;
    max-width: 960px;
  }
}





/* ==== MAIN NAVIGATION ==== */


#head_img {
    display: block;
	text-align: center;
}


hr {
width: 100%;
border: 0px;
border-top: 8px solid #0E788D;
margin-right: auto;
margin-left: auto;

	color: #0E788D;
}

hr.grey {
width: 100%;
border: 0px;
border-top: 4px solid #CECECE;
margin-right: auto;
margin-left: auto;
	color: #0E788D;
}



#mainnav {
	display:flex;
	align-items: center;
	justify-content: space-around;
	min-width: 55%;
	background: #fff;
	padding: 0em 0em;

}

/* ==== SOCIAL MEDIA ==== */

a svg:hover #svg { 
  fill: #0E788D;
}

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


.socnav {
	display: flex;
	padding: .6em ;
	justify-content: space-around;

}
.socnavfoot {
	display: flex;
	padding: .6em ;
	justify-content: space-around;
	align-items: center;
}
.socnavfoot2 {
	display: flex;
	padding-right: 1em;
	padding-left: 1em;
	justify-content: space-around;
	align-items: center;
}

.socicon {
	padding-right: .5em;
}


/* ==== TOP NAV BAR ==== */

 /* Add a black background color to the top navigation */
.topnav {
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
	float: left;
    display: block;
    color: #232A5F;
    text-align: center;
    padding: 0em 0.9em;
    text-decoration: none;
    font-size: 1.5em;
	font-weight:500;
}

/* Add an active class to highlight the current page */
#active {
    color: #EA5378;
}

/* Hide the link that should open and close the topnav on small screens */
#toggle {
    display: none;

}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 1.5em;
    border: none;
    outline: none;
    background-color: #0E788D;
    padding: 0em .9em;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
	font-weight:500;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #0E788D;
    min-width: 4em;
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: white;
    padding: .5em 2em;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    color: #EA5378;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    color: #EA5378;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* When the screen is less than 768 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: 768px) {
  .topnav a, .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: 768px) {
  .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;

  }

#mainnav {
    width: 100%;
	flex-direction: column-reverse;
	justify-content: flex-end;

}

.container {
    width: 100%
  }




.socicon {
	padding-right: .5em;
	padding-left: .5em;
}
#toggle {
    display: flex;

}
}




/* ==== SLIDER ==== */

.slide {
  position: relative;
}

/* Hide the mobile version */
#smallscreen {
    display: none;
}

/* When the screen is less than 600 pixels wide show the mobile version*/
@media screen and (max-width: 600px) {
#largescreen{
    display: none;
}

#smallscreen {
    display: block;
}
}

/* ==== BUTTON ==== */

.mainbutton{
	
	background-color:#EA5378;
	padding: 1em 1em 1em 1em;
	text-align: center;
	width: 10em;
	margin: 3em 0em 0em 1em;
	display:flex;
	align-items: center;
	justify-content: center;
}


.mainbutton a{
  font-size: 1.3rem;
  color: #fff;
    text-decoration: none;
	font-weight:500;
}

.mainbutton:hover{
	color: #fff;
	background-color:#0E788D;

}
.readbutton{
	
	background-color:#EA5378;
	padding: .6em .6em .6em .6em;
	text-align: center;
	width: 7.5em;
	margin: 1em 0em 0em 1em;
	display:flex;
	align-items: center;
	justify-content: center;
}


.readbutton a{
  font-size: 1.3rem;
  color: #fff;
    text-decoration: none;
	font-weight:500;
}

.readbutton:hover{
	color: #fff;
	background-color:#0E788D;

}
.readbuttonblue{
	
	background-color:#0E788D;
	padding: .6em .6em .6em .6em;
	text-align: center;
	width: 7.5em;
	margin: 1em 0em 0em 1em;
	display:flex;
	align-items: center;
	justify-content: center;
}


.readbuttonblue a{
  font-size: 1.3rem;
  color: #fff;
    text-decoration: none;
	font-weight:500;
}

.readbuttonblue:hover{
	color: #fff;
	background-color:#EA5378;

}
.kubookbutton{
	
	background-color:#0E788D;
	padding: .2em .2em .2em .2em;
	text-align: center;
	width: 11em;
	margin: .5em 0em 0em 1em;
	display:flex;
	align-items: center;
	justify-content: center;
}


.kubookbutton a{
  font-size: 1 rem;
  color: #fff;
    text-decoration: none;
	font-weight:500;
}

.kubookbutton:hover{
	color: #fff;
	background-color:#EA5378;

}
.learnbookbutton{
	
	background-color:#EA5378;
	padding: .2em .2em .2em .2em;
	text-align: center;
	width: 11em;
	margin: .5em 0em 0em 1em;
	display:flex;
	align-items: center;
	justify-content: center;
}


.learnbookbutton a{
  font-size: 1 rem;
  color: #fff;
    text-decoration: none;
	font-weight:500;
}

.learnbookbutton:hover{
	color: #fff;
	background-color:#0E788D;

}
.bookbutton{
	
	background-color:#0E788D;
	padding: .2em .2em .2em .2em;
	text-align: center;
	width: 4em;
	margin: .5em 0em 0em 1em;
	display:flex;
	align-items: center;
	justify-content: center;
}


.bookbutton a{
  font-size: 1 rem;
  color: #fff;
    text-decoration: none;
	font-weight:500;
}

.bookbutton:hover{
	color: #fff;
	background-color:#EA5378;

}

/* ==== BOOK IMAGES ==== */
.bookitemheader  {
	justify-content: center;
	align-items: center;
	margin: 0em 1em 0em 1em;
}

.bookitemhome  {
	justify-content: center;
	align-items: center;
}

.bookitemnumber  {
	width: 14em;
	justify-content: center;
	align-items: center;
	display:flex;
	flex-wrap: wrap;
	flex-direction: column;
}
.bookitem  {
	justify-content: center;
	align-items: center;
}

.bookitembuttons  {
	width: 14em;
	justify-content: space-around;
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	padding-bottom: 1.5em;
}

.hvrbox * {
	box-sizing: border-box;

}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin: 0em 1em 0em 1em;

}
.hvrbox img {
	max-width: 50%;

}
.hvrbox .hvrbox-layer_bottom {
	display: block;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #EA5378;
	color: #fff;
	padding: 0px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	color: #fff;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.hvrbox-text a{

	color: #fff;
	text-decoration: none;
}

.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}

	
.hvrbox .hvrbox-layer_slideup {
	-moz-transform: translateY(100%);
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

/* When the screen is less than 600 pixels wide show the mobile version*/
@media screen and (max-width: 600px) {
.bookitemhome  {
	justify-content: center;
	align-items: center;
	padding-bottom: 2em;
}

}

/* ==== CONTENT ==== */

.wantbookbox{
	background-color: #fff;
	padding: 1em 1em 3em 1em;

}

.newsletterbox{
	background-color:#232A5F;
	padding: 1em 1em 1em 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}


.featureboxwhite{
	background-color: #fff;
	padding: 1em 1em 2.5em 1em;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}

.featureboxgrey{
	background-color: #F1F2F2;
	padding: 1em 1em 2.5em 1em;
	border-top: 8px solid #EA5378;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}
.featureboxline{
	background-color: #fff;
	padding: 0em 4em 0em 4em;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}

.bookbox{
	background-color: #fff;
    	width: 104%;
	padding: 1em 1em 2.5em 1em;


}

.books{
	display:flex;
	justify-content: space-around;
	padding: 1em 1em 2.5em 1em;
	align-items: top;
	flex-direction: row;
	flex-wrap: wrap;

}

.newsletterfooterbox{
	background-color: #232A5F;
	padding: 1em 2em 2.5em 2em;
}


/* When the screen is less than 600 pixels wide show the mobile version*/
@media screen and (max-width: 600px) {
.books{
	display: flex;
	flex-direction: column;
	justify-content: center;
 	align-items: center;
}
.bookbox{
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 1em 1em 2.5em 1em;
}
}


/* ==== SINGLE BOOK PAGE ==== */
.singlebookheader {
	justify-content: center;
	align-items: center;
	padding: 1em 0em 1em 0em;
}

.singlebookbox{
	background-color: #fff;
	flex-direction: row;
	padding: 1em 2em 2.5em 2em;
}

.singlebooktop{
	display:flex;
	flex-direction: row;
	align-items: center;
}
.bookboximage{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.abouttop{
	display:flex;
	flex-direction: row;
	justify-content: flex-start;

}

.booksocmed{
	display:flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	margin-bottom: 1.5em;

}



.booktextbox{
    width: 120%;
	padding: 0em 1em 0em 0em;

}
.audiobooktextbox{
    width: 100%;
	padding: 0em 1em 0em 0em;

}
.aboutbox{
    width: 100%;
	padding: 0em 1em 0em 0em;

}

.bottomnewsletter{
	width:100%;
	display:flex;
	flex-direction: column;
	justify-content: center;

}

/* When the screen is less than 600 pixels wide show the mobile version*/
@media screen and (max-width: 600px) {
.booktextbox{
    width: 100%;
}
.singlebooktop{
	display:flex;
	flex-direction: column;

}
.abouttop{
	display:flex;
	flex-direction: column;

}
.booksocmed{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1.5em;

}
}


/* ==== SINGLE BOOK PAGE ==== */



.socmedsites{
	display:flex;
	flex-direction: column;

}

.middlenewsletter{
	width:100%;
	display:flex;
	flex-direction: column;
	justify-content: center;
	padding: 1em 4em 1em 4em;
}

/* When the screen is less than 800 pixels wide show the mobile version*/
@media screen and (max-width: 768px) {
.middlenewsletter{
	width:100%;
}
}