@charset "UTF-8";

/***********
 * General *
 ***********/

body {
  font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;
  font-size:14px;
  background-color: #fffaf0; /*#f9f7ea;*/
  margin: 0;
  padding: 0;
  color: #858585;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:300; font-stretch:normal;
  margin-top: 0;   /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
   /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
  /*color:#a75362;*/
  color: #1d6c70;
}

h1 {
  font-size:20px;
}

p {
  margin-top: 0;   /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
/* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
  border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
  color: #1d6c70;
  text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
  color: #1d6c70;
  text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  text-decoration: underline;
}

/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
  max-width: 950px;
  width: 87%;
  background-color: #fffaf0; /*#f9f7ea;*/
  margin: 0 auto;
}


@media (max-width: 975px) {
  .container{
    width: 95%;
  }
}


/**********
 * Header *
 **********/
.header {
  text-align:center;
  margin-top:75px;
}

/* Nyan cat in the header */
.nyan{
  width: 30px;
  position: fixed;
  top: 10px;
  left: -60px;
  z-index: 100;
  -webkit-animation: nyan 10s linear;
  animation: nyan 10s linear;
}

@-webkit-keyframes nyan {
    from {left: -60px;}
    to {left: calc(101vw);}
}

@keyframes nyan {
    from {left: -60px;}
    to {left: calc(101vw);}
}

@media (max-width: 800px) {
  .nyan{
     -webkit-animation: nyan 6s linear;
     animation: nyan 6s linear;
  }
}



/* Header Title */
a.headertitle:link {
  color: #0c4245;
  font-size: 26px;
  letter-spacing:.75px;
  text-decoration:none;
}
a.headertitle:visited {
  color: #0c4245;
}
a.headertitle:hover, a.headertitle:active, a.headertitle:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  color:#a75362;
  font-size:26px;
  letter-spacing:.75px;
}


/* Circles in header (nav bar)*/
.nav {
  padding-top:25px;
  padding-bottom:25px;
  border-bottom: 1px solid #94948C;
  margin-bottom: 5px;
  position: relative;
}

.nav ul{
  text-align: center;
}

.nav ul:after {
  height: 0;
  width: 0;
  clear: both;
  display: block;
  content: "";
} /* Clears floating nav elements */

.nav li {
  list-style-type:none;
  display: inline-block;
  opacity: 1;
  filter:alpha(opacity=100); /* For IE8 and earlier */
  vertical-align: bottom;
  position: relative;
  height: 0;
  padding-top: 12.1%;
  width: 12.1%;
  border-radius: 100%;
  box-sizing: border-box;
  border: 2px solid #CAA3A7;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
  transition-timing-function: ease-out;
  -webkit-transition: -webkit-transform 500ms opacity 500ms;
  transition: -webkit-transform 500ms opacity 500ms;
  transition: transform 500ms, opacity 500ms ease-out;
  transition: transform 500ms opacity 500ms, -webkit-transform 500ms opacity 500ms;
}

.nav li:last-child{
  margin: 0;
}

.nav li:hover{
  opacity: 0.7;
  -webkit-transform: scale(.97);
  transform: scale(.97);
}

.nav input, .nav label{
  display: none;
}

.nav li .padewan{
  display: inline-block;
  vertical-align: middle;
  color: #60605D;
  text-decoration: none;
  text-transform: uppercase;
}

.nav li a{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.nav li .link-wrapper{
  display: block;
  position: absolute;
  top: 5%;
  left: 5%;
  box-sizing: border-box;
  width: 90%;
  height: 90%;
  border: 2px solid #90B0AC;
  border-radius: 100%;
}

.nav li .link-wrapper .jedi{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.nav li .link-inner{
  display: table-row;
  height: 100%;
  position: relative;
}
@media(max-width: 800px) {
  .nav li a{
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  /* Mobile Menu */
  .nav{
    padding-top: 50px;
  }
  .nav label{
    position: absolute;
    top: 10px;
    display: block;
    left: calc(50% - 16px);
    border-radius: 2px;
  }

  .nav .navInnerWrap{
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 500ms;
    transition: max-height 500ms;
  }

  .nav input:checked + .navInnerWrap{
    max-height: 1000px;
  }

  .nav li{
    margin: 0 5%;
    float: none;
    height: auto;
    border: none;
    border-bottom: 1px solid black;
    width: 90%;
    border-radius: 0;
    padding: 0;
  }

  .nav li:last-child {
    margin: 0 5%;
    border-bottom: none;
  }

  .nav li .link-wrapper {
    display: block;
    position: static;
    overflow: hidden;
    text-align: center;
    padding: 4% 0;
    width: 100%;
    height: auto;
    border: none;
  }

  .nav li a {
    border: none;
    max-width: initial;
    display: block;
    overflow: visible;
    position: static;
  }

}

.categoryHeader{
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 2em;
}

.categoryHeader a{
  text-decoration: underline;
}


.writing{
  text-align: center;
}

.writing li h4{
  margin-bottom: 1px;
  border-bottom: 1px solid #aaa;
  color: black;
  font-size: 1.2em;
  position: relative;
}

.writing li, .books li{
  list-style: none;
  display: inline-block;
  width: 26%;
  vertical-align: middle;
  text-align: center;
  padding: 1.5% 3.5%;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}

.writing li:hover{
  opacity: 0.7;
}

.writing li a{
 text-decoration: none;
 color: inherit;
}

.writing .postTitle {
  width: 100%;
  color: #1d6c70;
}

.writing .details{
  min-height: 2em;
  margin-bottom: 1em;
}


@media (max-width:820px){
  .writing li, .books li{
    width: 42.6%;
  }
}

@media (max-width:550px){
  .writing li, .books li{
    width: 80%;
    margin: 1.5% 8.5%;
  }
}

.books li img {
  width: 95%;
  height: auto;
  margin: 0 auto 20px;
}



.subcategory-head{
  margin-bottom: 2em;
  font-size: 1.2em;
  text-align: center;
  text-decoration: underline;
  margin-top: 4em;
}

.books li h4{
  min-height: 2em;
}

.books li a:hover{
  text-decoration: none;
}

.videos li{
  list-style: none;
  display: inline-block;
  width: 46%;
  vertical-align: top;
  text-align: center;
  padding: 1.5%;
  overflow: hidden;
  cursor: pointer;
}

@media (max-width:700px){
  .videos li{
    width: 90%;
    display: block;
    margin: 0 auto;
  }
}

.videos li img{
  width: 100%;
}

.videos li h4{
  font-size: 1.1em;
  margin-bottom: 5px;
  text-align: left;
  min-height: 2em;
}

.videos li h4 span{
  color: #848484;
}

.videos .video{
  width: 100%;
  padding-top: 73%;
  background-size: cover;
  background-position: center center;
}


.videos .video iframe{
  width: 100%;
  display: none;
}

.videos .video.active{
  padding-top: 0;
  background-size: 0;
}

.videos .video.active iframe{
  display: block;
}



.content {
  padding: 25px 0 30px;
  margin-bottom: 5px;
  border-bottom: 1px solid #94948C;
}

/*.footer_divider {
  margin:5 auto;
}*/

/* ~~ The footer ~~ */
.footer {
  text-align:center;
  margin: 0 auto;
  padding: 10px 0;
  background-color: #f9f7ea;
  font-size:12px;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
  float: right;
  margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
  float: left;
  margin-right: 8px;
}
.clearfloat { /* this class can be placed on a  or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
  clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
}