html, body {margin: 0; padding: 0; height: 100%; width: 100%; background: url('../imgs/bg_light.jpg'); 
  font-family: 'IM Fell DW Pica' }

body #myModal {

      width: 853px; /* desired relative width */
  margin-left: -426px;
}

body #shareModal .modal-body {
  height: 200px
}

a {outline: none;}

#introduction {
background: url('../imgs/bg_header.jpg') top left no-repeat fixed; 
margin: 0; 
padding: 0 ;
position: absolute; 
background-size: cover; 
min-height: 100%; 
width: 100%; 
color: white; 
z-index: 100}
#introduction h2 {text-align: center;}
#introduction img { margin: 0 0 30px 0;  }
#introduction #introCopy {max-width: 800px; padding: 10% 10% 0; position: relative; min-height: 100%; }
#introduction p {margin: 0}
#introduction .btn_next {color: white; font-size: 54px; border: none;}


#wrapper { min-height: 100%}
.content-wrapper {position: absolute; top: 100%; width: 100%; min-height: 100%}

.sectionHeader h1 {text-shadow: 0 0 2px #fff; text-align: center!important; font-size: 160px; color: white; padding: 150px 0}


.subsection {position: relative; overflow-x:hidden;  min-height: 100%; font-size: 24px; line-height: 34px; padding:50px 100px 50px 50px; margin: 0 0 500px 0 }


/*Sidenav*/

#brand {background: url('../imgs/logo.jpg') center center no-repeat; height: 34px;
padding: 45px 20px 0 0; display: block; text-indent: -9999px; margin: 0}
.sidenav {position: absolute; margin: 0; background-color: #f3f1e5; height: 100%; 
  overflow-y: scroll;  overflow-x: hidden; max-width: 220px; min-width: 220px }
.sidenav ul {margin: 20px 0 50px}
.sidenav li {list-style: none; z-index: 1000;}
.sidenav li a {font-size: 24px; color: #b5b3ab;  
  display: block; padding: 10px 20px; }
.sidenav li a:hover  {background: #e4dfd4!important; color: #191919; }

.share {
    border: 3px solid #151515;
    margin: -25px 20px 0; 
    top: 0;
    left: 0; 
    color: white;
    font-size: 18px;
    padding: 5px;
    color: white;
    background: #151515;
    font-family: VeneerTwo;
    text-align: center;
    cursor: pointer;
 
}

.arrow {font-size: 12px; float: right; margin: 0 5px 0 0; padding: 0; display: block; width: 10px}

.share .socialLinks {display: none; margin: 10px 0}
.share .socialLinks .channel{margin-bottom: 5px; display: block}

#scroll-wrapper {overflow: hidden; margin: 0 0 0 220px; padding: 0}
#scroll-wrapper:after  {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: 100px;
    pointer-events: none;
    top: auto;
    background: 
        linear-gradient(
            to top, 
            rgba(243,241,229,1) 0%, 
            rgba(243,241,229,0) 100%
        );
}


.nav-sectionHeader  {margin: 20px 0 10px 20px; font-size: 2.2em; text-shadow: 0 0 1px #141414;}
.nav-sectionHeader a  {font-size: 1.2em!important;  text-shadow: 0 0 1px #141414;}

/* Book Page*/

.pageTitle {font-size: 1.5em; margin: 0 0 20px 0; text-decoration: underline;}

.page {
  font-family: 'Waiting for the sunrise'; 
  font-size: 18px;
  background: url('../imgs/grid.gif'); serif; 
  background-color: #fff; 
  box-shadow: 0px 5px 10px #999; 
  padding: 50px;
  height: 800px; 
  border-top-left-radius:2em; border-bottom-left-radius:2em;
  margin: 5% 0;  
  position: relative;

}
.page ul {margin: 0; padding: 0; list-style: none;}
.page ul li {margin: 10px -10px;  padding: 2px; display: block; width: 100%; white-space:nowrap}
.page ul li ul li {margin: 10px 0 10px 50px; padding: 0 0 0 30px;}

.task { float: left; margin: 0 10px; padding: 0 10px; display: block;  height: 20px;background: url('../imgs/icons.png') no-repeat 0 -76px;}
.taskCheck { float: left; margin: 0 10px; padding: 0 10px; display: block;  height: 20px;background: url('../imgs/icons.png') no-repeat 0 -104px;}
.event { float: left; margin: 0 10px; padding: 0 10px; display:block;  height: 20px;background: url('../imgs/icons.png') no-repeat 0 -47px;}
.note { float: left; margin: 0 10px; padding: 0 10px; display: block;  height: 20px;background:url('../imgs/icons.png') no-repeat 0 -26px;}

.star, .explore, .inspiration { float: left; padding: 0; margin: 0 -20px;  display: block; width: 20px; height: 20px; background: url('../imgs/icons.png') no-repeat }
.explore {background:url('../imgs/icons.png')0 -130px }
.inspiration {background: url('../imgs/icons.png')0 -155px}

.page-number {position: absolute; bottom:0; margin: 0 0 50px 0; font-size: 34px;  }

#bookpage { margin: 0 -600px 0 0; }
#bookpage li { display: none }

#indexpage {margin: 0!important}
#indexpage tr {padding: 15px;}
#indexpage td {padding: 5px;}

#calendar {background: url('../imgs/grid.gif'); 
    border-top-left-radius:1em; border-top-right-radius:1em;
  font-family: 'Waiting for the sunrise'; 
  font-size: 18px;  
  height: 250px; 
  overflow: hidden;  
  box-shadow: 0 -2px 5px #999;
  margin: 50px 20px ;
  position: relative
}

#calendar .pageTitle {text-align: center;}
#calendar .calendarPage{border-right: 1px solid #ccc; padding: 40px;}
#calendar:after  {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 100;
    pointer-events: none;
    top: auto;
    background: 
        linear-gradient(
            to top, 
            rgba(255,255,255,1) 0%, 
            rgba(255,255,255,0) 100%
        );
}

#calendar ul li {margin: 8px 0px; display: block; width: 100%; padding: 0 0 0 30px }
#calendar ol li {margin: 10px 0px;   }

#dailyCalendar, #collectionPage, #indexpage  {margin: 5% 0!important}

#about h3 {padding: 0;}
#about ul {margin: 0; padding: 0}
#about ul li  {padding: 5px 0; display: block; font-size: 14px}

#about .social  {padding: 10px 0 70px 0; margin: 0 0 50px 0; display: block; border-bottom: 5px solid #151515;}
#about .social li {font-size: 34px; float: left; line-height: 42px;display: block; padding: 5px; font-family: VeneerTwo; }
#about .social li a{  color: #e4dfd4; display: block;  -webkit-transition: .2s;  }
#about .social li a:hover{  color: #151515}

#license {margin: 100px 0 50px 0; font-size: 14px!important; padding:  none}
.well {background: #f3f1e5!important }
#license img {float: right;  padding: 10px 20px 10px 0;  }

/*Typography*/

.VeneerExtras { font-family: VeneerExtras; }
.VeneerExtras-Italic { font-family: VeneerExtras-Italic; }
.Veneer-Italic { font-family: Veneer-Italic; }
.Veneer { font-family: Veneer; }
.VeneerTwo { font-family: VeneerTwo; }
.VeneerThree { font-family: VeneerThree; }
.VeneerThree-Italic { font-family: VeneerThree-Italic; }
.VeneerTwo-Italic { font-family: VeneerTwo-Italic; }

h1, h2, h3, h4, h5, .sidenav li, .btn_next, .btn_prev, .socialLink { 
  font-family: VeneerTwo, sans-sarif; 
  font-weight: normal; 
  font-style: normal; 
}

h2 {font-size: 140px; margin: 0 0 50px 0; line-height: 115px;}
h3 {font-size: 36px}

p {font-size: 20px; line-height: 28px; ; margin: 0 0 20px 0;}

a {color: #151515; font-weight: bold}
a:hover {text-decoration: none; color: #000;}


.lead {font-size: 30px; line-height: 40px; margin-bottom: 50px}

.shareTitle a{color: white; text-align: center;}
/*Other*/

.active {background: #e4dfd4;}

.btn_next {color: #e4dfd4; font-size: 34px; padding: 10px 0; display: block; margin: 50px 0; border-top: 1px solid #e4dfd4;-webkit-transition: .2s; }
.btn_next:hover {text-decoration: none; color:#151515;}

.fixed {position: fixed; top: 0}
.stuck {position: fixed; top: 10%; right: 0;}
.offset2 {min-width: 200px!important}
.highlight {background: url('../imgs/highlight.png') no-repeat;}



/* Large desktop */
@media (min-width: 1200px) {}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1200px) { 
    h2 {font-size: 80px; margin: 0 0 50px 0; line-height: 60px} 
    .subsection {font-size: 18px; line-height: 28px; }
    .span7, {margin: 0; padding:  0 50px 0 20px}

  }
 
/* Landscape phone to portrait tablet */
@media (max-width: 850px) {
.page {display: none}
.sidenav { display: none}
 h2 {font-size: 70px; margin: 0 0 50px 0; line-height: 60px} 
 #scroll-wrapper {margin-left: 0px!important;}
 .subsection {min-height: 100%; padding: 25px 50px 25px 25px}
 #brand {background-position: 20px }
}
 
/* Landscape phones and down */
@media (max-width: 480px) {  
.page {display: none!important}
.span8, .span7 {width: 100%!important}
.subsection {height: 100%; margin: 20px}
#calendar {display: none}
#introduction {background: url('../imgs/bg_header.jpg') left top no-repeat fixed;     
-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;  }

}