@font-face {
    font-family: 'OpenSansReg';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff2') format('woff2'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansLight';
    src: url('OpenSans-Light-webfont.eot');
    src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Light-webfont.woff2') format('woff2'),
         url('OpenSans-Light-webfont.woff') format('woff'),
         url('OpenSans-Light-webfont.ttf') format('truetype'),
         url('OpenSans-Light-webfont.svg#open_sans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansBold';
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold-webfont.woff2') format('woff2'),
         url('OpenSans-Bold-webfont.woff') format('woff'),
         url('OpenSans-Bold-webfont.ttf') format('truetype'),
         url('OpenSans-Bold-webfont.svg#open_sans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansItalic';
    src: url('OpenSans-Italic-webfont.eot');
    src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Italic-webfont.woff2') format('woff2'),
         url('OpenSans-Italic-webfont.woff') format('woff'),
         url('OpenSans-Italic-webfont.ttf') format('truetype'),
         url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansBoldItalic';
    src: url('OpenSans-BoldItalic-webfont.eot');
    src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-BoldItalic-webfont.woff2') format('woff2'),
         url('OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('OpenSans-BoldItalic-webfont.svg#open_sansbolditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('OpenSans-Semibold-webfont.eot');
    src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Semibold-webfont.woff2') format('woff2'),
         url('OpenSans-Semibold-webfont.woff') format('woff'),
         url('OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansSemiboldItalic';
    src: url('OpenSans-SemiboldItalic-webfont.eot');
    src: url('OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
         url('OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('OpenSans-SemiboldItalic-webfont.svg#open_sanssemibolditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'ElegantIcons';
	src:url('ElegantIcons.woff') format('woff'),
		url('ElegantIcons.ttf') format('truetype'),
		url('ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=4.7.0');
  src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FuturaBook';
  src: url('futura_book.eot');
  src: url('futura_book?#iefix&v=4.7.0') format('embedded-opentype'), url('futura_book.woff2?v=4.7.0') format('woff2'), url('futura_book.woff?v=4.7.0') format('woff'), url('futura_book.ttf?v=4.7.0');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FuturaBold';
  src: url('futura_bold.eot?v=4.7.0');
  src: url('futura_bold.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('futura_bold.woff2?v=4.7.0') format('woff2'), url('futura_bold.woff?v=4.7.0') format('woff'), url('futura_bold.ttf?v=4.7.0') format('truetype');
  font-weight: normal;
  font-style: normal;
}


* { margin: 0; padding: 0; }
html, body { height: 100%; }

.clear { clear:both; }

body { font-family: 'OpenSansReg', sans-serif; }

b { font-family: OpenSansBold, Helvetica, Arial, sans-serif; font-weight: bold; }

.subhead { font-family: OpenSansBold, Helvetica, Arial, sans-serif; font-weight: bold; font-size: 30px; line-height: 40px; color: black; font-weight: bold; }
.body { width: auto; max-width: 1000px; margin: 0 auto; font-size: 22px; line-height: 28px; }

a:active { border-style: none; outline: none; }
a:focus { -moz-outline-style: none; }

.orange-button { background-color: /*#ff7000*/#ff2d00; text-align: center; height: 50px; max-width: 260px; transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -webkit-transition: background-color .25s ease-in-out; border-radius: 5px; margin-top: 15px; }
.orange-button:hover { background-color: #da2701; /*#d75f01; #e06301;*/ }
.orange-button a { display: inline-block; color: #fff!important; text-decoration: none; width: 100%; height: 100%; padding-top: 12px; text-align: center; font-family: 'OpenSansBold', sans-serif; font-size: 19px; }

#header-container { background-color: #736964; position: relative; }
#header { max-width: 1100px; margin: 0 auto; background-image: url(../images/header-bg-5.jpg); background-repeat: no-repeat; height: 120px; position: relative; background-size: cover; position: relative; }
.title-block { padding-left: 50px; }
.title-block h2 { font-family: 'FuturaBook', sans-serif; color: #f26a04; font-size: 48px; font-weight: normal; padding-top: 20px; padding-bottom: 0; margin-bottom: 0; line-height: 45px; }
.title-block h3 { font-family: 'OpenSansReg', sans-serif; font-size: 22px; color: #ff7000; padding-top: 0; margin-top: 0; font-weight: normal; padding-left: 2px; line-height: 20px; }
.header-author { line-height: 40px; font-size: 18px; color: #bbb; }

#nav-container { background-color: #3c3243; height: 36px; }
#nav { width: auto; max-width: 1000px; margin: 0 auto; padding-right: 20px; }
ul#nav-list { list-style-type: none; float: right; }
ul#nav-list li { display: inline-block; margin-left: 20px; font-family: 'OpenSansReg', sans-serif; font-size: 14px; color: #fff; padding-top: 8px; }
ul#nav-list li a { color: #fff; text-decoration: none; transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out;}
ul#nav-list li a:hover { color: #ff7000; }
.header-border-1 { height: 8px; background-color: #848387; }
.header-border-2 { height: 7px; background-color: #c3c3c3; }

#mobile-menu-button { display: none; position: absolute; top: 70px; right: 15px; width: 40px; z-index: 10; }
#mobile-menu-button a { font-family: 'ElegantIcons'; font-size: 40px; color: #fff; text-decoration: none; }

#mobile-nav { /*height: 100%;*/ display: none; background-color: #40352d; position: absolute; top: 120px; left: 0px; right: 0; z-index: 99999; font-weight: normal; -webkit-box-shadow: -1px 10px 5px -3px rgba(0,0,0,0.5);
-moz-box-shadow: -1px 10px 5px -3px rgba(0,0,0,0.5);
box-shadow: -1px 10px 5px -3px rgba(0,0,0,0.5); }
.nav-cat { height: 55px; right: 0; left: 0; border: 1px solid #595e56; border-width: 0 0 1px 0; padding-left: 24px; /*padding-top: 15px;*/ color: #ffffff; font-size: 14px; overflow:hidden; position:relative;}
.nav-cat a { position: relative; display: inline-block; width: 100%; padding-top: 18px; padding-bottom: 25px; color: #fff; text-decoration: none; }
.nav-cat.active a { color: #f26a04; }

.grey-block { background-color: #ddd; position: relative; }
.grey-block-content { max-width: 1000px; margin: 0 auto; /*color: #634884;*/ padding: 35px 50px; background-color: #ebebeb; position: relative; }
.left { float: left; width: 64%; }
.grey-block-content h1 { font-family: 'OpenSansLight',sans-serif; font-size: 40px; font-weight: normal; }
.grey-block-content .left ul { list-style-type: disc; padding-left: 20px; }
.grey-block-content .left ul li { font-family: 'OpenSansReg', sans-serif; font-size: 20px; line-height: 30px; }
.grey-block a { color: #ff7000; text-decoration: none; transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out; }
.grey-block a:hover { color: #bbb; }
.right { float: right; width: 33%; }
.right img { width: 100%; height: auto; }
.right p { text-align: right; font-size: 18px; font-family: 'OpenSansReg', sans-serif; padding-right: 25px; }
#buy-button-1 { margin-top: 40px; }
#top-price { margin-bottom: 75px; }

.mobile-book { text-align: center; display: none; margin-bottom: 15px; }
.mobile-book-image { width: 50%; margin: 0 auto; }
.mobile-book-image img { width: 100%; height: auto; }

#more-info { position: absolute; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 250px; height: 45px; background-color: #3c3243; color: #fff; padding: 5px 0 0 0; font-family: 'OpenSansLight'; text-align: center; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 20px; letter-spacing: 1px; }
.down-arrow { display: inline-block; position: relative; font-family: 'ElegantIcons'; font-size: 25px; line-height: 30px; top: 5px; }

.you-can-do-it { margin-top: 25px; margin-bottom: 25px; }
.you-can-do-it h3 { font-family: 'OpenSansBold',sans-serif; font-size: 29px; }
.you-can-do-it p { font-family: 'OpenSansSemibold',sans-serif; font-size: 26px; }

.mid-block { background-color: #484141; background-image: url(../images/reading-rhythm-side-bg.jpg); background-repeat: repeat-x; }

.wave-block { max-width: 1100px; margin: 0 auto; background-image: url(../images/text-bg-waves-2.gif); background-repeat: repeat-y; }
.mid-border-1 { height: 8px; background-color: #c3c3c3; }
.mid-border-2 { height: 7px; background-color: #a19a97; }
.wave-block-content { padding: 45px 50px 25px 50px; }
.wave-block-content h2 { font-family: 'OpenSansLight', sans-serif; color: #fff; font-size: 40px; font-weight: normal; margin-bottom: 30px; }
.wave-block-content p { font-family: 'OpenSansReg', sans-serif; color: #fff; font-size: 18px; }
.wave-block-content ul { list-style-type: disc; padding-left: 20px; }
.wave-block-content ul li { font-family: 'OpenSansReg', sans-serif; font-size: 18px; line-height: 30px; color: #fff; margin-bottom: 25px; }
#home-pics .right { width: auto; float: none; }
#home-pics .left { width: auto; float: none; }

#lower-block { background-color: #736964; }
#lower-block-content { max-width: 1000px; margin: 0 auto; background-color: #3c3243; padding: 35px 50px 25px 50px; } 
#lower-block-content p { max-width: 700px; color: #fff; font-family: 'OpenSansLight', sans-serif; font-size: 25px; text-align: center; margin: 0 auto; }

#mobile-lower-example { text-align: center; display: none; }
#mobile-example-image { width: 75%; margin: 0 auto; }
#mobile-example-image img { width: 100%; height: auto; }

#close .title-block h3 { color: #634884;font-size: 27px; line-height: 35px; }

.footer-block { max-width: 1000px; margin:0 auto; background-color: #2d2423; padding: 25px 50px; }

.footer-text { color: #999; font-family: 'OpenSansReg', sans-serif; font-size: 14px; } 
.footer-text h2 { font-family: 'OpenSansLight', sans-serif; font-size: 22px; color: #bbb; }
.footer-text p { font-size: 14px; }
.footer-text a { color: #bbb; text-decoration: none; transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; -webkit-transition: color .25s ease-in-out; }
.footer-text a:hover { color: #fff; }

.lavender-text { color: #a08eb7!important; font-size: 22px; }
.italic-semi { font-family: 'OpenSansSemiboldItalic',sans-serif!important; }
.orange { color: #ff7000!important; }
.bold { font-family: 'OpenSansBold'; }


.form-label { font-family: 'OpenSansReg', sans-serif; font-size: 20px; /*color: #f26a04;*/ }
input[type=text] { width: 95%; max-width: 300px; height: 20px; background-color: #ddd; border: none; border-radius: 5px; padding: 10px; font-family: 'OpenSansReg', sans-serif; font-size: 16px; background-color: #ddd; }
textarea { width: 95%; max-width: 480px; height: 150px; border: none; border-radius: 5px; background-color: #ddd; vertical-align: top; font-family: 'OpenSansReg', sans-serif; font-size: 16px; padding: 10px; }
.anti-spam-area { background-color: #fff; padding: 20px; color: #666; font-size: 20px; }
.styled select { background: transparent; width: 120px; font-size: 16px; height: 40px; border: none;
padding-left: 10px; } 
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
.styled { width: 80px; height: 40px; overflow: hidden; background: url(../images/select-arrows.jpg) 90% / 40% no-repeat #ddd; border-radius: 5px; margin-top: 10px; }
input:focus, textarea:focus { background-color: #f4f4f4; }
button#submit { background-color: #ff2d00; border: none; border-radius: 5px; color: #fff; font-size: 20px; padding: 10px 20px; margin-bottom: 50px; font-family: 'OpenSansBold', sans-serif; }
input#check2:focus { background-color: #f4f4f4; }
			
			
ol.ordering { margin-left: 0; padding-left: 0; }
ol.ordering li { margin-left: 20px; padding-left: 0; font-family:'OpenSansSemiBold', sans-serif; font-size: 18px; margin-bottom: 10px; }


/***** BUY FORM ET AL ********/

/**{ box-sizing: border-box; user-select: none; }
html, body{ margin: 0; height: 100%; }*/
/*body{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #fff;
}

section{
  display: flex;
  flex-direction: column;
  padding: 0.5em;
}*/

h1{
  box-sizing: border-box;
  font-weight: 400;
  font-size: 2em;
  cursor: default;
  margin: 0 0 .5em 0;
}

input[type='checkbox']{   box-sizing: border-box;
height: 0; width: 0; position: relative; z-index: -10;}

.checkbox-area { /*border: 1px blue solid;*/   box-sizing: border-box;
position: relative; margin-top: -20px; background: #ebebeb; font-size: 20px;}

.cover { /*border: 1px red solid;*/   box-sizing: border-box;
background-color: #ebebeb; height: 20px; width: 20px; position: absolute; top: 0; left: 0;  z-index: -1; }

input[type='checkbox'] + label{
  box-sizing: border-box;

  position: relative;
  display: flex;
  margin: .6em 0;
  align-items: center;
  color: #9e9e9e;
  transition: color 250ms cubic-bezier(.4,.0,.23,1);
  cursor: pointer;
}
input[type='checkbox'] + label > ins{
  box-sizing: border-box;

  position: absolute;
  display: block;
  bottom: 0;
  left: 2em;
  height: 0;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: height 300ms cubic-bezier(.4,.0,.23,1);
  /*margin-top: -50px;*/
}
input[type='checkbox'] + label > ins > i{
  box-sizing: border-box;

  position: absolute;
  bottom: 0;
  /*margin-top: -50px;*/
  font-style: normal;
  color: #f26a04;
  background: #ebebeb;
  cursor:pointer;
}
input[type='checkbox'] + label > span{
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1em;
  width: 1em;
  height: 1em;
  background: #ebebeb;
  border: 2px solid #9E9E9E;
  border-radius: 2px;
  cursor: pointer;  
  transition: all 250ms cubic-bezier(.4,.0,.23,1);
  /*margin-top: -50px;*/
}

input[type='checkbox'] + label:hover, input[type='checkbox']:focus + label{
  /*color: blue;*/
}
input[type='checkbox'] + label:hover > span, input[type='checkbox']:focus + label > span{
  /*background: rgba(255,255,255,.1);*/
}
input[type='checkbox']:checked + label > ins{   box-sizing: border-box;
height: 100%; }

input[type='checkbox']:checked + label > span{
    box-sizing: border-box;
border: .5em solid #f26a04;
  animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);
}
input[type='checkbox']:checked + label > span:before{
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: .6em;
  left: .2em;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;
  margin-top: 1px;
  padding-left: 4px; 
}

@keyframes shrink-bounce{
  0%{
    transform: scale(1);
  }
  33%{    
    transform: scale(.85);
  }
  100%{
    transform: scale(1);    
  }
}
@keyframes checkbox-check{
  0%{
    width: 0;
    height: 0;
    border-color: #fff;
    transform: translate3d(0,0,0) rotate(45deg);
  }
  33%{
    width: .2em;
    height: 0;
    transform: translate3d(0,0,0) rotate(45deg);
  }
  100%{    
    width: .2em;
    height: .5em;    
    border-color: #fff;
    transform: translate3d(0,-.5em,0) rotate(45deg);
  }
}

input[type="submit"] {
  box-sizing: border-box;
  font-family: OpenSansBold, sans-serif;
	font-size: 16px;
	text-align: center;
	color: #fff;
	padding: 10px 15px;
    border-radius: 5px;
    border: none;
    box-shadow: none;
    /*font-family: inherit;*/
    background-color: /*#ff7000*/#ff2d00;
    transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -webkit-transition: background-color .25s ease-in-out; border-radius: 5px; margin-top: 15px; cursor: pointer; }
    
input[type="submit"]:hover { background-color: #da2701; /*#d75f01; #e06301;*/ }

			

@media screen and (max-width: 950px) {
.title-block { padding-left: 20px; }
.grey-block-content { padding: 15px 20px 25px 20px; }
.wave-block-content { padding: 25px 20px 25px 20px; }
}

@media screen and (max-width: 900px) {
#intro.grey-block-content h1 { font-size: 35px; }
#intro.grey-block-content .left ul li { font-size: 18px; line-height: 25px; margin-bottom: 10px; }
.you-can-do-it h3 { font-size: 25px; }
.you-can-do-it p { font-size: 22px; }
.lavender-text { font-size: 18px; }
}

@media screen and (max-width: 767px) {
.title-block h2 { font-size: 35px; line-height: 35px; }
.title-block h3 { font-size: 18px; }
.header-author { font-size: 14px; }
}

@media screen and (max-width: 700px) {
.footer-block .left { width: 48%; }
.footer-block .right { width: 48%; }
}

@media screen and (max-width: 650px) {
#close .right, #author-pic, #faq .right { display: none; }
#close .left, #author-info, #faq .left { width: auto; float: none; }
#close.grey-block-content { background-image: url(../images/light-wave-3.jpg); background-position: top right; background-repeat: no-repeat; }
.wave-block-content .left, .wave-block-content .right { width: auto; float: none; }
#home-pics .right { width: 48%; float: right; }
#home-pics .left { width: 48%; float: left; }
/*#top-right.right, #bottom-right.right { display: none; }*/
.mobile-book { display: block; }
#top-left.left { float: none; width: auto; }
#lower-block-content .left { width: auto; float: none; }
#lower-block-content .right { display: none; }
#mobile-lower-example { display: block; }
}

@media screen and (max-width: 520px){
.footer-block .left, .footer-block .right { width: auto; float: none; margin-bottom: 30px; }
}

@media screen and (max-width: 500px) {
#home-pics .right, #home-pics .left { width: auto; float: none; }
#home-pics .left { margin-bottom: 30px; }
}

@media screen and (max-width: 479px) {
#nav-container { height: 15px; }
#nav { display: none; }
#mobile-menu-button { display: block; }
}



@media screen and (max-width: 350px) {
.title-block h2 { font-size: 30px; }
#close .title-block h3 { font-size: 22px; line-height: normal; }
}