/**
* Login page
*/
.login-page {
}

@media(max-height: 640px) {
	.login-page #footer {
		position: relative;
	}
}

.login-page .loginForm {
	background: #fff;
	border: 3px solid #286785;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	margin: 15px 0;
	padding: 30px 45px;
}

@media(max-height: 740px) {
	.login-page .loginForm {
		margin-top: 20px;
		padding: 20px 40px;
	}
}

@media(min-height: 741px) and (max-height: 799px) {
	.login-page .loginForm {
		margin-top: 30px;
	}
}

@media(min-height: 800px) {
	.login-page .loginForm {
		margin-top: 60px;
	}
}

.login-page .loginForm .form-group {
}

.login-page .loginForm .form-group label {
	display: block;
	margin: 0 0 2px 0;
}

.login-page .loginForm .form-group input[type="text"],
.login-page .loginForm .form-group input[type="password"] {
	background: #f0f0f0;
	border: 1px solid #bbb;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font-size: 1.1em;
	padding: 8px 12px;
	width: 100%;
	max-width: 280px;
}

.login-page .loginForm .form-actions {
	border: none;
	margin-bottom: 5px;
	padding: 0;
}

.login-page .loginForm .loginButton {
	background: #286785;
	border: 1px solid #286785;
	color: #fff;
	font-size: 1.4em;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 6px 20px;
	min-width: 180px;
	
	text-transform: uppercase;
}

.login-page .loginForm .errorDisplay .alert:empty {
	display: none;
}




/**
* About page 
*/
.about-page #main {
	min-height: 500px;
}

.about-page #main #back-button {
	position: absolute;
	top: -80px;
	left: 10px;
	z-index: 999;
}

.about-page #main #back-button img {
	width: 70px;
	height: auto;
}

.about-page #main #logout-button {
	position: absolute;
	top: -150px;
	right: 10px;
	z-index: 999;
}

.about-page #main #logout-button img {
	width: 140px;
	height: auto;
}

@media(max-height: 740px) {
}




/**
* Home page
*/
.home-page {
	background-image: url(/Content/images/bg-home.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.home-page #main .container {
	width: 100% !important;
}


/* slideshow */
/*
      Anthony Krivonos
      Flix Carousel
      src/carousel.js
      09.13.2018
*/

/* Global Variables */
:root {

      /* Tile Dimensions 
      --carousel-tile-spacing: 10px;
      --carousel-tile-width:   300px;
      --carousel-tile-height:  calc(300px / (16 / 14));*/

      /* Growth Factor 
      --carousel-growth-factor: 1.15;*/

      /* Fade to Opacity 
      --carousel-fade-opacity:   0.25;
      --carousel-normal-opacity: 1;*/
	  

      /* Automatic Offsets - DO NOT ALTER 
      --carousel-offset-left:  calc(-1 * (300px * (1.15 - 1) / 2));
      --carousel-offset-right: calc(300px * (1.15 - 1));*/

      /* Transition Speeds 
      --carousel-transition-1: 1s;
      --carousel-transition-2: 0.5s;
      --carousel-transition-3: 0.3s;*/

}

/* Carousel Container */
.carousel {
      margin: 5% 0 0 0;
      box-sizing: border-box;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
	  
	  /* temporary width until we get more books... */
	  width: 1200px;
	  margin-left: calc(50% - 520px);
}

@media(max-height: 740px) {
	.carousel {
		margin-top: 0;
	}
}


/* Carousel Row */
.carousel-row {
      white-space: nowrap;
      margin-top: calc((calc(300px / (16 / 14)) * (1.15 - 1)) / 2);
      margin-bottom: calc((calc(300px / (16 / 14)) * (1.15 - 1)) / 2);
      margin-left: calc((300px * (1.15 - 1)) / 2);
      margin-right: calc((300px * (1.15 - 1)) / 2);
      transition: 0.5s;
}

/* Content Tile */
.carousel-tile {
      position: relative;
      display: inline-block;
      width: 300px;
      height: calc(300px / (16 / 14));
      margin-right: 10px;
      transition: 0.5s;
      -webkit-transform-origin: center left;
      transform-origin: center left;
      cursor: pointer;
      cursor: hand;
}

.carousel-tile .item {
	position: relative;
}

.carousel-tile .item:before {
	background: transparent url(/Content/images/buttons/Button-Book.png) no-repeat center center;
	background-size: 80px auto;
	content: " ";
	display: inline-block;
	width: 80px;
	height: 80px;
	
	position: absolute;
	right: -2px;
	bottom: 28px;
	z-index: 999;
}

.carousel-tile .item img {
	width: 100%;
	height: auto;
}

/* Add Extra Margin to Last Carousel Tile */
.carousel-tile:last-of-type {
      margin-right: calc(300px/2);
}

/* Ensure All Elements Inside Tile are Block */
.carousel-tile * {
      display: block;
}

/* Carousel Row on Hover */
.carousel-row:hover {
      -webkit-transform: translate3d(calc(-1 * (300px * (1.15 - 1) / 2)), 0, 0);
      transform: translate3d(calc(-1 * (300px * (1.15 - 1) / 2)), 0, 0);
}

/* Content Tile on Carousel Row Hover */
.carousel-row:hover .carousel-tile {
      /*opacity: var(0.25);*/
}

/* Content Tile on Hover on Carousel Row Hover */
.carousel-row:hover .carousel-tile:hover {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
      opacity: var(1.0);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
	.carousel-row:hover .carousel-tile:hover {
    	-webkit-transform: none;
    	transform: none;
	}
}

/* Content Tile on Hover */
.carousel-tile:hover ~ .carousel-tile {
      -webkit-transform: translate3d(calc(300px * (1.15 - 1)), 0, 0);
      transform: translate3d(calc(300px * (1.15 - 1)), 0, 0);
}




/**
* Book Display
*/
body.story-book-page {
	background: #222;
}

body.story-book-page #main > .container {
	padding: 0 !important;
}

.story-book-display {
	position: relative;
}

.story-book-display #pageImage {
	width: 100%;
	height: auto;
}

@media(max-height: 740px) {
	body.story-book-page #page,
	body.story-book-page #main,
	body.story-book-page #main > .container {
		height: 100%;
	}
	
	body.story-book-page #main > .container {
		text-align: center;
	}
	
	.story-book-display {
		display: inline-block;
		position: relative;
		width: auto;
		height: 100%;
	}
	
	.story-book-display #pageImage {
		width: auto;
		height: 100%;
	}
}

.story-book-display #homeButton {
    position: absolute;
    top: 15px;
    left: 15px;
}

.story-book-display .homeButtonImage {
    width: 90px;
}
   
.story-book-display #optionsButton {
    position: absolute;
	bottom: 15px;
	left: 15px;
}

.story-book-display .optionsButtonImage {
	width: 90px;
}
	
.story-book-display #startButton {
    position: absolute;
    bottom: 30px;
    right: 40px;
}

.story-book-display .startButtonImage {
	width: 110px;
}

.story-book-display .prevButtonClass {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

.story-book-display .prevButtonClass img {
	width: 110px;
}

.story-book-display .prevButtonClass img:hover {
	cursor: pointer;
}

.story-book-display .nextButtonClass {
	position: absolute;
	bottom: 15px;
	right: 15px;
}

.story-book-display .nextButtonClass img {
	width: 110px;
}

.story-book-display .nextButtonClass img:hover {
	cursor: pointer;
}

/* Customize for Beethoven */
.Beetovan.story-book-display .startButtonImage {
	width: 90px;
}




/**
* Quiz Single
*/
body.quiz-single-page {
	background: #222;
}

body.quiz-single-page #main > .container {
	padding: 0 !important;
}

body.quiz-single-page .quiz-book-display {
	position: relative;
}

body.quiz-single-page .quiz-book-display #answerLargeImage {
	width: 100%;
	height: auto;
}

@media(max-height: 740px) {
	body.quiz-single-page #page,
	body.quiz-single-page #main,
	body.quiz-single-page #main > .container {
		height: 100%;
	}
	
	body.quiz-single-page #main > .container {
		text-align: center;
	}
	
	body.quiz-single-page .quiz-book-display {
		display: inline-block;
		position: relative;
		width: auto;
		height: 100%;
	}
	
	body.quiz-single-page .quiz-book-display #answerLargeImage {
		width: auto;
		height: 100%;
	}
}

body.quiz-single-page .quiz-book-display #questionDisplay {
	width: 600px;
	
    position: absolute;
    top: 15px;
    left: calc(50% - 295px);
}

body.quiz-single-page .quiz-book-display .questionImageDisplay {
    width: 100%;
}

body.quiz-single-page .quiz-book-display .homeButtonClass {
    position: absolute;
    top: 15px;
    left: 15px;
}

body.quiz-single-page .quiz-book-display .homeButtonImage {
    width: 90px;
}

body.quiz-single-page .quiz-book-display .homeButtonImage:hover {
	cursor: pointer;
}

body.quiz-single-page .quiz-book-display .answers-group {
	border-top: 1px solid #444;
	display: block;
	margin: 15px 0 0 0;
	padding: 15px 0 10px 0;
	text-align: center;
	
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

body.quiz-single-page .quiz-book-display .answers-group > .row {
	width: 70%;
	margin-left: 15%;
}

body.quiz-single-page .quiz-book-display .answers-group .answer {
	/*
	display: inline-block;
	margin: 0 15px;
	*/
}

body.quiz-single-page .quiz-book-display .answers-group .answer img {
	width: 120px;
}

body.quiz-single-page .quiz-book-display .answers-group .answer img:hover {
	cursor: pointer;
}

/* customize */
body.quiz-single-page .quiz-book-display.Panda .answers-group {
	bottom: -20px;
	margin: 10px 0 0 0;
	padding: 0;
}




/**
* Quiz Gird
*/
body.quiz-grid-page {
	background: #222;
}

body.quiz-grid-page .quiz-grid {
	background: #fff;
}

body.quiz-grid-page .quiz-grid img {
	width: 100%;
	height: auto;
}

@media(max-height: 740px) {
	body.quiz-grid-page #page,
	body.quiz-grid-page #main,
	body.quiz-grid-page #main > .container {
		height: 100%;
	}
	
	body.quiz-grid-page #main > .container {
		text-align: center;
	}
}

body.quiz-grid-page .quiz-grid .grid-images {
	height: 540px;
	text-align: center;
}

body.quiz-grid-page .quiz-grid .grid-images .row {
	height: 270px;
}

body.quiz-grid-page .quiz-grid .grid-images img {
	border: 4px solid #fff;
	-moz-border-radius: 9px;
	border-radius: 9px;
	width: auto;
	height: 250px;
	margin: 10px 0;
}

body.quiz-grid-page .quiz-grid .grid-images img:hover {
	border-color: #ccc;
	cursor: pointer;
}

@media(max-height: 740px) {
	body.quiz-grid-page .quiz-grid {
		height: 100%;
	}
	
	body.quiz-grid-page .quiz-grid .grid-images {
		height: calc(100% - 100px);
		text-align: center;
	}
	
	body.quiz-grid-page .quiz-grid .grid-images .row {
		height: 50%;
	}
	
	body.quiz-grid-page .quiz-grid .grid-images .row .col,
	body.quiz-grid-page .quiz-grid .grid-images .row .col > div {
		height: 100%;
	}
	
	body.quiz-grid-page .quiz-grid .grid-images img {
		border: 4px solid #fff;
		-moz-border-radius: 9px;
		border-radius: 9px;
		width: auto;
		height: 90%;
		margin: 10px 0;
	}
}

body.quiz-grid-page .quiz-grid .answers-group {
	background: #f0f0f0;
	border-top: 1px solid #ddd;
	min-height: 100px;
	padding: 30px 0;
	position: relative;
}

body.quiz-grid-page .quiz-grid .answers-group .homeButtonImage {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 999;
	
	width: 80px;
	height: auto;
}

body.quiz-grid-page .quiz-grid .answers-group .homeButtonImage:hover {
	cursor: pointer;
}




/**
* Pre-KD page
*/
body.pre-kd-test-page {
	background: #222;
}

@media(max-height: 740px) {
	body.pre-kd-test-page #page,
	body.pre-kd-test-page #main,
	body.pre-kd-test-page #main > .container {
		height: 100%;
	}
	
	body.pre-kd-test-page #main > .container {
		text-align: center;
	}
}




/**
* KD Test page
*/
body.kd-test-page {
	background: #222;
}

body.kd-test-page #kd-test-wrapper {
	position: relative;
	width: 100%;
	height: auto;
	
	background: #fff;
	text-align: center;
}

body.kd-test-page #kd-test-wrapper #testCanvas {
	margin: 0 auto;
}

@media(max-height: 740px) {
	body.kd-test-page #page,
	body.kd-test-page #main,
	body.kd-test-page #main > .container {
		height: 100%;
	}
	
	body.kd-test-page #main > .container {
		text-align: center;
	}
	
	body.kd-test-page #kd-test-wrapper {
		height: 100%;
		width: auto;
	}
	
	body.kd-test-page #kd-test-wrapper #testCanvas {
		height: 100% !important;
		width: auto !important;
	}
}





/**
* Story Settings page
*/
.options-page #main {
	min-height: 500px;
}

.options-page .form-actions .btn[type="submit"] {
	font-family: 'Passion One', cursive;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: 0.02em;
	min-width: 220px;
}