/*
Theme Name: Into the Wardrobe
Theme URI: http://cslewis.drzeus.net
Author: John Visser
Author URI: http://johnvisser.net
Description: A theme created by <a href="http://johnvisser.net" title="John Visser">John Visser</a>.
Version: 5.0.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* GENERAL */

html {position: relative; min-height: 100%;}
* {border-radius: 0 !important;}
body {background: #f2eed0; margin-bottom: 65px; font-family: 'Open Sans', sans-serif;}
h2 {margin-bottom: 30px; font-family: 'Roboto Slab', serif;}
h3 {font-size: 22px; font-weight: 500; margin-top: 30px; line-height: 1.4em; font-family: 'Roboto Slab', serif;}
h4 {margin-top: 25px; font-weight: 700; font-family: 'Roboto Slab', serif;}
p, li, dt, dd {font-family: 'Open Sans', sans-serif; font-size: 16px;}
p {margin-bottom: 15px;}
p.lead {font-size: 20px;}
li {margin-bottom: 7px;}
dt {margin-top: 20px;}
section {padding-top: 130px; margin-top: -130px;}
button {font-family: 'Roboto Slab', serif;}
a, button {color: #c0713c; transition: all 0.2s linear; -o-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;}
a:hover {text-decoration: none;}
.dl-horizontal dt {width: auto; margin-top: 0;}
.dl-horizontal dd {margin-bottom: 30px;}
.modal-content {background: #ffffe6; padding: 20px; /*;width: 900px; margin-left: -150px;*/}
    .modal-header, .modal-footer {border: none;}
blockquote {border-color: #c0ced1; font-family: 'Open Sans', sans-serif; font-size: 16px; margin-left: 30px;}
blockquote.secondary {background: #f2eed0; padding: 15px; font-size: 14px; border-left: none; margin-left: 20px; margin-right: 20px;}
hr {border: 0; height: 0; border-top: 1px solid #c0ced1; border-bottom: 1px solid #c0ced1; margin-top: 30px; margin-bottom: 30px;}
img.padding {padding-top: 30px; padding-bottom: 20px;}


/* NAVIGATION */

.navbar-right {margin-right: -30px;}
.navbar-header {position: relative;}
.navbar-inverse {background: #c0ced1; border: 0;}
    .navbar-inverse .navbar-brand {font-family: 'Roboto Slab', Georgia, serif; font-weight: 500; font-size: 42px; float: none; margin-top: 20px; margin-bottom: 20px;}
    .navbar-inverse .navbar-nav li {margin-bottom: 0;}
    .navbar-inverse .navbar-nav li a {color: #000;}
    .navbar-inverse .navbar-nav li a:hover, .navbar-inverse .navbar-nav li.active a, .navbar-inverse .navbar-nav .active a:hover, .navbar-inverse .navbar-nav .open a {background: #e7e1cb!important; color: #000!important; text-decoration: none;}
    .navbar-inverse .navbar-nav li a:focus {outline: 0; color: #000;}
    .navbar-inverse .navbar-nav .open .dropdown-menu li > a:hover {color: #c0713c !important;}
.dropdown-menu {background: #e7e1cb; border: none; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.175); box-shadow: 0 3px 6px rgba(0,0,0,.175);}
.navbar-inverse .navbar-nav .active a {background: none; color: #c0713c;}
.navline {background: #ffffe6; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.175); box-shadow: 0 2px 4px rgba(0,0,0,.175);}
.navbar-toggle {margin-top: 13px; border: none !important;}
.navbar-inverse .navbar-nav li a:focus {color: #000;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background: none;}
    .icon-bar {background: #c0713c !important;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: #c0713c;}
.navbar-form {border: none !important;}


/* SIDEBAR */

.sidebar .inner {position: fixed;}
.sidebar ul {padding: 0; list-style: none;}
.sidebar ul li a {font-size: 15px; text-decoration: none; display: block; background: #e7e1cb; color: #000 !important; border: 1px solid #ffffe6; padding: 7px 10px; margin-bottom: 10px; font-weight: 300;}
.sidebar ul li a.donate {border-color: #acb9bc; font-weight: 500;}
.sidebar ul li a:hover, .sidebar ul li.active a {background: #c0ced1;}
.sidebar .jack {margin-top: 30px; position: relative; top: 0; left: 15px; width: 75%;}
.sidebar .social {margin-top: 35px; border-top: 1px solid #c0713c; border-bottom: 1px solid #c0713c; padding: 10px;}
.sidebar .social h2 {float: left; font-size: 16px; text-transform: uppercase; margin: 0 15px 0 0; padding: 0;}
/* .sidebar .social .a2a_s_facebook {background-image: url("/img/social-facebook.png")!important; margin-right: 5px;} */
/* .sidebar .social .a2a_s_twitter {background-image: url("/img/social-twitter.png"); margin-right: 7px;} */
/* .sidebar .social .a2a_s_google_plus {background-image: url("/img/social-googleplus.png");} */
.a2a_svg, .a2a_count {background-color: transparent!important;}
.a2a_svg path {fill: #000!important;}



/* QUOTE OF THE DAY */

#qotd {margin-top: 30px; margin-bottom: 40px; padding: 30px; background: #e7e1cb; }
#qotd p.date {text-align: center; font-weight: 700;}
#qotd blockquote {font-family: 'Open Sans', sans-serif; font-size: 18px; color: #000; padding: 10px 0 0 65px; margin: 0 0 20px 0; border: none; quotes:"\201C""\201D";}
/* #qotd blockquote:before {color: #666; font-family: "FontAwesome"; font-weight: 700; content:open-quote; font-size: 5em; margin-right: .25em; margin-left: -65px; line-height: .1px; vertical-align: -.5em;} */
#qotd .fa-quote-left {color: #666;}
#qotd blockquote :first-child {display: inline;}
#qotd blockquote :last-child {margin-bottom: 0;}
#qotd cite  {font-family: 'Open Sans', sans-serif; font-size: 16px; color: #000; font-style: italic; margin-left: 65px;}


/* GENERAL */

main {margin-top: 170px; margin-bottom: 140px;}
main ul {padding-left: 20px; margin-top: 20px;}
.content {background: #ffffe6; padding: 0 25px 15px 25px; border: 1px solid #c0ced1;}
.disclaimer {font-size: 12px; text-align: center; margin-bottom: 30px;}
/*
.welcome p:first-child {font-size: 20px; margin-bottom: 5px;}
.welcome p:first-child:first-letter {float: left; color: #000; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Roboto Slab', Georgia, serif;}
*/
.welcome h2 {font-family: 'Open Sans', sans-serif; font-size: 22px; margin-bottom: 15px;}
.jack-faq {float: left; margin: 5px 20px 0 0;}
audio {margin-bottom: 25px; background-color: #e7e1cb;}
.audio p {font-size: 14px; margin-bottom: 5px;}
.papers p {line-height: 1.5em;}
.papers h2 {font-size: 25px; margin-bottom: 15px;}
.papers h3 {font-size: 18px; margin-top: 0; margin-bottom: 30px;}
.papers h4 {font-size: 16px; margin-top: 30px;}
#wardrobe h2, #cslewis h2, #narnia h2 {font-size: 20px; font-weight: 700; margin-top: 45px; margin-bottom: -5px;}
    #wardrobe h2 span, #cslewis h2 span, #narnia h2 span {border-bottom: 2px solid;}
footer {background: #c0ced1;  position: absolute; bottom: 0; width: 100%; height: 65px; padding-top: 10px;}
    footer .copyright {margin-top: -7px;}
    footer p {font-size: 13px; margin-bottom: 10px;}
.jack {position: absolute; left: 30px; top: 5px; width: 11.5%; height: auto;}
.nw {white-space: nowrap;}
.email-btn, .forums-btn {margin-top: 30px;}
.email-btn a {font-family: 'Roboto Slab', Georgia, serif; font-size: 16px;}
.donate-btn {margin: 30px 0;}
.fa {margin-right: 10px;}
.photos img {float: left; margin-right: 15px;}
.inner .fa {color: #666;}
    .fa-book.fa-lg {vertical-align: -10%;}
    .fa-beer.fa-lg {vertical-align: -10%;}
    .fa-envelope.fa-lg {vertical-align: -5%;}
.open > .dropdown-menu {animation-name: slidenavAnimation; animation-duration: 0.2s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-name: slidenavAnimation; -webkit-animation-duration: 0.2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; -moz-animation-name: slidenavAnimation; -moz-animation-duration: 0.2s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease; -moz-animation-fill-mode: forwards;}
@keyframes slidenavAnimation {from {opacity: 0;} to {opacity: 1;}}
@-webkit-keyframes slidenavAnimation {from {opacity: 0;} to {opacity: 1;}}


/* TABS */

.tabs .nav-tabs {border-bottom: 2px solid #c0ced1; font-weight: 600;}
    .tabs .nav-tabs > li.active > a, .tabs .nav-tabs > li.active > a:focus, .tabs .nav-tabs > li.active > a:hover {border-width: 0;}
    .tabs .nav-tabs > li > a {border: none; color: #c0713c;}
        .tabs .nav-tabs > li.active > a, .tabs .nav-tabs > li > a:hover {border: none; color: #23527c!important; background: transparent;}
        .tabs .nav-tabs > li > a::after {content: ""; background: #23527c; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0);}
    .tabs .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {transform: scale(1);}
.tabs .tab-nav > li > a::after {background: #21527d none repeat scroll 0% 0%; color: #fff;}
.tabs .tab-content {padding: 0;}


/* MEDIA QUERIES */

@media (max-width: 480px) {
    .navbar-inverse .navbar-brand {font-size: 26px !important;}
    h2 {font-size: 20px; margin-top: 0;}
    .welcome p:first-child {font-size: 16px; font-weight: 700;}
    .welcome p:first-child:first-letter {font-size: 65px; line-height: 50px;}
    /* #qotd blockquote:before {content: none; margin-right: 0; margin-left: 0;} */
    #qotd .fa-quote-left {display: none;}
    #qotd blockquote {padding-left: 15px;}
    #qotd cite  {margin-left: 0!important;}
    .fa {display: none!important;}
    .nav-tabs > li {float:none;}
    .nav-tabs > li a {padding-left: 0;}
    .nav-tabs {border-bottom: none!important;}
    .tabs .nav-tabs > li > a::after {background: none;}
}

@media (max-width: 767px) {
    body {background: #ffffe6;}
    .navline {background: #c0ced1;}
    .navbar-right {margin-right: -15px;}
    .dropdown-menu {background: #e7e1cb !important;}
    main {margin-top: 90px!important; margin-bottom: 0;}
    .sidebar ul {margin-right: 0 !important; margin-left: 4%;}
    .sidebar ul li {width: 30%!important; margin-top: 0!important; white-space: nowrap;}
        .sidebar ul li a {font-size: 14px;}
    .content {border: none; padding-top: 5px; padding-bottom: 20px;}
    #qotd {margin-top: 10px;}
    #qotd blockquote {font-size: 18px; margin-left: -15px;}
    #qotd blockquote:before {font-size: 3.5em; padding-left: 15px; margin-right: .25em;}
    #qotd cite {margin-left: 50px;}
    body {margin-bottom: 120px;}
    footer {height: 120px;}
    footer p {text-align: center!important;}
}

@media (max-width: 991px) {
    .navbar-inverse .navbar-brand {font-size: 32px; margin-top: 5px; margin-bottom: 5px;}
    .navbar-right {float: none!important; padding: 0;}
    .input-group {display: none!important;}
    main {margin-top: 130px;}
    .sidebar ul {margin-right: 0 !important;}
    .sidebar ul li {display: inline-block; width: 32%; text-align: center; margin-top: 10px; margin-right: 10px;}
        .sidebar ul li:last-child {margin-right: 0 !important;}
        .sidebar .inner {position: relative;}
    .donate-btn {margin-top: 0!important;}
}

@media (max-width: 1999px) {
    .sidebar ul {margin-right: 15px;}
    .sidebar .social {width: 94%;}
}

@media (min-width: 1200px) {
    main  {margin-top: 180px;}
    /* .content {padding-left: 70px; padding-right: 70px;} */
    .navbar-inverse .navbar-brand {padding-left: 192px; margin-top: 25px; margin-bottom: 25px;}
    .navbar-nav {margin-left: -15px;}
    .sidebar ul {width: 110%;}
    .sidebar .social {width: 110%;}
}


/* MOBILE BUTTON ANIMATION */

.navbar-toggle {overflow: hidden;}
.navbar-toggle .icon-bar {-webkit-transition: opacity, -webkit-transform; transition: opacity, -webkit-transform; transition: opacity, transform; transition: opacity, transform, -webkit-transform; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7); transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {-webkit-transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg);}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {opacity: 0; /* -webkit-transform: translateX(-100%); transform: translateX(-100%); */}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {-webkit-transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg);}


/* SNOW */

#snowflakeContainer {
    position: relative;
    left: 0px;
    top: 0px;
}
.snowflake {
    padding-left: 15px;
    font-family: Cambria, Georgia, serif;
    font-size: 14px;
    line-height: 24px;
    position: fixed;
    color: #FFFFFF;
    user-select: none;
    z-index: 1000;
}
.snowflake:hover {
    cursor: default;
}