/* Generated by bin/css_bundle.php - do not edit. */

/* ---- css/bootstrap.css ---- */
/*!
 * Bootstrap v3.3.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../../fonts/glyphicons-halflings-regular.eot');
  src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
  content: "\2a";
}
.glyphicon-plus:before {
  content: "\2b";
}
.glyphicon-euro:before,
.glyphicon-eur:before {
  content: "\20ac";
}
.glyphicon-minus:before {
  content: "\2212";
}
.glyphicon-cloud:before {
  content: "\2601";
}
.glyphicon-envelope:before {
  content: "\2709";
}
.glyphicon-pencil:before {
  content: "\270f";
}
.glyphicon-glass:before {
  content: "\e001";
}
.glyphicon-music:before {
  content: "\e002";
}
.glyphicon-search:before {
  content: "\e003";
}
.glyphicon-heart:before {
  content: "\e005";
}
.glyphicon-star:before {
  content: "\e006";
}
.glyphicon-star-empty:before {
  content: "\e007";
}
.glyphicon-user:before {
  content: "\e008";
}
.glyphicon-film:before {
  content: "\e009";
}
.glyphicon-th-large:before {
  content: "\e010";
}
.glyphicon-th:before {
  content: "\e011";
}
.glyphicon-th-list:before {
  content: "\e012";
}
.glyphicon-ok:before {
  content: "\e013";
}
.glyphicon-remove:before {
  content: "\e014";
}
.glyphicon-zoom-in:before {
  content: "\e015";
}
.glyphicon-zoom-out:before {
  content: "\e016";
}
.glyphicon-off:before {
  content: "\e017";
}
.glyphicon-signal:before {
  content: "\e018";
}
.glyphicon-cog:before {
  content: "\e019";
}
.glyphicon-trash:before {
  content: "\e020";
}
.glyphicon-home:before {
  content: "\e021";
}
.glyphicon-file:before {
  content: "\e022";
}
.glyphicon-time:before {
  content: "\e023";
}
.glyphicon-road:before {
  content: "\e024";
}
.glyphicon-download-alt:before {
  content: "\e025";
}
.glyphicon-download:before {
  content: "\e026";
}
.glyphicon-upload:before {
  content: "\e027";
}
.glyphicon-inbox:before {
  content: "\e028";
}
.glyphicon-play-circle:before {
  content: "\e029";
}
.glyphicon-repeat:before {
  content: "\e030";
}
.glyphicon-refresh:before {
  content: "\e031";
}
.glyphicon-list-alt:before {
  content: "\e032";
}
.glyphicon-lock:before {
  content: "\e033";
}
.glyphicon-flag:before {
  content: "\e034";
}
.glyphicon-headphones:before {
  content: "\e035";
}
.glyphicon-volume-off:before {
  content: "\e036";
}
.glyphicon-volume-down:before {
  content: "\e037";
}
.glyphicon-volume-up:before {
  content: "\e038";
}
.glyphicon-qrcode:before {
  content: "\e039";
}
.glyphicon-barcode:before {
  content: "\e040";
}
.glyphicon-tag:before {
  content: "\e041";
}
.glyphicon-tags:before {
  content: "\e042";
}
.glyphicon-book:before {
  content: "\e043";
}
.glyphicon-bookmark:before {
  content: "\e044";
}
.glyphicon-print:before {
  content: "\e045";
}
.glyphicon-camera:before {
  content: "\e046";
}
.glyphicon-font:before {
  content: "\e047";
}
.glyphicon-bold:before {
  content: "\e048";
}
.glyphicon-italic:before {
  content: "\e049";
}
.glyphicon-text-height:before {
  content: "\e050";
}
.glyphicon-text-width:before {
  content: "\e051";
}
.glyphicon-align-left:before {
  content: "\e052";
}
.glyphicon-align-center:before {
  content: "\e053";
}
.glyphicon-align-right:before {
  content: "\e054";
}
.glyphicon-align-justify:before {
  content: "\e055";
}
.glyphicon-list:before {
  content: "\e056";
}
.glyphicon-indent-left:before {
  content: "\e057";
}
.glyphicon-indent-right:before {
  content: "\e058";
}
.glyphicon-facetime-video:before {
  content: "\e059";
}
.glyphicon-picture:before {
  content: "\e060";
}
.glyphicon-map-marker:before {
  content: "\e062";
}
.glyphicon-adjust:before {
  content: "\e063";
}
.glyphicon-tint:before {
  content: "\e064";
}
.glyphicon-edit:before {
  content: "\e065";
}
.glyphicon-share:before {
  content: "\e066";
}
.glyphicon-check:before {
  content: "\e067";
}
.glyphicon-move:before {
  content: "\e068";
}
.glyphicon-step-backward:before {
  content: "\e069";
}
.glyphicon-fast-backward:before {
  content: "\e070";
}
.glyphicon-backward:before {
  content: "\e071";
}
.glyphicon-play:before {
  content: "\e072";
}
.glyphicon-pause:before {
  content: "\e073";
}
.glyphicon-stop:before {
  content: "\e074";
}
.glyphicon-forward:before {
  content: "\e075";
}
.glyphicon-fast-forward:before {
  content: "\e076";
}
.glyphicon-step-forward:before {
  content: "\e077";
}
.glyphicon-eject:before {
  content: "\e078";
}
.glyphicon-chevron-left:before {
  content: "\e079";
}
.glyphicon-chevron-right:before {
  content: "\e080";
}
.glyphicon-plus-sign:before {
  content: "\e081";
}
.glyphicon-minus-sign:before {
  content: "\e082";
}
.glyphicon-remove-sign:before {
  content: "\e083";
}
.glyphicon-ok-sign:before {
  content: "\e084";
}
.glyphicon-question-sign:before {
  content: "\e085";
}
.glyphicon-info-sign:before {
  content: "\e086";
}
.glyphicon-screenshot:before {
  content: "\e087";
}
.glyphicon-remove-circle:before {
  content: "\e088";
}
.glyphicon-ok-circle:before {
  content: "\e089";
}
.glyphicon-ban-circle:before {
  content: "\e090";
}
.glyphicon-arrow-left:before {
  content: "\e091";
}
.glyphicon-arrow-right:before {
  content: "\e092";
}
.glyphicon-arrow-up:before {
  content: "\e093";
}
.glyphicon-arrow-down:before {
  content: "\e094";
}
.glyphicon-share-alt:before {
  content: "\e095";
}
.glyphicon-resize-full:before {
  content: "\e096";
}
.glyphicon-resize-small:before {
  content: "\e097";
}
.glyphicon-exclamation-sign:before {
  content: "\e101";
}
.glyphicon-gift:before {
  content: "\e102";
}
.glyphicon-leaf:before {
  content: "\e103";
}
.glyphicon-fire:before {
  content: "\e104";
}
.glyphicon-eye-open:before {
  content: "\e105";
}
.glyphicon-eye-close:before {
  content: "\e106";
}
.glyphicon-warning-sign:before {
  content: "\e107";
}
.glyphicon-plane:before {
  content: "\e108";
}
.glyphicon-calendar:before {
  content: "\e109";
}
.glyphicon-random:before {
  content: "\e110";
}
.glyphicon-comment:before {
  content: "\e111";
}
.glyphicon-magnet:before {
  content: "\e112";
}
.glyphicon-chevron-up:before {
  content: "\e113";
}
.glyphicon-chevron-down:before {
  content: "\e114";
}
.glyphicon-retweet:before {
  content: "\e115";
}
.glyphicon-shopping-cart:before {
  content: "\e116";
}
.glyphicon-folder-close:before {
  content: "\e117";
}
.glyphicon-folder-open:before {
  content: "\e118";
}
.glyphicon-resize-vertical:before {
  content: "\e119";
}
.glyphicon-resize-horizontal:before {
  content: "\e120";
}
.glyphicon-hdd:before {
  content: "\e121";
}
.glyphicon-bullhorn:before {
  content: "\e122";
}
.glyphicon-bell:before {
  content: "\e123";
}
.glyphicon-certificate:before {
  content: "\e124";
}
.glyphicon-thumbs-up:before {
  content: "\e125";
}
.glyphicon-thumbs-down:before {
  content: "\e126";
}
.glyphicon-hand-right:before {
  content: "\e127";
}
.glyphicon-hand-left:before {
  content: "\e128";
}
.glyphicon-hand-up:before {
  content: "\e129";
}
.glyphicon-hand-down:before {
  content: "\e130";
}
.glyphicon-circle-arrow-right:before {
  content: "\e131";
}
.glyphicon-circle-arrow-left:before {
  content: "\e132";
}
.glyphicon-circle-arrow-up:before {
  content: "\e133";
}
.glyphicon-circle-arrow-down:before {
  content: "\e134";
}
.glyphicon-globe:before {
  content: "\e135";
}
.glyphicon-wrench:before {
  content: "\e136";
}
.glyphicon-tasks:before {
  content: "\e137";
}
.glyphicon-filter:before {
  content: "\e138";
}
.glyphicon-briefcase:before {
  content: "\e139";
}
.glyphicon-fullscreen:before {
  content: "\e140";
}
.glyphicon-dashboard:before {
  content: "\e141";
}
.glyphicon-paperclip:before {
  content: "\e142";
}
.glyphicon-heart-empty:before {
  content: "\e143";
}
.glyphicon-link:before {
  content: "\e144";
}
.glyphicon-phone:before {
  content: "\e145";
}
.glyphicon-pushpin:before {
  content: "\e146";
}
.glyphicon-usd:before {
  content: "\e148";
}
.glyphicon-gbp:before {
  content: "\e149";
}
.glyphicon-sort:before {
  content: "\e150";
}
.glyphicon-sort-by-alphabet:before {
  content: "\e151";
}
.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152";
}
.glyphicon-sort-by-order:before {
  content: "\e153";
}
.glyphicon-sort-by-order-alt:before {
  content: "\e154";
}
.glyphicon-sort-by-attributes:before {
  content: "\e155";
}
.glyphicon-sort-by-attributes-alt:before {
  content: "\e156";
}
.glyphicon-unchecked:before {
  content: "\e157";
}
.glyphicon-expand:before {
  content: "\e158";
}
.glyphicon-collapse-down:before {
  content: "\e159";
}
.glyphicon-collapse-up:before {
  content: "\e160";
}
.glyphicon-log-in:before {
  content: "\e161";
}
.glyphicon-flash:before {
  content: "\e162";
}
.glyphicon-log-out:before {
  content: "\e163";
}
.glyphicon-new-window:before {
  content: "\e164";
}
.glyphicon-record:before {
  content: "\e165";
}
.glyphicon-save:before {
  content: "\e166";
}
.glyphicon-open:before {
  content: "\e167";
}
.glyphicon-saved:before {
  content: "\e168";
}
.glyphicon-import:before {
  content: "\e169";
}
.glyphicon-export:before {
  content: "\e170";
}
.glyphicon-send:before {
  content: "\e171";
}
.glyphicon-floppy-disk:before {
  content: "\e172";
}
.glyphicon-floppy-saved:before {
  content: "\e173";
}
.glyphicon-floppy-remove:before {
  content: "\e174";
}
.glyphicon-floppy-save:before {
  content: "\e175";
}
.glyphicon-floppy-open:before {
  content: "\e176";
}
.glyphicon-credit-card:before {
  content: "\e177";
}
.glyphicon-transfer:before {
  content: "\e178";
}
.glyphicon-cutlery:before {
  content: "\e179";
}
.glyphicon-header:before {
  content: "\e180";
}
.glyphicon-compressed:before {
  content: "\e181";
}
.glyphicon-earphone:before {
  content: "\e182";
}
.glyphicon-phone-alt:before {
  content: "\e183";
}
.glyphicon-tower:before {
  content: "\e184";
}
.glyphicon-stats:before {
  content: "\e185";
}
.glyphicon-sd-video:before {
  content: "\e186";
}
.glyphicon-hd-video:before {
  content: "\e187";
}
.glyphicon-subtitles:before {
  content: "\e188";
}
.glyphicon-sound-stereo:before {
  content: "\e189";
}
.glyphicon-sound-dolby:before {
  content: "\e190";
}
.glyphicon-sound-5-1:before {
  content: "\e191";
}
.glyphicon-sound-6-1:before {
  content: "\e192";
}
.glyphicon-sound-7-1:before {
  content: "\e193";
}
.glyphicon-copyright-mark:before {
  content: "\e194";
}
.glyphicon-registration-mark:before {
  content: "\e195";
}
.glyphicon-cloud-download:before {
  content: "\e197";
}
.glyphicon-cloud-upload:before {
  content: "\e198";
}
.glyphicon-tree-conifer:before {
  content: "\e199";
}
.glyphicon-tree-deciduous:before {
  content: "\e200";
}
.glyphicon-cd:before {
  content: "\e201";
}
.glyphicon-save-file:before {
  content: "\e202";
}
.glyphicon-open-file:before {
  content: "\e203";
}
.glyphicon-level-up:before {
  content: "\e204";
}
.glyphicon-copy:before {
  content: "\e205";
}
.glyphicon-paste:before {
  content: "\e206";
}
.glyphicon-alert:before {
  content: "\e209";
}
.glyphicon-equalizer:before {
  content: "\e210";
}
.glyphicon-king:before {
  content: "\e211";
}
.glyphicon-queen:before {
  content: "\e212";
}
.glyphicon-pawn:before {
  content: "\e213";
}
.glyphicon-bishop:before {
  content: "\e214";
}
.glyphicon-knight:before {
  content: "\e215";
}
.glyphicon-baby-formula:before {
  content: "\e216";
}
.glyphicon-tent:before {
  content: "\26fa";
}
.glyphicon-blackboard:before {
  content: "\e218";
}
.glyphicon-bed:before {
  content: "\e219";
}
.glyphicon-apple:before {
  content: "\f8ff";
}
.glyphicon-erase:before {
  content: "\e221";
}
.glyphicon-hourglass:before {
  content: "\231b";
}
.glyphicon-lamp:before {
  content: "\e223";
}
.glyphicon-duplicate:before {
  content: "\e224";
}
.glyphicon-piggy-bank:before {
  content: "\e225";
}
.glyphicon-scissors:before {
  content: "\e226";
}
.glyphicon-bitcoin:before {
  content: "\e227";
}
.glyphicon-yen:before {
  content: "\00a5";
}
.glyphicon-ruble:before {
  content: "\20bd";
}
.glyphicon-scale:before {
  content: "\e230";
}
.glyphicon-ice-lolly:before {
  content: "\e231";
}
.glyphicon-ice-lolly-tasted:before {
  content: "\e232";
}
.glyphicon-education:before {
  content: "\e233";
}
.glyphicon-option-horizontal:before {
  content: "\e234";
}
.glyphicon-option-vertical:before {
  content: "\e235";
}
.glyphicon-menu-hamburger:before {
  content: "\e236";
}
.glyphicon-modal-window:before {
  content: "\e237";
}
.glyphicon-oil:before {
  content: "\e238";
}
.glyphicon-grain:before {
  content: "\e239";
}
.glyphicon-sunglasses:before {
  content: "\e240";
}
.glyphicon-text-size:before {
  content: "\e241";
}
.glyphicon-text-color:before {
  content: "\e242";
}
.glyphicon-text-background:before {
  content: "\e243";
}
.glyphicon-object-align-top:before {
  content: "\e244";
}
.glyphicon-object-align-bottom:before {
  content: "\e245";
}
.glyphicon-object-align-horizontal:before {
  content: "\e246";
}
.glyphicon-object-align-left:before {
  content: "\e247";
}
.glyphicon-object-align-vertical:before {
  content: "\e248";
}
.glyphicon-object-align-right:before {
  content: "\e249";
}
.glyphicon-triangle-right:before {
  content: "\e250";
}
.glyphicon-triangle-left:before {
  content: "\e251";
}
.glyphicon-triangle-bottom:before {
  content: "\e252";
}
.glyphicon-triangle-top:before {
  content: "\e253";
}
.glyphicon-console:before {
  content: "\e254";
}
.glyphicon-superscript:before {
  content: "\e255";
}
.glyphicon-subscript:before {
  content: "\e256";
}
.glyphicon-menu-left:before {
  content: "\e257";
}
.glyphicon-menu-right:before {
  content: "\e258";
}
.glyphicon-menu-down:before {
  content: "\e259";
}
.glyphicon-menu-up:before {
  content: "\e260";
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
}
a:focus {
  outline: 0;
}
figure {
  margin: 0;
}
img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.img-circle {
  border-radius: 50%;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #777;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}
h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 30px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}
p {
  margin: 0 0 10px;
}
.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .lead {
    font-size: 21px;
  }
}
small,
.small {
  font-size: 85%;
}
mark,
.mark {
  padding: .2em;
  background-color: #fcf8e3;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-muted {
  color: #777;
}
.text-primary {
  color: #337ab7;
}
a.text-primary:hover {
  color: #286090;
}
.text-success {
  color: #3c763d;
}
a.text-success:hover {
  color: #2b542c;
}
.text-info {
  color: #31708f;
}
a.text-info:hover {
  color: #245269;
}
.text-warning {
  color: #8a6d3b;
}
a.text-warning:hover {
  color: #66512c;
}
.text-danger {
  color: #a94442;
}
a.text-danger:hover {
  color: #843534;
}
.bg-primary {
  color: #fff;
  background-color: #337ab7;
}
a.bg-primary:hover {
  background-color: #286090;
}
.bg-success {
  background-color: #dff0d8;
}
a.bg-success:hover {
  background-color: #c1e2b3;
}
.bg-info {
  background-color: #d9edf7;
}
a.bg-info:hover {
  background-color: #afd9ee;
}
.bg-warning {
  background-color: #fcf8e3;
}
a.bg-warning:hover {
  background-color: #f7ecb5;
}
.bg-danger {
  background-color: #f2dede;
}
a.bg-danger:hover {
  background-color: #e4b9b9;
}
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}
dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #777;
}
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  font-size: 80%;
  line-height: 1.42857143;
  color: #777;
}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: '\2014 \00A0';
}
.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  text-align: right;
  border-right: 5px solid #eee;
  border-left: 0;
}
.blockquote-reverse footer:before,
blockquote.pull-right footer:before,
.blockquote-reverse small:before,
blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before {
  content: '';
}
.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after {
  content: '\00A0 \2014';
}
address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.42857143;
}
code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}
kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  background-color: #333;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: bold;
  -webkit-box-shadow: none;
          box-shadow: none;
}
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}
pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}
.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
}
table {
  background-color: transparent;
}
caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}
th {
  text-align: left;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="search"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
input[type="file"] {
  display: block;
}
input[type="range"] {
  display: block;
  width: 100%;
}
select[multiple],
select[size] {
  height: auto;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
output {
  display: block;
  padding-top: 7px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
}
.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 10px 15px;
  font-size: 15px;
  line-height: 1.42857143;
  color: #000;
  background-color: #fff;
  background-image: none;
  transition: border 1s;
  border: 1px solid #ccc;
}
.form-control:focus {
  border: 1px solid #0000008c;

}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}
textarea.form-control {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    line-height: 34px;
  }
  input[type="date"].input-sm,
  input[type="time"].input-sm,
  input[type="datetime-local"].input-sm,
  input[type="month"].input-sm,
  .input-group-sm input[type="date"],
  .input-group-sm input[type="time"],
  .input-group-sm input[type="datetime-local"],
  .input-group-sm input[type="month"] {
    line-height: 30px;
  }
  input[type="date"].input-lg,
  input[type="time"].input-lg,
  input[type="datetime-local"].input-lg,
  input[type="month"].input-lg,
  .input-group-lg input[type="date"],
  .input-group-lg input[type="time"],
  .input-group-lg input[type="datetime-local"],
  .input-group-lg input[type="month"] {
    line-height: 46px;
  }
}
.form-group {
  margin-bottom: 15px;
}
.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio label,
.checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}
.form-control-static {
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0;
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-sm {
  height: 30px;
  line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
  height: auto;
}
.form-group-sm .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.form-group-sm .form-control {
  height: 30px;
  line-height: 30px;
}
textarea.form-group-sm .form-control,
select[multiple].form-group-sm .form-control {
  height: auto;
}
.form-group-sm .form-control-static {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.input-lg {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
select.input-lg {
  height: 46px;
  line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
  height: auto;
}
.form-group-lg .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
select.form-group-lg .form-control {
  height: 46px;
  line-height: 46px;
}
textarea.form-group-lg .form-control,
select[multiple].form-group-lg .form-control {
  height: auto;
}
.form-group-lg .form-control-static {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.has-feedback {
  position: relative;
}
.has-feedback .form-control {
  padding-right: 42.5px;
}
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}
.input-lg + .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px;
}
.input-sm + .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
  color: #3c763d;
}
.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #3c763d;
}
.has-success .form-control-feedback {
  color: #3c763d;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}
.has-warning .form-control-feedback {
  color: #8a6d3b;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;
}
.has-feedback label ~ .form-control-feedback {
  top: 25px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}
.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}
@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-static {
    display: inline-block;
  }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio label,
  .form-inline .checkbox label {
    padding-left: 0;
  }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 27px;
}
.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
  right: 15px;
}
@media (min-width: 768px) {
  .form-horizontal .form-group-lg .control-label {
    padding-top: 14.333333px;
  }
}
@media (min-width: 768px) {
  .form-horizontal .form-group-sm .control-label {
    padding-top: 6px;
  }
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #fff;
  border-color: #ccc;
}
.btn-default .badge {
  color: #fff;
  background-color: #333;
}
.btn-primary {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #000;
  border-color: #000;
}
.btn-primary .badge {
  color: #337ab7;
  background-color: #fff;
}
.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}
.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}
.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}
.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}
.btn-link {
  font-weight: normal;
  color: #337ab7;
  border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #777;
  text-decoration: none;
}
.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
       -o-transition: opacity .15s linear;
          transition: opacity .15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  display: none;
  visibility: hidden;
}
.collapse.in {
  display: block;
  visibility: visible;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: height, visibility;
       -o-transition-property: height, visibility;
          transition-property: height, visibility;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
.dropdown-menu-left {
  right: auto;
  left: 0;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}
.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
}
@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }
}
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}
.btn-toolbar {
  margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn .caret {
  margin-left: 0;
}
.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}
.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  display: table-cell;
  float: none;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
  left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group[class*="col-"] {
  float: none;
  padding-right: 0;
  padding-left: 0;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
  height: 46px;
  line-height: 46px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn {
  height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
  height: 30px;
  line-height: 30px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn {
  height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.input-group-addon.input-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}
.input-group-addon.input-lg {
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-addon:last-child {
  border-left: 0;
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group-btn > .btn {
  position: relative;
}
.input-group-btn > .btn + .btn {
  margin-left: -1px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active {
  z-index: 2;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
  margin-right: -1px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  margin-left: -1px;
}
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eee;
  border-color: #337ab7;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
  border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.tab-content > .tab-pane {
  display: none;
  visibility: hidden;
}
.tab-content > .active {
  display: block;
  visibility: visible;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
}
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}
.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
  overflow-y: auto;
}
@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}
@media (max-device-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 200px;
  }
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}
@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}
@media (min-width: 768px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0;
}
.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-brand > img {
  display: block;
}
@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.navbar-form {
  padding: 10px 15px;
  margin-top: 8px;
  margin-right: -15px;
  margin-bottom: 8px;
  margin-left: -15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
@media (min-width: 768px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .navbar-form .form-control-static {
    display: inline-block;
  }
  .navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .navbar-form .input-group .input-group-addon,
  .navbar-form .input-group .input-group-btn,
  .navbar-form .input-group .form-control {
    width: auto;
  }
  .navbar-form .input-group > .form-control {
    width: 100%;
  }
  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio label,
  .navbar-form .checkbox label {
    padding-left: 0;
  }
  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }
}
@media (max-width: 767px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.navbar-btn {
  margin-top: 8px;
  margin-bottom: 8px;
}
.navbar-btn.btn-sm {
  margin-top: 10px;
  margin-bottom: 10px;
}
.navbar-btn.btn-xs {
  margin-top: 14px;
  margin-bottom: 14px;
}
.navbar-text {
  margin-top: 15px;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
  }
}
@media (min-width: 768px) {
  .navbar-left {
    float: left !important;
  }
  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  .navbar-right ~ .navbar-right {
    margin-right: 0;
  }
}
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
  color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.navbar-default .navbar-text {
  color: #777;
}
.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
.navbar-default .navbar-link {
  color: #777;
}
.navbar-default .navbar-link:hover {
  color: #333;
}
.navbar-default .btn-link {
  color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
  color: #ccc;
}
.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}
.navbar-inverse .navbar-brand {
  color: #9d9d9d;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #080808;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}
.navbar-inverse .navbar-toggle {
  border-color: #333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #333;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: #080808;
}
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}
.navbar-inverse .navbar-link {
  color: #9d9d9d;
}
.navbar-inverse .navbar-link:hover {
  color: #fff;
}
.navbar-inverse .btn-link {
  color: #9d9d9d;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
  color: #fff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #444;
}
.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f9f9f9;
  border-radius: 4px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #777;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
  list-style: none;
}
.pager li {
  display: inline;
}
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.pager .next > a,
.pager .next > span {
  float: right;
}
.pager .previous > a,
.pager .previous > span {
  float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
}
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
a.label:hover,
a.label:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.label:empty {
  display: none;
}
.btn .label {
  position: relative;
  top: -1px;
}
.label-default {
  background-color: #777;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #5e5e5e;
}
.label-primary {
  background-color: #337ab7;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #286090;
}
.label-success {
  background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}
.label-info {
  background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}
.label-warning {
  background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}
.label-danger {
  background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #777;
  border-radius: 10px;
}
.badge:empty {
  display: none;
}
.btn .badge {
  position: relative;
  top: -1px;
}
.btn-xs .badge {
  top: 0;
  padding: 1px 5px;
}
a.badge:hover,
a.badge:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #337ab7;
  background-color: #fff;
}
.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}
.nav-pills > li > a > .badge {
  margin-left: 3px;
}
.jumbotron {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
}
.jumbotron > hr {
  border-top-color: #d5d5d5;
}
.container .jumbotron,
.container-fluid .jumbotron {
  border-radius: 6px;
}
.jumbotron .container {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .jumbotron {
    padding: 48px 0;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #337ab7;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
       -o-transition: width .6s ease;
          transition: width .6s ease;
}
.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
          background-size: 40px 40px;
}
.progress.active .progress-bar,
.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
  background-color: #5cb85c;
}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
  background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}
.media-body {
  width: 10000px;
}
.media-object {
  display: block;
}
.media-right,
.media > .pull-right {
  padding-left: 10px;
}
.media-left,
.media > .pull-left {
  padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: top;
}
.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.media-list {
  padding-left: 0;
  list-style: none;
}
.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
a.list-group-item {
  color: #555;
}
a.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #eee;
}
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
  color: #777;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #c7ddef;
}
.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}
a.list-group-item-success {
  color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
  color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}
.list-group-item-info {
  color: #31708f;
  background-color: #d9edf7;
}
a.list-group-item-info {
  color: #31708f;
}
a.list-group-item-info .list-group-item-heading {
  color: inherit;
}
a.list-group-item-info:hover,
a.list-group-item-info:focus {
  color: #31708f;
  background-color: #c4e3f3;
}
a.list-group-item-info.active,
a.list-group-item-info.active:hover,
a.list-group-item-info.active:focus {
  color: #fff;
  background-color: #31708f;
  border-color: #31708f;
}
.list-group-item-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
}
a.list-group-item-warning {
  color: #8a6d3b;
}
a.list-group-item-warning .list-group-item-heading {
  color: inherit;
}
a.list-group-item-warning:hover,
a.list-group-item-warning:focus {
  color: #8a6d3b;
  background-color: #faf2cc;
}
a.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus {
  color: #fff;
  background-color: #8a6d3b;
  border-color: #8a6d3b;
}
.list-group-item-danger {
  color: #a94442;
  background-color: #f2dede;
}
a.list-group-item-danger {
  color: #a94442;
}
a.list-group-item-danger .list-group-item-heading {
  color: inherit;
}
a.list-group-item-danger:hover,
a.list-group-item-danger:focus {
  color: #a94442;
  background-color: #ebcccc;
}
a.list-group-item-danger.active,
a.list-group-item-danger.active:hover,
a.list-group-item-danger.active:focus {
  color: #fff;
  background-color: #a94442;
  border-color: #a94442;
}
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
  margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}
.list-group + .panel-footer {
  border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
  margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
  padding-right: 15px;
  padding-left: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: 3px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
  border-top: 1px solid #ddd;
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}
.panel > .table-responsive {
  margin-bottom: 0;
  border: 0;
}
.panel-group {
  margin-bottom: 20px;
}
.panel-group .panel {
  margin-bottom: 0;
  border-radius: 4px;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: 1px solid #ddd;
}
.panel-group .panel-footer {
  border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #ddd;
}
.panel-default {
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ddd;
}
.panel-primary {
  border-color: #337ab7;
}
.panel-primary > .panel-heading {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #337ab7;
}
.panel-primary > .panel-heading .badge {
  color: #337ab7;
  background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #337ab7;
}
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
  color: #dff0d8;
  background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d6e9c6;
}
.panel-info {
  border-color: #bce8f1;
}
.panel-info > .panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
  color: #d9edf7;
  background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #bce8f1;
}
.panel-warning {
  border-color: #faebcc;
}
.panel-warning > .panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #faebcc;
}
.panel-danger {
  border-color: #ebccd1;
}
.panel-danger > .panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ebccd1;
}
.panel-danger > .panel-heading .badge {
  color: #f2dede;
  background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ebccd1;
}
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, .15);
}
.well-lg {
  padding: 24px;
  border-radius: 6px;
}
.well-sm {
  padding: 9px;
  border-radius: 3px;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
.modal-header {
  min-height: 16.42857143px;
  padding: 15px;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  visibility: visible;
  filter: alpha(opacity=0);
  opacity: 0;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover.top {
  margin-top: -10px;
}
.popover.right {
  margin-left: 10px;
}
.popover.bottom {
  margin-top: 10px;
}
.popover.left {
  margin-left: -10px;
}
.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}
.popover-content {
  padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover > .arrow {
  border-width: 11px;
}
.popover > .arrow:after {
  content: "";
  border-width: 10px;
}
.popover.top > .arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, .25);
  border-bottom-width: 0;
}
.popover.top > .arrow:after {
  bottom: 1px;
  margin-left: -10px;
  content: " ";
  border-top-color: #fff;
  border-bottom-width: 0;
}
.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0, 0, 0, .25);
  border-left-width: 0;
}
.popover.right > .arrow:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #fff;
  border-left-width: 0;
}
.popover.bottom > .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0, 0, 0, .25);
}
.popover.bottom > .arrow:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}
.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999;
  border-left-color: rgba(0, 0, 0, .25);
}
.popover.left > .arrow:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}
.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
       -o-transition: .6s ease-in-out left;
          transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
         -o-transition:      -o-transform .6s ease-in-out;
            transition:         transform .6s ease-in-out;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000;
            perspective: 1000;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  filter: alpha(opacity=50);
  opacity: .5;
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
  background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  background-repeat: repeat-x;
}
.carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
  background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  background-repeat: repeat-x;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #fff;
  text-decoration: none;
  filter: alpha(opacity=90);
  outline: 0;
  opacity: .9;
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
  margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
  margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  font-family: serif;
  line-height: 1;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
}
.carousel-indicators .active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -15px;
  }
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -15px;
  }
  .carousel-caption {
    right: 20%;
    left: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.affix {
  position: fixed;
}
@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}
/*# sourceMappingURL=bootstrap.css.map */


/* ---- js/owl-carousel/owl.carousel.css ---- */
/* 
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/* display none until init */
.owl-carousel {
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper {
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
    float: left;
}

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
    cursor: pointer;
}

.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
    cursor: url(../../js/owl-carousel/grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}



/* ---- js/owl-carousel/owl.theme.css ---- */
/*
* 	Owl Carousel Owl Demo Theme 
*	v1.3.3
*/

.owl-theme .owl-controls {
    margin-top: 10px;
    text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div {
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline; /*IE7 life-saver */
    margin: 5px;
    padding: 3px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50); /*IE7 fix*/
    opacity: 0.5;
}

/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
    filter: Alpha(Opacity=100); /*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page {
    display: inline-block;
    zoom: 1;
    *display: inline; /*IE7 life-saver */
}

.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 10px;
    height: 10px;
    margin: 5px 5px;
    filter: Alpha(Opacity=30); /*IE7 fix*/
    opacity: 0.3;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 20px;
    background: #3498DB;
    transition: .4s;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    filter: Alpha(Opacity=100); /*IE7 fix*/
    opacity: 1;
    transition: .4s;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers {
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/* preloading images */
.owl-item.loading {
    min-height: 150px;
    background: url(../../js/owl-carousel/AjaxLoader.gif) no-repeat center center
}

/* ---- js/owl-carousel/owl.transitions.css ---- */
/* 
 *  Owl Carousel CSS3 Transitions 
 *  v1.3.2
 */

.owl-origin {
    -webkit-perspective: 1200px;
    -webkit-perspective-origin-x: 50%;
    -webkit-perspective-origin-y: 50%;
    -moz-perspective: 1200px;
    -moz-perspective-origin-x: 50%;
    -moz-perspective-origin-y: 50%;
    perspective: 1200px;
}

/* fade */
.owl-fade-out {
    z-index: 10;
    -webkit-animation: fadeOut .7s both ease;
    -moz-animation: fadeOut .7s both ease;
    animation: fadeOut .7s both ease;
}

.owl-fade-in {
    -webkit-animation: fadeIn .7s both ease;
    -moz-animation: fadeIn .7s both ease;
    animation: fadeIn .7s both ease;
}

/* backSlide */
.owl-backSlide-out {
    -webkit-animation: backSlideOut 1s both ease;
    -moz-animation: backSlideOut 1s both ease;
    animation: backSlideOut 1s both ease;
}

.owl-backSlide-in {
    -webkit-animation: backSlideIn 1s both ease;
    -moz-animation: backSlideIn 1s both ease;
    animation: backSlideIn 1s both ease;
}

/* goDown */
.owl-goDown-out {
    -webkit-animation: scaleToFade .7s ease both;
    -moz-animation: scaleToFade .7s ease both;
    animation: scaleToFade .7s ease both;
}

.owl-goDown-in {
    -webkit-animation: goDown .6s ease both;
    -moz-animation: goDown .6s ease both;
    animation: goDown .6s ease both;
}

/* scaleUp */
.owl-fadeUp-in {
    -webkit-animation: scaleUpFrom .5s ease both;
    -moz-animation: scaleUpFrom .5s ease both;
    animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
    -webkit-animation: scaleUpTo .5s ease both;
    -moz-animation: scaleUpTo .5s ease both;
    animation: scaleUpTo .5s ease both;
}

/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
    0% {
        opacity: 1
    }
}

@-moz-keyframes empty {
    0% {
        opacity: 1
    }
}

@keyframes empty {
    0% {
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes backSlideOut {
    25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px);
    }
    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%);
    }
    100% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%);
    }
}

@-moz-keyframes backSlideOut {
    25% {
        opacity: .5;
        -moz-transform: translateZ(-500px);
    }
    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%);
    }
    100% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%);
    }
}

@keyframes backSlideOut {
    25% {
        opacity: .5;
        transform: translateZ(-500px);
    }
    75% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%);
    }
    100% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%);
    }
}

@-webkit-keyframes backSlideIn {
    0%, 25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(200%);
    }
    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0) translateX(0);
    }
}

@-moz-keyframes backSlideIn {
    0%, 25% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(200%);
    }
    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateZ(0) translateX(0);
    }
}

@keyframes backSlideIn {
    0%, 25% {
        opacity: .5;
        transform: translateZ(-500px) translateX(200%);
    }
    75% {
        opacity: .5;
        transform: translateZ(-500px);
    }
    100% {
        opacity: 1;
        transform: translateZ(0) translateX(0);
    }
}

@-webkit-keyframes scaleToFade {
    to {
        opacity: 0;
        -webkit-transform: scale(.8);
    }
}

@-moz-keyframes scaleToFade {
    to {
        opacity: 0;
        -moz-transform: scale(.8);
    }
}

@keyframes scaleToFade {
    to {
        opacity: 0;
        transform: scale(.8);
    }
}

@-webkit-keyframes goDown {
    from {
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes goDown {
    from {
        -moz-transform: translateY(-100%);
    }
}

@keyframes goDown {
    from {
        transform: translateY(-100%);
    }
}

@-webkit-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}

@-moz-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -moz-transform: scale(1.5);
    }
}

@keyframes scaleUpFrom {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
}

@-webkit-keyframes scaleUpTo {
    to {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}

@-moz-keyframes scaleUpTo {
    to {
        opacity: 0;
        -moz-transform: scale(1.5);
    }
}

@keyframes scaleUpTo {
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* ---- css/style.css ---- */
@font-face {
	font-family: "Bebas-Neue";
	font-weight: 100;
	src: url("../../fonts/BebasNeue-Thin.ttf");
}
@font-face {
	font-family: "Bebas-Neue";
	font-weight: 200;
	src: url("../../fonts/BebasNeue-Light.ttf");
}
@font-face {
	font-family: "Bebas-Neue";
	font-weight: 300;
	src: url("../../fonts/BebasNeue-Book.ttf");
}
@font-face {
	font-family: "Bebas-Neue";
	font-weight: 400;
	src: url("../../fonts/BebasNeue-Regular.ttf");
}
@font-face {
	font-family: "Bebas-Neue";
	font-weight: 600;
	src: url("../../fonts/BebasNeue-Bold.ttf");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

/*------------------------------------------------------------------
Theme Name: Sleek - Responsive Bootstrap Landing Page
Version:	1.1.1
Author: Dilipkumar
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

	1. GLOBAL STYLES
		1.1. Theme Extras 
	2. HEADER
	3. INTRO STYLES
		3.1. Intro / 1 
		3.2. Intro / 2 
		3.3. Intro / 3 
		3.4. Intro / 4 
		3.5. Intro / 5 
		3.6. Intro / 6 
		3.7. Intro / 7 
		3.8. Intro / Extras 
	4. TERMS / POPUP 
	5. SERVICES 
	6. FEATURES 
	7. INFO BOXES 
	8. INFO BOXES / DUAL 
	9. SCREENSHOTS  
	10. ABOUT / INFO CONTENT
	11. TESTIMONIALS
	12. PRICING TABLE
	13. SERVICES / 2
	14. FAQ SECTION 
	15. CLIENTS
	16. WRAP CONTENT
	17. GOOGLE MAP
	18. FOOTER
	19. FOOTER / COPYRIGHT
	20. MODAL / VIDEO
	21. RESPONSIVE STYLES
	
-------------------------------------------------------------------*/

/* 1. GLOBAL STYLES */

body {
	overflow-x: hidden;
	font-family: 'Roboto',sans-serif;
	color: #484848;
}

.body {
	position: relative;
	width: 100%;
	overflow: hidden;
}

p {
	font-size: 16px;
	color: #484848;
	font-weight: 400;
	font-family: "Roboto",sans-serif;
}

a,
a:hover {
	outline: 0;
	color: #3498DB;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	text-decoration: none;
}

a
a:hover,
a:focus,
a:active,
a.active {
	outline: 0;
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Bebas-Neue', sans-serif;
	font-weight: 500 !important;
	color: #222222;
}

h1 {
	font-size: 60px;
}
h2 {
	font-size: 48px;
}
h3 {
	font-size: 38px;
}
h4 {
	font-size: 28px;
}
.img-centered {
	margin: 0 auto;
}

ul {
	padding: 0;
	margin: 0;
}

ul li {
	list-style: none;
	margin: 0;
}

button,
button:hover {
	transition: 0.3s;
	-webkit-transition: 0.3s;
}

.space10 {	margin-bottom: 10px;}
.space20 {	margin-bottom: 20px;}
.space30 {	margin-bottom: 30px;}
.space40 {	margin-bottom: 40px;}
.space50 {	margin-bottom: 50px;}
.space60 {	margin-bottom: 60px;}
.space70 {	margin-bottom: 70px;}
.space80 {	margin-bottom: 80px;}
.space90 {	margin-bottom: 90px;}

/* 1.1. Theme Extras */

.btn-main {
	background: #3498DB;
	color: #fff;
	border-radius: 5px;
	border: none;
	line-height: 45px;
	padding: 0 24px;
	text-transform: none;
	letter-spacing: 0.3px;
	font-size: 14px;
	font-weight: 600;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	margin: 0 auto;
	display: table;
}

.btn-main:hover {
	background: #111;
	color: #Fff;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.btn-white {
	background: #fff;
	color: #3498DB;
}

.btn-left {
	margin: 0;
}

input:focus, textarea:focus {
	outline:0;
}

input[type=checkbox] {
	display: none;
}

input[type=checkbox].css-checkbox {
	position: absolute;
	z-index: -1000;
	top: -1000px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	top: 2px;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left: 30px;
	height: 22px;
	display: inline-block;
	line-height: 22px;
	background-repeat: no-repeat;
	background-position: 0 0;
	font-size: 13px;
	vertical-align: middle;
	cursor: pointer;
	font-weight: 400;
	color: #aaa;
	margin-top: 5px;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -22px;
}

label.css-label {
	background-image: url(../../images/cbox.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input[type=checkbox].css-checkbox + label.css-label span {
	position: relative;
	top: -4px;
}

.dual-btns {
	background: rgba(0,0,0,0.1);
	padding: 6px 1px;
	border-radius: 5px;
	display: table;
}

.dual-btns a {
	float: left;
}

.flexslider .slides img {
	width: 100%;
	max-width: 100%;
	display: block;
}

.content-head {
	text-align: center;
	margin: 0 0 70px;
}

.content-head h3 {
	font-size: 40px;
	font-weight: 900;
}

.content-head p {
	font-size: 17px;
	font-weight: 400;
	padding: 0 25%;
}

.content-head-lite h3 {
	color: #fff;
	font-weight: 400;
}

/* 2. HEADER */

header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}

.navbar {
	background: #676767eb;
	text-transform: uppercase;
	margin: 0;
	border-radius: 0;
	border: none;
	padding: 5px 0;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
}

.navbar a:focus ,
.navbar .navbar-nav li a:focus {
	outline: 0;
	color: #fff;
}

.navbar-default,
.navbar-inverse {
	border: 0;
}

.navbar-brand {
	color: #FFF !important;
	text-transform: none;
	margin: 0;
	font-size: 37px;
	padding: 20px 0 0;
	font-family: 'Vampiro One', sans-serif;
	font-weight: 400;
}

.nav > li {
	position: relative;
	display: block;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 1px;
	margin: 14px 5px 0;
}

.nav > li > a {
	font-family: 'Bebas-Neue', sans-serif;
	font-weight: 300 !important;
	position: relative;
	display: block;
	padding: 7px 15px;
	color: #FFF !important;
	font-size: 17px;
	border-radius: 5px;
	border: 1px solid transparent !important;
}

.nav > li > a:hover ,
.nav > li.active > a {
	color: #B70021 !important;
	border-color: #fff !important;
	background: #FFF !important;
}

.nav li:last-child a {
	border: 1px solid #fff !important;
}

.nav > li:last-child > a:hover {
	color: #fff !important;
	border-color: #B70021 !important;
	background: #B70021 !important;
}

.navbar-right {
    float: right !important;
    margin-right: -30px;
}

/* 3. INTRO STYLES */

/* 3.1. Intro / 1 */

#intro {
	padding: 227px 0 132px;
	position: relative;
	background: #000 url(../../images/bg/1.jpg) no-repeat top right fixed;
	background-size: 100% auto;
	overflow: hidden;
}

#intro h2 {
	color: #fff;
	font-size: 70px;
	font-weight: 400;
	margin: 25px 0 25px;
	line-height: 75px;
}

#intro p {
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	margin: 0 0 40px;
	padding-right: 25%;
	line-height: 25px;
}

#sub-form {
	position: relative;
	overflow: hidden;
}

.sub-form h4 {
	color: #111;
	font-size: 25px;
	margin: 0 0 15px;
	font-weight: 300;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.sub-form .row {
	margin: 0;
}

.sub-form .col-md-6 {
	padding: 0;
}

.sub-form h5 {
	display: table;
	color: rgb(121, 121, 121);
	letter-spacing: 0px;
	text-align: center;
	padding: 0px;
	width: 130%;
	text-transform: capitalize;
	font-weight: 300;
	font-size: 25px;
	margin: 8px 0px 24px;
	background: #3498db;
	color: #fff;
	padding: 15px 10px;
	margin-left: -15%;
}

.sub-form {
	padding-left: 60px;
	border-right: none;
}

.sub-form form {
	padding: 40px 30px 30px;
	background: #fff;
	border-radius: 5px;
	border-top: 5px solid #feb806;
	position: relative;
}

.sub-form form:before {
	content: "";
	height: 5px;
	width: 33%;
	background: #9ac430;
	position: absolute;
	top: -5px;
	left: 0;
	border-radius: 5px 0 0 0;
}

.sub-form form:after {
	content: "";
	height: 5px;
	width: 33%;
	background: #fe5d05;
	position: absolute;
	top: -5px;
	right: 0;
	border-radius: 0 5px 0 0;
}

.sub-form form input {
	border: 1px solid #e4e4e4;
	background: transparent;
	height: 50px;
	padding: 10px 15px;
	color: #000;
	width: 100%;
	font-size: 14px;
}

.fname {
	margin-bottom: 0;
	border-radius: 5px 0 0 0;
	border-right: none !important;
}

.lname {
	margin-bottom: 0;
	border-radius: 0 5px 0 0;
}

.e-mail {
	margin-bottom: 15px;
	border-radius: 0 0 5px 5px;
	border-top: none !important;
}

/* 3.2. Intro / 2 */

#intro.intro2 {
	padding: 280px 0 230px;
	position: relative;

	background-size: 100% auto;
	overflow: hidden;
}

#intro.intro2 h2,
#intro.intro2 p {
	text-align: center;
	padding: 0 10%;
}

#intro.intro2 .dual-btns {
	margin: 0 auto;
	display: table;
}

/* 3.3. Intro / 3 */

#intro.intro3 {
	padding: 170px 0 0px;
	position: relative;
	background: #000 url(../../images/bg/3.jpg) no-repeat top left;
	background-size: 125% auto;
	overflow: hidden;
}

#intro.intro3 #main-slider {
	float: right;
	margin-bottom: -100px;
}

#intro.intro3 .col-md-8 {
	width: 62%;
}

#intro.intro3 .col-md-4 {
	width: 38%;
}

#intro.intro3 h2 {
	margin: 140px 0px 25px;
	font-size: 65px;
	line-height: 70px;
	font-weight: 500;
}

#intro.intro3 h6 {
	color: #fff;
	font-family: Open Sans;
	font-size: 13px;
	margin: 20px 0 60px;
}

#intro.intro3 h6 a {
	color: #fff;
	border-bottom: 1px dotted #fff;
}

#intro.intro3 h6 a:hover {
	color:#3498DB;
}

/* 3.4. Intro / 4 */

#intro.intro4 {
	padding: 180px 0 0;
	position: relative;
	background: #000 url(../../images/bg/4.jpg) no-repeat top right fixed;
	background-size: 100% auto;
	overflow: hidden;
}

#intro.intro4 h2,
#intro.intro4 p {
	text-align: center;
	padding: 0 10%;
}

#intro.intro4 .dual-btns {
	margin: 0 auto;
	display: table;
}

/* 3.5. Intro / 5 */

#intro.intro5 {
	padding: 150px 0 0;
	position: relative;
	background: #000 url(../../images/bg/5.jpg) no-repeat top right fixed;
	background-size: 100% auto;
	overflow: hidden;
}

#intro.intro5 h2,
#intro.intro5 p {
	text-align: center;
	padding: 0 10%;
}

#intro.intro5 .dual-btns {
	margin: 0 auto 40px;
	display: table;
}

.play-btn {
	border: 10px solid #FFF;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	line-height: 98px;
	display: block;
	text-align: center;
	color: #FFF;
	font-size: 47px;
	position: absolute;
	left: 0px;
	right: 0px;
	margin: -60px auto 0px;
	top: 50%;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	box-shadow: 0px -2px 15px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px -2px 15px rgba(0,0,0,0.5);
	text-shadow: 0 2px 15px rgba(0,0,0,0.5);
}

.play-btn:hover {
	color:#fff;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
}

/* 3.6. Intro / 6 */

#intro.intro6 {
	padding: 240px 0 175px;
	background: #000 url(../../images/bg/6.jpg) no-repeat center center fixed;
}

#intro.intro6 h2 {
	margin: 13px 0px 25px;
}

/* 3.7. Intro / 7 */

#intro.intro7 {
	padding: 270px 0 240px;
	background: #000 url(../../images/bg/7.jpg) no-repeat center top fixed;
	position: relative;
	background-size: 100% auto;
	overflow: hidden;
}

#intro.intro7 h2,
#intro.intro7 p {
	text-align: center;
	padding: 0 10%;
}

.intro-newsletter {
    background: rgba(0, 0, 0, 0.48);
	padding: 8px;
	border-radius: 5px;
	width: 536px;
	margin: 0 auto;
	display: table;
	position:relative;
}

.intro-newsletter input {
	width: 400px;
	height: 50px;
	border: none;
	background: #fff;
	border-radius: 5px;
	padding: 5px 20px;
	font-size: 13px;
	float: left;
	margin:0;
}

.intro-newsletter button {
	background: #3498DB;
	line-height: 50px;
	color: #FFF;
	padding: 0px 30px;
	border-radius: 5px;
	border: none;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	width: 110px;
	margin-left: 10px;
	float: left;
	font-size: 25px;
}

.intro-newsletter button:hover {
	background: #000;
	color: #FFF;
}

#result {
	text-align: center;
	position: absolute;
	top: 103%;
	left: 60px;
	right: 0px;
	display: block;
	margin: 0px auto;
	font-size: 11px;
	color: #fff !important;
	max-width: 100%;
	padding: 0px 12px;
}

#result a {
	color: #000 !important;
}

#result em {
	font-style:normal;
}

.intro-newsletter #result {
	left: 0px !important;
	top:106%;
}

/* 3.8. Intro / 8 */

#intro.intro8 {
	padding: 270px 0 240px;
	background: #000 url(../../images/bg/8.jpg) no-repeat center top fixed;
	position: relative;
	background-size: 100% auto;
	overflow: hidden;
}

#intro.intro8 h2,
#intro.intro8 p {
	text-align: center;
	padding: 0 10%;
}

.countdown.styled {
	width:100%;
	max-width:850px;
	margin:-25px auto 0;
	padding:0 15px;
}

.countdown.styled div {
	width:25%;
	float:left;
	color:#fff;
	font-size:100px;
	font-weight:800;
	text-align:center;
}

.countdown.styled div span {
	display:block;
	font-size:16px;
	letter-spacing:5px;
	text-transform:uppercase;
	font-weight:700;
	background:rgba(0,0,0,0.3);
	display:table;
	margin:0 auto;
	padding:5px 10px;
	border-radius:5px;
}

/* 3.9. Intro / Extras */

.dual-btns {
	position: relative;
}

.dual-btns a {
	background: #3498DB;
	line-height: 50px;
	color: #FFF;
	padding: 0px 30px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.3px;
	font-weight: 600;
	margin: 0 5px;
}

.dual-btns a:nth-child(2) {
	background:#2980b9;
	border-radius: 5px;
}

.dual-btns a:hover {
	background: #111 !important;
	color: #fff;
}

.app-btn {
	font-size: 15px;
	text-transform: none;
	font-weight: 400;
	line-height: 23px;
	padding: 10px 35px 17px;
	padding-left: 70px;
	position: relative;
	background: #3498db;
	color: #fff;
	display: table;
	border-radius: 5px;
	text-shadow: 0 3px 0 rgba(0,0,0,0.2);
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.app-btn i {
	position: absolute;
	top: 11px;
	left: 35px;
	font-size: 50px;
}

.app-btn span {
	font-size: 26px;
	display: block;
	font-weight: 700;
}

.app-btn:hover {
	background: #111;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	color: #fff;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.2;
}

.overlay-white {
	background: #fff;
	height: 20px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.btn-single a {
	border-radius: 5px;
	padding: 0px 35px;
}

.btn-single a i {
	margin-left: 7px;
	font-size: 16px;
}

/* 4. TERMS / POPUP */

.term-popup {
	cursor: pointer;
}

.terms {
	position: fixed;
	z-index: -15;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	width: 90%;
	max-height: 90%;
	overflow: scroll;
	overflow-x: hidden;
	max-width: 1170px;
	height: auto;
	background: #FFF;
	top: 17%;
	left: 0;
	right: 0;
	margin: 0 auto;
	display: table-cell;
	vertical-align: middle;
	padding: 50px;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
	-webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.terms h3 {
	font-size: 30px;
	margin: 0 0 30px;
	border-bottom: 2px solid #e1e1e1;
	padding-bottom: 15px;
}

.terms ul li {
	list-style: decimal;
	margin-left: 15px;
	margin-bottom: 15px;
	font-size: 13px;
	line-height: 23px;
}

.t-close {
	position: absolute;
	right: 25px;
	top: 25px;
	font-size: 30px;
	opacity: 0.2;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	cursor: pointer;
}

.t-close:hover {
	opacity: 1;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.terms-active {
	position: fixed;
	z-index: 9999999;
	visibility: visible;
	opacity: 1;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.overlay-dark {
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	z-index: -20;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

.overlay-dark.active {
	z-index: 99999;
	visibility: visible;
	opacity: 0.5;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

/* 5. SERVICES */

#services {
	padding: 40px 0;
}

.service-content {
	cursor: pointer;
}

.service-content span {
	display: table;
	margin: 0px auto 25px;
	color: #3498db;
	text-align: center;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	position: relative;
	border: 2px solid #3498db;
	width: 100px;
	height: 100px;
	display: table;
	font-size: 35px;
	border-radius: 50%;
	padding-top: 22px;
}

.service-content:hover span {
	background: #3498db;
	color: #fff;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}

.service-content:hover i {
	transition: 0s;
	-webkit-transition: 0s;
}

.service-content h4 {
	font-size: 24px;
	text-align: center;
	font-weight: 900;
	margin: 0 0 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.service-content p {
	text-align: center;
	line-height: 22px;
	margin: 0 0 10px;
	color: #484848;
	font-weight: 400;
	padding: 0 20px;
}

.service-content a {
	color: #484848;
	text-align: center;
	display: table;
	margin: 0 auto;
}

.service-content a i {
	font-size: 14px;
	margin-left: 5px;
}

.service-content a:hover {
	color: #000;
}

/* 6. FEATURES */

#features {
	background: #3498DB;
	padding: 75px 0 0;
}

.feature-content {
	margin-bottom: 40px;
}

.feature-content i {
	color: #fff;
	font-size: 25px;
	margin: 0 0 20px;
	float: left;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgb(52, 152, 219);
	text-align: center;
	line-height: 50px;
}

.feature-content h4 {
	color: #222222;
	margin: 0 0 12px;
	margin-left: 65px;
	font-size: 17px;
	font-weight: 900;
}

.feature-content p {
	color: #222222;
	font-weight: 400;
	font-size: 13px;
	margin-left: 65px;
}

#features h3 {
	background: #3498DB;
	display: table;
	padding: 9px 15px;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.app-info p {
	color: #333;
	margin: 0 0 30px;
}

.app-btns a {
	color: #fff;
	font-size: 40px;
	margin-right: 25px;
}

.app-btns a:hover {
	color: #fff;
	opacity: 0.5;
}

/* 7. INFO BOXES */

.info-content {
	padding: 100px 0;
}

.ic-inner img {
	border-radius: 5px;
}
.ic-inner .btn-primary {
	font-size: 12px;
	background: transparent;
	padding: 10px 25px;
	border-radius: 7px;
	color: #b70021;
	border: 1px solid #b70021;
}

.ic-inner .btn-primary:hover {
	font-size: 12px;
	background: #b70021;
	padding: 10px 25px;
	border-radius: 7px;
	color: #fff;
	border: 1px solid #b70021;
}

.ic-inner h4 {
	font-size: 23px;
	font-weight: 900;
	margin: 20px 0 15px;
}

.ic-inner p {
	font-size: 13px;
	line-height: 20px;
}

/* 8. INFO BOXES / DUAL */

.dual-info {
	background: #3498DB;
}

.dual-info .container {
	width: 100%;
	padding: 0;
}

.dual-info .col-md-6 {
	padding: 0;
}

.dual-info h4 {
	font-size: 70px;
	font-weight: 300;
	color: #fff;
	margin: 0 0 20px;
}

.dual-info p {
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	margin: 0 0 30px;
	line-height: 25px;
}

.dual-info .col-md-9 {
	padding: 60px;
}

.dual-info ul li {
	color: #fff;
	padding-left: 40px;
	margin-bottom: 15px;
	font-weight: 300;
	position: relative;
}

.dual-info ul li i {
	font-size: 15px;
	position: absolute;
	top: 4px;
	left: 10px;
}

/* 9. SCREENSHOTS  */

.shots {
	padding: 100px 0;
}

.shots-slider {
	margin-top:-30px;
}

.slick-slide {
}

.shots-thumb {
	padding: 30px 0px 30px;
	margin: 0 15px;
}

.shots-slider .slick-slide img,
.shots-slider .slick-center img {
	border-radius: 3px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.shots-slider a:hover img {
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-webkit-transform: scale(1.05,1.05);
	-ms-transform: scale(1.05,1.05);
	transform: scale(1.05,1.05);
	cursor: url('../../images/plus.png'), url('../../images/plus.png'), move;  
}

.shots-thumb img {
	opacity: 1;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	cursor: pointer;
}

.shots-thumb img:hover {
	opacity: 0.6;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.shots .col-md-12 {
	max-width: 90%;
	margin: 0 auto;
	float: none;
}

/* 10. ABOUT / INFO CONTENT  */

.wrap-content {
	background: #3498DB;
	padding: 100px 0;
}

.wrap-content h2 {
	color: #fff;
	margin-bottom: 30px;
	font-size: 50px;
}

.wrap-content p {
	color: #fff;
	font-size: 14px;
	line-height: 22px;
}

.wrap-content1 {
	background: #fff !important;
	padding: 90px 0;
}

.wrap-content1 h2 {
	color: #000;
	margin-bottom: 30px;
	font-size: 50px;
}

.wrap-content1 p {
	color: #777;
	font-size: 14px;
	line-height: 22px;
}

/* 11. TESTIMONIALS */

.testimonials {
	background: #f1f1f1;
	padding: 75px 0 0;
}

.quote-info p {
	font-family: Josefin Sans;
	font-size: 60px;
	font-weight: 400;
	line-height: 59px;
	color: #555;
	padding: 0;
	padding-left: 65px;
	position: relative;
	margin-top: 120px;
}

.quote-info p:before {
	content: "\f10d";
	font-family: "FontAwesome";
	color: #3498DB;
	position: absolute;
	left: 0;
	top: -20px;
	font-size: 50px;
}

.quote-info cite {
	color: #000;
	font-size: 23px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
	float: right;
	margin-top: 40px;
	text-transform: uppercase;
	padding-right: 60px;
}

.quote-info .cite-left {
	float: none;
	padding-left: 60px;
	padding-right: 0px;
	display: block;
}

.quote-info cite span {
	color: #3498DB;
	font-size: 16px;
	font-weight: 400;
	display: block;
	padding-left: 13px;
	text-transform: none;
}

#quote-slider .owl-controls {
	margin-top: 10px;
	text-align: center;
	position: absolute;
	bottom: 25px;
	display: block;
	margin: 0 auto;
	left: 0;
	right: 0;
}

/* 12. PRICING TABLE */

.pricing {
	padding: 80px 0 90px;
	background: #f8f8f8;
}

.price {
	font-size: 70px;
	color: #fff;
}

.price-cents {
	vertical-align: super;
	font-size: 50%;
}

.list-group-item {
	color: #757575;
	font-size: 14px;
	border: none;
	border-bottom: 1px solid #e5e5e5;
	margin: 0px;
}

.list-group-item:last-child {
	border-bottom: none;
	padding-top: 20px;
}

.list-group .btn {
	background: #1abc9c !important;
	border-color: #0fa285;
}

.list-group .btn:hover {
	background: #0fa285 !important;
}
/*
.panel-default {
	border: none;
	padding: 15px 0px;
}

.panel-body {
	font-family: Open sans;
	font-size: 13px;
	line-height: 23px;
	font-weight: 400;
	color: #fff;
	padding: 40px 0;
	background: #3498DB;
}

.panel-default > .panel-heading {
	text-transform: uppercase;
	padding: 6px 15px 18px;
}

.panel-default > .panel-heading span {
	top: -2px;
	position: relative;
}
*/
.pricing .btn-main {
	line-height: 38px;
	padding: 0px 20px;
}

/* 13. SERVICES / 2 */

#services2 {
	background: #f1f1f1;
	padding: 100px 0 50px;
}

.sc2-inner {
	margin-left: 110px;
}

.sc2-inner h4 {
	font-weight: 600;
	font-size: 21px;
	margin: 5px 0 10px;
}

.sc2-inner p {
	margin: 0;
}

#services2 i {
	background: #3498DB;
	width: 75px;
	height: 75px;
	line-height: 75px;
	text-align: center;
	color: #FFF;
	font-size: 25px;
	float: left;
	border-radius: 50%;
}

#services2 .col-md-4 {
	margin-bottom: 50px;
}

#services2 .sc2-inner p {
	margin: 0px;
	font-size: 13px;
}

/* 14. FAQ SECTION */

.faq-content {
	padding: 80px 0 80px;
}

.faq-content .panel-title a {
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	padding: 15px;
	margin: 0px;
	background: #fff;
	display: table;
	width: 100%;
}

.faq-content .panel-title:hover {
	color: #3498DB;
}

.faq-content .panel-default {
	border-color: #e1e1e1;
	padding: 9px 0px;
	background: #fff;
}

.faq-content .panel-heading {
	border: 1px solid #e1e1e1;
	padding: 0;
	border-radius: 0;
	background: #fff;
	color: #000;
}

.faq-content .panel-default > .panel-heading + .panel-collapse > .panel-body {
	border: 1px solid #e1e1e1;
	border-top: none;
}

.faq-content .panel-body {
	padding: 20px 25px;
	background: #fff;
	color: #000;
}

.faq-wrap h3 {
	font-weight: 700;
	text-transform: none;
	margin: 0 0 5px;
}

.faq-wrap p {
	font-size: 13px;
	line-height: 20px;
	margin-bottom: 30px;
}

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video iframe,
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:none;
}

/* 15. CLIENTS */

#clients {
	padding: 40px 0;
	background: #f8f8f8;
}

#clients h3 {
	margin: 0px 0px 30px;
	font-size: 30px;
	font-weight: 900;
	text-transform: inherit;
	text-align: center;
}

#clients ul {
	padding: 0px 0px;
	margin: 0 -25px;
}

#clients ul li {
	float: left;
	margin: 0;
	list-style: none;
	width: 20%;
	position: relative;
	padding: 0 15px;
}

#clients ul li img {
	opacity: 0.2;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

#clients ul li:hover img {
	opacity: 1;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	-webkit-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}

/* 16. WRAP CONTENT */

.wrap {
	padding: 80px 0;
	background: #3498DB;
}

.wrap h3 {
	margin: 0px 0px 10px;
	text-align: center;
	font-weight: 900;
	font-size: 45px;
	text-transform: none;
	color: #fff;
}

.wrap p {
	font-size: 16px;
	line-height: 24px;
	margin: 0px 0px 40px;
	text-align: center;
	font-weight: 400;
	padding: 0 12%;
	color: #fff;
}

.wrap em {
	font-size: 12px;
	line-height: 24px;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	font-style: normal;
	margin: -10px auto 0;
	display: table;
	letter-spacing: 1px;
	color: #fff;
}

.wrap a {
	font-size: 17px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 2px;
	display: table;
	background: #000;
	line-height: 75px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	margin: 0 auto 15px;
	display: table;
	border-radius: 5px;
}

.wrap a span {
	position: relative;
	display: inline-block;
	padding: 0 110px;
	background: #fff;
	color: #3498DB;
	border: none;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	border-radius: 5px;
}

.csstransforms3d .wrap a span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
	font-size: 15px;
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	border-radius: 5px;
}

.wrap a:hover span,
.wrap a:focus span {
	-webkit-transform: rotateX(90deg) translateY(-22px);
	-moz-transform: rotateX(90deg) translateY(-22px);
	transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .wrap a:hover span::before,
.csstransforms3d .wrap a:focus span::before {
	background: #000;
	color: #fff;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
.wrap a:hover span,
.wrap a:focus span {
	-webkit-transform: rotateX(0deg) translateY(-0px);
	-moz-transform: rotateX(0deg) translateY(-0px);
	transform: rotateX(0deg) translateY(-0px);
}

.wrap a:hover span {
	background: #000;
	color: #fff;
	transition:.4s;
}


}


/* 17. GOOGLE MAP */

.gmap {
	padding: 0px;
	height: 400;
}

.gmap div {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

#map {
	display: block;
	width: 100%;
	height: 400px;
	margin: 0 auto;
}

#map.large {
	height: 400px;
}

#map img {
	max-width: none !important;
	height: auto;
}

/* 18. FOOTER */

#footer {
	background: #fff;
	padding: 40px 0;
	padding-top: 80px;
	padding-bottom: 10px;
	display: table;
	width: 100%;
	margin-top: 40px;
}

#contact-info {
	margin-bottom: 0px;
}

#footer h5 {
	font-size: 25px;
	font-weight: 900;
	color: #000;
	margin: 0 0 50px;
}

#footer h5 span {
	font-weight: 600;
}

.contact-info {
	padding: 0;
	margin: 0;
}

.contact-info li {
	padding: 0px;
	list-style: none;
	color: #888;
	margin: 0 0 15px;
	display: table;
	width: 100%;
	line-height: 30px;
	font-size: 16px;
	font-weight: 300;

}

.contact-info li i {
	font-size: 16px;
	margin-right: 15px;
	color: #000;
	float: left;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 50%;
}

.contact-info p {
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	margin: 0;
}

.statusMessage, .successmessage, .errormessage {
	display: none;
	margin: auto;
	width: 100%;
	height: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	border: 1px solid #e1e1e1;
	margin: 0 auto 25px auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #000;
}

.statusMessage i {
	color:#3498DB;
	font-size:15px;
	margin-right:5px;
}

.statusMessage p {
	margin: 0;
	padding: 20px;
	color: #555;
	font-size: 14px;
}

.successmessage p {
	margin: 0;
	padding: 20px;
	color: #555;
	font-size: 14px;
}

.successmessage i {
	color:#1abc9c;
	font-size:15px;
	margin-right:5px;
}

.errormessage p {
	margin: 0;
	padding: 20px;
	color: #555;
	font-size: 14px;
}

.errormessage i {
	color:#ff0000;
	font-size:15px;
	margin-right:5px;
}

#incompleteMessage i {
	color: #f1c40f;
	font-size:15px;
	margin-right:5px;
}

#contactForm input {
	width: 100%;
	border: none;
	border: 1px solid #e1e1e1;
	height: 65px;
	margin-bottom: 15px;
	background: transparent;
	padding: 15px 15px;
	color: #000;
	font-size: 15px;
	border-radius: 3px;
}

#contactForm textarea {
	width: 100%;
	color: #000;
	border: none;
	border: 1px solid #e1e1e1;
	height: 145px;
	margin-bottom: 15px;
	background: transparent;
	padding: 10px 15px;
	font-size: 15px;
	border-radius: 3px;
}

#contactForm p {
	font-size: 13px;
}

/* 19. FOOTER / COPYRIGHT */

.f-social {
	padding: 10px;
}

.f-social a {
	float: left;
	color: #ccc;
	font-size: 17px;
	margin-right: 20px;
}

.f-social a:hover {
	color: #b70121;
}

.footer-copy {
    background: #fff;
}

.footer-copy p {
	padding: 10px 0;
	color: #000000;
	font-size: 13px;
	line-height: 2.2;
	font-weight: 100;
}

.footer-copy p a {
	color:#000;
}

.footer-copy p a:hover {
	color:#b70121;
}

.backtotop {
	text-align: right;
	font-size: 13px;
	text-transform: uppercase;
	display: table;
	float: right;
	margin-top: 0;
}

.backtotop:hover {
	color:#fff;
}

/* 20. MODAL / VIDEO */

.modal-content {
	position: relative;
	background-clip: padding-box;
	border: none;
	border-radius: 0px;
	outline: 0px none;
	box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);
	padding: 0;
	margin: 0 auto;
	height: 70%;
	margin-top: 5%;
	top: 0;
}

.modal-content .container {
	padding: 0;
}

.close-modal {
	background: #000;
	color: #FFF;
	position: absolute;
	top: -30px;
	right: 0px;
	z-index: 999;
	width: 115px;
	height: 30px;
	font-weight:700;
	opacity: 1 !important;
	text-align: center;
	line-height: 30px;
	text-transform: uppercase;
	font-size: 12px;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	cursor: pointer;
}

.close-modal:hover {
	background: #3498DB;
	color: #FFF;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}

.home-subscribe {
	background:#3498DB;
	padding:70px 0;
}

.home-subscribe h6 {
	font-size:25px;
	color:#ff7958;
	margin:0 0 25px;
	text-align:center;
	font-weight:900;
	text-transform: inherit;
}

/* 20. RESPONSIVE STYLES */

/* Ipad - Desktop (960 - 1150px) */
@media only screen and (min-width: 960px)  and (max-width: 1150px)  {

#intro ,
#intro.intro2 ,
#intro.intro3 ,
#intro.intro4 ,
#intro.intro5 ,
#intro.intro6 ,
#intro.intro7 {
	background-size: 130% auto;
}

}

/* Ipad (768 - 959px) */
@media only screen and (min-width: 768px)  and (max-width: 959px)  {

#intro {
	background-size: auto 100%;
	padding: 160px 0px 132px;
}

#intro.intro2 {
	background-size: 130% auto;
	padding: 160px 0px 132px;
}

#intro.intro4 {
	background-size: auto 100%;
	padding: 160px 0px 0px;
}

#intro.intro5 {
	background-size: auto 100%;
	padding: 160px 0px 0px;
}

#intro h2 {
	font-size: 48px;
	line-height: 56px;
}

.sub-form {
	padding-left: 0px;
}

#result {
	left: 0px;
}

.sub-form h5 {
	font-size: 19px;
}

#intro p {
	font-size: 14px;
	margin: 0px 0px 30px;
	padding-right: 15px;
	line-height: 25px;
}

.service-content p {
	font-size: 13px;
	line-height: 20px;
	padding: 0px 5px;
}

.service-content h4 {
	font-size: 15px;
}

#features .col-md-3 {
	width: 100%;
	float: none;
}

#features .col-md-4 {
	width: 45%;
}

.feature-content p {
	font-size: 12px;
	margin-left: 90px;
}

.feature-content h4 {
	margin: 0px 0px 12px 90px;
}

#features .col-md-5 {
	width: 55%;
}

#features h3 {
	display: table;
	margin: 0 auto 20px;
	;
}

.app-info p {
	text-align: center;
	padding: 0 15%;
}

.app-btns {
	margin: 0 auto 40px;
	display: table;
}

#features .space60 {
	margin-bottom: 20px;
}

.content-head h3 {
	font-size: 35px;
}

.content-head p {
	font-size: 15px;
	padding: 0px 10%;
}

.ic-inner p {
	font-size: 12px;
}

.dual-info h4 {
	font-size: 35px;
}

.dual-info .col-md-9 {
	padding: 30px;
	width: 100%;
}

.dual-info ul li {
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 400;
}

.dual-info p {
	font-size: 11px;
	margin: -5px 0px 17px;
	line-height: 20px;
	font-weight: 400;
}

.dual-info ul {
	margin-bottom: 20px;
}

.dual-info .col-md-6:nth-child(1) {
	width: 60%;
}

.dual-info .col-md-6:nth-child(2) {
	width: 40%;
}

.dual-info .btn-main {
	line-height: 30px;
	padding: 0 15px;
	font-size: 11px;
}

.wrap-content h2 {
	color: #FFF;
	font-size: 34px;
	margin-top: 0;
}

.wrap-content p {
	font-size: 11px;
	line-height: 21px;
	font-weight: 400;
	margin-top: -15px;
}

.wrap-content1 h2 {
	color: #000;
	margin-top: 0px;
	font-size: 33px;
}

.quote-info p {
	font-size: 35px;
	line-height: 42px;
	padding: 0px 0px 0px 45px;
	margin-top: 0px;
}

.quote-info p:before {
	top: 5px;
}

.pricing .col-md-3 {
	width: 50%;
}

.sc2-inner {
	margin-left: 91px;
}

#services2 i {
	width: 65px;
	height: 65px;
	line-height: 65px;
}

.sc2-inner {
	margin-left: 75px;
}

.sc2-inner h4 {
	font-size: 16px;
}

#services2 .sc2-inner p {
	font-size: 12px;
}

#contactForm p {
	font-size: 10px;
}

.contact-info li {
	font-size: 14px;
}

#intro.intro3 h2 {
	margin: 25px 0px 25px;
	font-size: 42px;
	line-height: 48px;
	font-weight: 500;
}

#intro.intro3 p {
	font-size: 12px;
	margin: 0px 0px 30px;
	padding-right: 15px;
	line-height: 19px;
	font-weight: 400;
}

#intro.intro4 p {
	text-align: center;
	padding: 0px;
}

#intro.intro6 h2 {
	margin: -29px 0px 25px;
	font-size: 39px;
	line-height: 45px;
}

#intro.intro6 {
	padding: 192px 0px 140px;
}

#intro.intro7 {
	background-size: auto 100%;
	padding: 200px 0 185px;
}

.modal-content {
	margin: 35% auto 0px;
	height: auto;
}

}

/* Mobile (Upto 767px) */
@media only screen and (max-width: 767px)  {

#result {
	left: 0px;
}

.modal-content {
	width:90%;
	margin: 50% auto 0px;
	height: auto;
}

.terms {
	width: 90%;
	max-height: 80%;
	top: 10%;
	padding: 40px;
}

.container {
	width: 100%;
	max-width: 400px;
}

.play-btn {
	-webkit-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6);
}

.play-btn:hover {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}

.dual-btns {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

#intro.intro6 .dual-btns {
	display: table;
	margin: 0 auto 40px;
}

#intro {
	background-size: auto 100%;
	padding: 160px 0px 132px;
}

#intro.intro2 {
	background-size: auto 100%;
	padding: 160px 0px 132px;
}

#intro.intro3 {
	background-size: auto 100%;
	padding: 160px 0px 80px;
}

#intro.intro4 {
	background-size: auto 100%;
	padding: 120px 0px 100px;
}

#intro.intro7 {
	background-size: auto 100%;
	padding: 120px 0px 100px;
}

.intro-newsletter {
	width: 100%;
	max-width: 400px;
}

.intro-newsletter input {
	width: 71%;
}

.intro-newsletter button {
	width: 27%;
	margin-left: 2%;
}

#intro.intro7 p {
	text-align: center;
	padding: 0px 0;
	font-size: 13px;
}

#intro.intro6 {
	padding: 120px 0px 100px;
}

#intro.intro3 #main-slider {
	float: none;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	max-width: 400px;
	width: 100%;
}

#intro.intro3 h6 {
	font-size: 12px;
	text-align: center;
}

#intro.intro5 {
	background-size: auto 100%;
	padding: 160px 0px 0px;
}

#intro.intro3 .col-md-8 ,
#intro.intro3 .col-md-4 {
	width: 100%;
}

#intro.intro3 h2 {
	margin: 0px 0px 25px;
	font-size: 36px;
	line-height: 46px;
	font-weight: 500;
}

#intro p {
	font-size: 13px;
	margin: 0px 0px 30px;
}

.app-btn {
	display: table;
	margin: 0 auto;
}

#intro.intro3 h6 {
	font-size: 12px;
}

#intro h2 {
	font-size: 45px;
	margin: 25px 0px 40px;
	line-height: 50px;
	text-align: center;
}

#intro {
	background-size: auto 100%;
}

header {
	height:70px;
}

.dual-btns a {
	line-height: 43px;
	padding: 0px 22px;
	font-size: 13px;
}

.dual-btns a {
	float: left;
}

#intro p {
	font-size: 14px;
	margin: 0px 0px 20px;
	line-height: 24px;
	padding: 0;
	text-align: center;
}

.sub-form {
	padding-left: 15px;
	padding-top: 60px;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

#services {
	padding: 100px 0px 60px;
}

.service-content {
	cursor: pointer;
	margin-bottom: 40px;
}

#features h3 {
	margin: 0px 0px 20px;
}

.app-info {
	padding: 0 15px;
	padding-bottom: 59px;
}

.content-head h3 {
	font-size: 30px;
}

.content-head p {
	font-size: 14px;
	font-weight: 300;
	padding: 0px 0;
}

.ic-inner {
	margin-bottom: 30px;
}

.info-content {
	padding: 100px 0px 70px;
}

.dual-info .col-md-9 {
	padding: 40px;
}

.wrap-content h2 {
	font-size: 35px;
}

.wrap-content p {
	font-size: 13px;
	line-height: 22px;
}

.wrap-content img {
	margin-top: 70px;
}

.quote-info p {
	font-family: Josefin Sans;
	font-size: 31px;
	font-weight: 400;
	line-height: 41px;
}

#quote-slider .item img {
	display: none;
}

.testimonials {
	padding: 0px 0px 100px;
}

#quote-slider .owl-controls {
	bottom: -50px;
}

.faq-content .content-head {
	padding: 0 15px;
}

.wrap h3 {
	font-size: 33px;
}

.wrap p {
	font-size: 13px;
	line-height: 21px;
	padding: 0px;
}

.wrap a span {
	padding: 0px 25px;
}

.wrap a {
	font-size: 12px;
	text-align: center;
	letter-spacing: 1px;
	line-height: 55px;
}

.f-social {
	padding: 10px;
	margin-bottom: 60px;
}

.footer-copy p {
	font-size: 13px;
	text-align: center;
	margin: 0 0 30px;
}

.backtotop {
	color: #3498DB;
	text-align: center;
	display: table;
	margin: 0 auto;
	float: none;
}

.navbar-toggle {
	border: none !important;
	margin-top: 17px;
	margin-right: 0px;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #000;
}

.navbar-toggle:hover {
	background: #fff !important;
}

.navbar-toggle:focus {
	background: transparent !important;
}

.navbar-right {
	float: none;
	background: #fff;
	margin: 15px 0px 0;
	width: 100%;
}

.navbar-collapse {
	padding-right: 0;
	padding-left: 0;
	overflow-x: visible;
	border-top: 0;
}

}


/* ---- css/noty.min.css ---- */
.noty_layout_mixin, #noty_layout__top, #noty_layout__topLeft, #noty_layout__topCenter, #noty_layout__topRight, #noty_layout__bottom, #noty_layout__bottomLeft, #noty_layout__bottomCenter, #noty_layout__bottomRight, #noty_layout__center, #noty_layout__centerLeft, #noty_layout__centerRight {
    position: fixed;
    margin: 0;
    padding: 0;
    z-index: 9999999;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0) scale(1, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    filter: blur(0);
    -webkit-filter: blur(0);
    max-width: 90%; }

#noty_layout__top {
    top: 0;
    left: 5%;
    width: 90%; }

#noty_layout__topLeft {
    top: 20px;
    left: 20px;
    width: 325px; }

#noty_layout__topCenter {
    top: 5%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }

#noty_layout__topRight {
    top: 20px;
    right: 20px;
    width: 325px; }

#noty_layout__bottom {
    bottom: 0;
    left: 5%;
    width: 90%; }

#noty_layout__bottomLeft {
    bottom: 20px;
    left: 20px;
    width: 325px; }

#noty_layout__bottomCenter {
    bottom: 5%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }

#noty_layout__bottomRight {
    bottom: 20px;
    right: 20px;
    width: 325px; }

#noty_layout__center {
    top: 50%;
    left: 50%;
    width: 325px;
    -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1); }

#noty_layout__centerLeft {
    top: 50%;
    left: 20px;
    width: 325px;
    -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }

#noty_layout__centerRight {
    top: 50%;
    right: 20px;
    width: 325px;
    -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
    transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }

.noty_progressbar {
    display: none; }

.noty_has_timeout.noty_has_progressbar .noty_progressbar {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.7;
    filter: alpha(opacity=10); }

.noty_bar {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
    -ms-transform: translate(0, 0) scale(1, 1);
    transform: translate(0, 0) scale(1, 1);
    -webkit-font-smoothing: subpixel-antialiased;
    overflow: hidden; }

.noty_effects_open {
    opacity: 0;
    -webkit-transform: translate(50%);
    -ms-transform: translate(50%);
    transform: translate(50%);
    -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.noty_effects_close {
    -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

.noty_fix_effects_height {
    -webkit-animation: noty_anim_height 75ms ease-out;
    animation: noty_anim_height 75ms ease-out; }

.noty_close_with_click {
    cursor: pointer; }

.noty_close_button {
    position: absolute;
    top: 2px;
    right: 2px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    cursor: pointer;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out; }

.noty_close_button:hover {
    background-color: rgba(0, 0, 0, 0.1); }

.noty_modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 10000;
    opacity: .3;
    left: 0;
    top: 0; }

.noty_modal.noty_modal_open {
    opacity: 0;
    -webkit-animation: noty_modal_in .3s ease-out;
    animation: noty_modal_in .3s ease-out; }

.noty_modal.noty_modal_close {
    -webkit-animation: noty_modal_out .3s ease-out;
    animation: noty_modal_out .3s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

@-webkit-keyframes noty_modal_in {
    100% {
        opacity: .3; } }

@keyframes noty_modal_in {
    100% {
        opacity: .3; } }

@-webkit-keyframes noty_modal_out {
    100% {
        opacity: 0; } }

@keyframes noty_modal_out {
    100% {
        opacity: 0; } }

@keyframes noty_modal_out {
    100% {
        opacity: 0; } }

@-webkit-keyframes noty_anim_in {
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1; } }

@keyframes noty_anim_in {
    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1; } }

@-webkit-keyframes noty_anim_out {
    100% {
        -webkit-transform: translate(50%);
        transform: translate(50%);
        opacity: 0; } }

@keyframes noty_anim_out {
    100% {
        -webkit-transform: translate(50%);
        transform: translate(50%);
        opacity: 0; } }

@-webkit-keyframes noty_anim_height {
    100% {
        height: 0; } }

@keyframes noty_anim_height {
    100% {
        height: 0; } }

/*# sourceMappingURL=noty.css.map*/

/* ---- css/custom.css ---- */
.contact-details {
    margin-top: 20px;
}


.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-bottom: 1px solid #f7f7f7 !important;
    border-top: none !important;
}

.social-icons a i {
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    opacity: 0.9;
    border-radius: 15px;
    font-size: 20px;

}

.space200 {
    margin-top: 200px;
}

.social-icons a i:hover {
    opacity: 1;
}

.social-icons a i.fa-facebook {
    background: #5C72A4;
    color: #fff;
}

.social-icons a i.fa-twitter {
    background: #27AAE1;
    color: #fff;
}

.social-icons a i.fa-google-plus {
    background: #E64522;
    color: #fff;
}

.social-icons a i.fa-instagram {
    background: #E22E68;
    color: #fff;
}

.social-icons a i.fa-linkedin {
    background: #1C75BC;
    color: #fff;
}

.social-icons a i.fa-wordpress {
    background: #217399;
    color: #fff;
}

.img-responsive {
    max-width: 100%;
    width: 100%;
}

.social-icons {
    margin: 20px 0;
}

@media screen and (max-width: 768px) {
    .contact-details {
        text-align: center;
    }

    .space200 {
        margin-top: 20px;
        margin: 20px 0;
        margin-bottom: 40px;
    }

}

.widgetTitle {
    background: #f5f5f5;
    color: #777777 !important;
    padding: 10px 20px;
    border-radius: 3px;
    border: 1px solid #E6E6E6;
}

.pricing .panel-body {
    background: #3498DB !important;
}

.book-reading img {
    width: 45px;
    margin-right: 9px;
    background: #000000;
    padding: 8px;
}

.author_books img {
    height: 200px !important;
    width: auto !important;
}

.book-reading p {
    background: #000;
    color: #fff;
    border-radius: 5px;
    font-size: 19px;
    transition: background 1s;
}

.book-reading p:hover {
    background: #b70121;
}

.rating-input {
    font-size: 28px;
}

.book-description {
    text-align: justify;
    max-height: 10em;
}
.book-description2 * {
    color: #000 !important;
}
.urdut {
    font-size:20px !important;
}
.adspace_sidebar img {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.report i {
    color: red;
}

.mt-10 {
    margin-top: 10px;
}

.book_title {
    margin-top: 0;
}

.author_profile img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.no-margin {
    margin: 0;
}

.books .col-md-3 {
    text-align: center;
}

.books .col-md-3 h3 {
    margin-bottom: 30px;
}

.featured-books {
    background-color: #f8f8f8;
    padding-bottom: 20px;
}

.white {
    color: white;
}

#login .modal-content {
    margin-top: 15%;
}

#login .modal-body .row {
    margin: 20px 0;
}

#login .modal-body .row h4 {
    font-size: 22px;
    margin: 20px 0;
    margin-bottom: 30px;
}

.modal-title {
    font-size: 25px;
}

.modal-header .close {
    margin-top: 0;
    padding: 7px 11px;
}

.btn-primary-outline {
    background: transparent;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #000;
}

.btn-primary-outline:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

#forgotPassword .modal-content {
    margin-top: 35%;
}

#forgotPassword .modal-backdrop.in {
    opacity: 0.8;
}

.secondary {
    color: #b70121;
}

.secondary-bg {
    background: #b70121;
}

.secondary-btn {
    background: #b70121 !important;
    color: #fff;
}

.secondary-btn:hover {
    background: #b7150a !important;
    color: #fff;
}

a.bookinfo {
    outline: none;
}

a.bookinfo strong {
    line-height: 30px;
}

a.bookinfo:hover {
    text-decoration: none;
}

a.bookinfo span {
    z-index: 10;
    display: none;
    padding: 14px 20px;
    margin-top: -30px;
    margin-left: 28px;
    width: 300px;
    line-height: 16px;
}

a.bookinfo:hover span {
    display: inline;
    position: absolute;
    color: #111;
    border: 1px solid #DCA;
    background: #fffAF0;
    z-index: 9999999999;
}

.callout {
    z-index: 20;
    position: absolute;
    top: 30px;
    border: 0;
    left: -12px;
}

/*CSS3 extras*/
a.bookinfo span {
    border-radius: 4px;
    box-shadow: 5px 5px 8px #CCC;
}

#howitworks {
    background: #f8f8f8;
    padding: 70px 0;
}

#howitworks img {
    margin-bottom: 70px;
}

.promo-footer {
    margin: 70px 0;
}


.by-genre .col-md-3 {
    background: #3498db;
    height: 225px;
    box-shadow: 1px 1px 14px;
}

.by-genre .col-md-3 h3 {
    color: #fff;
    font-size: 32px;
    font-family: Vampiro One;
    font-weight: 400;
    line-height: 185px;
}

.breadcrumb {
    margin-top: 20px;
}

.book-rating {
    margin: 10px 0;
}

.book-rating i {
    font-size: 18px;
}

.book-details p:nth-child(1) {
    font-size: 18px;
}

.book-details {
    margin: 30px 0;
}

.report {
    margin: 20px 0;
}

.author-profile {
    text-align: left;
    margin: 20px 0;
    background: #f8f8f8;
    padding: 12px 8px;
}

.author-description {
    text-align: justify;
}

.author-stats p {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
}

.author-stats h4 {
    text-align: center;
    font-size: 40px;
    color: #b70021;
    margin-top: 0px;
}

.author-stats {
    border-top: 1px solid #b70121;
    border-bottom: 2px solid #b70121;
    padding: 20px 0;
    margin: 20px 0;
}

.by-genre .row {
    margin-top: 30px;
    margin-bottom: 30px;
}

a,
a:hover {
    color: #3498DB;
}

.btn-main {
    background: #3498DB;
}

.home-subscribe {
    background: #ffefef;
}

.btn-white {
    background: #fff;
    color: #3498DB;
}



.nav > li:last-child > a:hover {
    color: #fff !important;
    border-color: #b7351b !important;
    background: #b7351b !important;
}

.sub-form h5 {
    background: #3498db;
}

#intro.intro3 h6 a:hover {
    color: #3498DB;
}

.intro-newsletter button {
    background: #b70021;
}

.dual-btns a {
    background: #b70021;
}

.dual-btns a:nth-child(2) {
    background: #b70021;
}

.app-btn {
    background: #b70021;
}

.service-content span {
    color: #000;
    border: 2px solid #000;
}

.service-content:hover span {
    background: #000;
}

.service-content a {
    color: #b70021;
}

#features {
    background: #f8f8f8;
}

#features h3 {
    color: #fff;
}

.dual-info {
    background: #b70021;
}

.wrap-content {
    background: #b70021;
}

.quote-info p:before {
    color: #b70021;
}

.quote-info cite span {
    color: #b70021;
}

#services2 i {
    background: #b70021;
}

.wrap {
    background: #b70021;
}

.wrap-blue{
    padding: 70px 0;

    background: #3498DB;
}



.wrap a span {
    color: #b70021;
}

.statusMessage i {
    color: #b70021;
}

.f-social a:hover {
    color: #b70021;
}
.footer-copy {
    padding-top: 40px;

}
.footer-copy p a {
    color: #000;
    line-height: 1.3;
}
.footer-copy p a:hover {
    color: #b70021;
}


.close-modal:hover {
    background: #b70021;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    color: #b70021;
}

.slick-dots li.slick-active button:before {
    color: #3498DB;
}

.quote-slider .owl-controls .owl-page span {
    background: #3498DB;
}

.faq-content .panel-title a:hover {
    color: #3498DB;
}
.padding-100 {
    padding: 100px 0;
}
.padding-120 {
    padding: 120px 0;
}
.book_cover {
    width: 170px;
    height: 240px;
}

li.main{
    position:relative;
    width:175px;
    height:225px;
    overflow:hidden;
}
li.main:hover > .sub{
    bottom:0;
    transition: bottom 0.8s ease;
}
div.sub{
    position:absolute;
    bottom:-225px;
    width:175px;
    height:225px;
    background-color: rgba(0,0,0,0.7);
    border-right: 5px solid #3498db;
    transition: bottom 0.4s ease;
    color: #fff;
    padding: 5px;
    padding-left: 10px;
}

div.sub h4, div.sub h6{
    color: #fff;
}
div.sub p {
    font-size: 11px;
    color: #fff;
}
#login form {
    margin-top: -20px;
}
.carousel-inner img { width: 100%; }
#login_error p {
    color: #ff0000;
}
.sidebar {
    background: #f8f8f8;
    margin-top: 60px;
    padding: 20px;
    border-radius: 5px;
}
.sidebar-widget {
    margin: 20px 0;
}
.sidebar-widget h3 {
    margin-top: 0px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom:12px;
}



.morphsearch {
    width: 100px;
    right: 65px;
    top: 100px;
    min-height: 40px;
    background: #f8f8f8;
    z-index: 998;
    position: absolute;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition-property: min-height, width, top, left;
    transition-property: min-height, width, top, left;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open {
    width: 100%;
    min-height: 100%;
    top: 0px;
    right: 0px;
    z-index: 1000
}

.morphsearch-form {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    -webkit-transition-property: width, height, -webkit-transform;
    transition-property: width, height, transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open .morphsearch-form {
    width: 80%;
    height: 160px;
    -webkit-transform: translate3d(0,3em,0);
    transform: translate3d(0,3em,0);
}

.morphsearch-input {
    width: 100%;
    height: 100%;
    padding: 0 10% 0 10px;
    font-weight: 700;
    border: none;
    background: transparent;
    font-size: 0.8em;
    color: #3498DB;
    -webkit-transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
    transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morphsearch-input::-ms-clear { /* remove cross in IE */
    display: none;
}

.morphsearch.hideInput .morphsearch-input {
    color: transparent;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.morphsearch.open .morphsearch-input {
    font-size: 7em;
}

/* placeholder */
.morphsearch-input::-webkit-input-placeholder {
    color: #c2c2c2;
}

.morphsearch-input:-moz-placeholder {
    color: #c2c2c2;
}

.morphsearch-input::-moz-placeholder {
    color: #c2c2c2;
}

.morphsearch-input:-ms-input-placeholder {
    color: #c2c2c2;
}

/* hide placeholder when active in Chrome */
.gn-search:focus::-webkit-input-placeholder {
    color: transparent;
}

input[type="search"] { /* reset normalize */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.morphsearch-input:focus,
.morphsearch-submit:focus {
    outline: none;
}

.morphsearch-submit {
    position: absolute;
    width: 80px;
    height: 80px;
    text-indent: 100px;
    overflow: hidden;
    right: 0;
    top: 50%;
    background: transparent url(../../images/magnifier.svg) no-repeat center center;
    background-size: 100%;
    border: none;
    pointer-events: none;
    transform-origin: 50% 50%;
    opacity: 0;
    -webkit-transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
    transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
}

.morphsearch.open .morphsearch-submit {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
    transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.morphsearch-close {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 100%;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale3d(0,0,1);
    transform: scale3d(0,0,1);
}

.morphsearch.open .morphsearch-close {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.morphsearch-close::before,
.morphsearch-close::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 3px;
    opacity: 0.2;
    background: #000;
}

.morphsearch-close:hover.morphsearch-close::before,
.morphsearch-close:hover.morphsearch-close::after {
    opacity: 1;
}

.morphsearch-close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.morphsearch-close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.morphsearch-content {
    color: #333;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0 10.5%;
    background: #f1f1f1;
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.morphsearch.open .morphsearch-content {
    opacity: 1;
    height: auto;
    overflow: visible; /* this breaks the transition of the children in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=625289 */
    pointer-events: auto;
    -webkit-transition: opacity 0.3s 0.5s;
    transition: opacity 0.3s 0.5s;
}
#search {
    box-shadow: 1px 1px 20px rgba(169, 169, 169, 0.62);
}
.open #search {
    box-shadow: none;
}
.dummy-column {
    width: 45%;
    padding: 0 0 6em;
    float: left;
    opacity: 0;
    -webkit-transform: translate3d(0,100px,0);
    transform: translateY(100px);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.morphsearch.open .dummy-column:first-child {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.morphsearch.open .dummy-column:nth-child(2) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}

.morphsearch.open .dummy-column:nth-child(3) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.morphsearch.open .dummy-column {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.dummy-column:nth-child(2) {
    margin: 0 5%;
}

.dummy-column h2 {
    font-size: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 800;
    color: #c2c2c2;
    padding: 0.5em 0;
}

.round {
    border-radius: 50%;
}

.dummy-media-object {
    padding: 0.75em;
    display: block;
    margin: 0.3em 0;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(118,117,128,0.05);
}

.dummy-media-object:hover,
.dummy-media-object:focus {
    background: rgba(118,117,128,0.1);
}

.dummy-media-object img {
    display: inline-block;
    width: 50px;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

.dummy-media-object h3 {
    vertical-align: middle;
    font-size: 1.1em;
    display: inline-block;
    font-weight: 700;
    margin: 0 0 0 0;
    width: calc(100% - 70px);
    color: #000;
}

.dummy-media-object:hover h3 {
    color: #3498DB;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open ~ .overlay {
    opacity: 1;
}

.store_featured_author {
    text-align: center !important;
    margin: 20px;
    padding: 10px 0;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.store_featured_author h4{
    text-transform: capitalize;
}
.loader img {
    margin: 0 auto;
    display: block;
    width:50px;
}
.store_featured_author_img, .author_image_modal{
    height: 200px !important;
    width:  auto !important;
    margin: 0 auto;
    margin-bottom: 40px;
    border-radius: 5px;
    box-shadow: 0 15px 19px #b9b9b9;
}

.book_image_modal {
    margin-bottom: 40px;
}
.author-name {
    margin-top: 0;
    font-weight: bolder;
    font-size: 40px;
    color: #000;
    text-transform: capitalize;
}

.book-name {
    margin-top: 0px;
    font-weight: bolder;
    font-size: 20px;
    color: #000;
    text-transform: capitalize;
}



.author-description {
    margin-top: 20px;
    max-height: 6em;
}

@media screen and (max-width: 53.125em) {
    .morphsearch-input {
        padding: 0 25% 0 10px;
    }
    .morphsearch.open .morphsearch-input {
        font-size: 2em;
    }
    .dummy-column {
        float: none;
        width: auto;
        padding: 0 0 2em;
    }
    .dummy-column:nth-child(2) {
        margin: 0;
    }
    .morphsearch.open .morphsearch-submit {
        -webkit-transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
        transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
    }
}

@media screen and (max-width: 60.625em) {
    .morphsearch {
        width: 100px;
        top: 12%;
        right: 10%;
    }
    .genre-module section  h1, .genre-module  section  p {
        text-align: center;
        margin-left: 0px !important;
    }
}
.genre_books {
    padding: 20px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}


.genre_books .row {
    margin: 40px 0 ;
}
.genre_books .genre_book img {
    height: 200px !important;
    width: auto !important;
    margin: 0 auto;
}

.genre_books .genre_book  {
    background: #f8f8f8;
    padding: 15px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.login_cta {
    position: fixed;
    right: 0;
    bottom: 24%;
    background: #b70121;
    padding: 12px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-right:40px;
}
.login_cta a {
    color: #fff;
}

.ad {
    margin: 20px 0;
}
.ad-rect {
    margin: 10px 0;
}
.goodreads_icon {
    background: #8a583b;
    color: #fff;
    height: 35px;
    font-size: 21px;
    width: 35px;
    -webkit-border-radius: 45%;
    -moz-border-radius: 45%;
    border-radius: 45%;
    display: inline-block;
    text-align: center;
}

.advert-bar {
    position: fixed;
    bottom:0;
    padding: 10px;
    background: rgba(0,0,0,0.7);
    width: 100%;
    color: #fff;
    text-align: center;
}
._4z_b {
    width: 345px !important;
}

#modal_book_content {
    padding: 15px;
    padding-top: 0;
}
#show_book .modal-header {
    padding: 5px !important;
}
.promos {
    max-width: 1140px;
    margin: 0 auto;
}
.promo {
    margin: 1em .5em 1.625em;
    padding: .25em 0 2em;
    background: #0F1012;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.625;
    color: #f9f9f9;
    text-align: center;
}

.counter {
    text-align: center;

}

.counter h4 {
    font-size: 72px;
    line-height: 72px;
    color: #fff;
    font-weight: 500;
    margin: 20px 0;
}

.counter p {
    font-size: 22px;
    color: #fff;
    font-weight: 200;
}

.counter-holder {
    padding: 40px 0;
    display: flex;
    padding-bottom: 60px;
}

@media (min-width: 40em) {
    .promo {
        display: inline;
        float: left;
        width: 33.333%;
        margin: 1em 0 0;
    }

    .promo.first {
        border-right: none;
    }

    .promo.second {
        float: right;
        border-left: none;
    }
}

.promo h4 {
    margin: .25em 0 0;
    font-size: 2em;
    font-weight: bold;
    padding: 20px 0;
}

.promo .features {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #999999;
}

.promo li {
    padding: .25em 0;
}

.promo .brief {
    color: #f9f9f9;
}

.promo .price {
    margin: .5em 0;
    padding: .25em 0;
    background: #292b2e;
    font-size: 250%;
    color: #f9f9f9;
}

.promo .buy {
    margin: 1em 0 0;
}

.promo button {
    padding: 1em 5.25em;
    border: none;
    background: #292b2e;
    color: #f9f9f9;
    cursor: pointer;
}

.promo button:hover {
    background: #27282b;
}

.scale button {
    background: #b70121;
}

.scale button:hover {
    background: #b71b06;
}

@media (min-width: 40em) {
    .scale {
        transform: scale(1.2);
        box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);
    }

    .scale .price {
        color: #b70121;
    }
}

#services {
    padding-bottom: 20px;
}

.transparent-header nav {
}

.white-header header nav {
    background: #fff;
}
.white-header header nav ul li a {
    color: #000 !important;
}
.white-header header nav ul li a:hover {
    color: #b7150a !important;
}

.talent-book-holder {
    height: 300px;
    overflow: auto;
}

.talent_books li {
    display: inline-block;
}
#clients img {
    max-width: 200px;
    max-height: 150px;
}

.footer-social a {
    color: #bfbfbf;
    font-size: 30px;
    margin-right: 40px;
}

.footer-social a:hover {
    color: #b70121;
}
.store_featured_author a {
    color: #b70121;
}

.store_featured_author a:hover {
    color: #000;
}

.ic-inner img {
    border-radius: 50%;
}



footer p {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 100;
}

footer h4 {
    margin-bottom: 30px;
}
.pt-50 {
    padding-top: 50px;
}


.fa-beat {
    animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
    0% {
        transform:scale(1);
    }
    5% {
        transform:scale(1.25);
    }
    20% {
        transform:scale(1);
    }
    30% {
        transform:scale(1);
    }
    35% {
        transform:scale(1.25);
    }
    50% {
        transform:scale(1);
    }
    55% {
        transform:scale(1.25);
    }
    70% {
        transform:scale(1);
    }
}


.heart {
    color:red;
}

footer .in-sub div {
    padding-bottom: 40px;
}

header {
    border-top: 2px solid #000;
}

.wa_order_btn p {
    background: #03D755;
    padding: 6px 15px;
}

.wa_order_btn i {
    font-size: 26px;
}
a.disabled p {
    background: #333;
    pointer-events: none;
}

a.disabled {
    cursor: not-allowed;
}

.cart-item p {
    color: #000;
}
.cart-item a i {
    background: #3498DB;
    color: #000;
    padding: 6px;
    border-radius: 4px;
    transition: background 0.5ms;
}
.cart-item a i:hover {
    background: #000;
    color: #fff;

}
.cart-p {
    color: #3498DB;
    font-weight: bold;
}

.caption {
    text-align: center;
}
.caption {
    background: #f5f5f5;
}
.cart-product-title {
    font-size: 17px;
}
.cart-product-title:hover {
    text-decoration: underline;
    color: #333;
}
.thumbnail {
    -webkit-box-shadow: 0 3px 2px rgba(0,0,0,0.15) , 0 0 1px rgba(0,0,0,0.15);
    box-shadow: 0 3px 2px rgba(0,0,0,0.15) , 0 0 1px rgba(0,0,0,0.15);
    -webkit-border-radius: 4px;
}
.cart-item {
    padding: 10px 0;
}
.sidebar.right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    background: #fff;
    z-index: 999999;
    border-left: 7px solid #0155b2;
}
.cart-item h5 {
    margin-top :0px;
}
.p-da {
    font-size: 14px !important;
    color: #0155b2;
}
.p-da s{
    font-size: 13px !important;
    color: gray;
}
.p-da small {
    font-size: 11px !important;
    color: black;
}
.quantitys {
    font-size: 17px !important;
}
.price {
    color: #0155b2;
    font-size: 115%;
    font-weight: bold;
}


/* ---- assets/css/qissa-ui.css ---- */
/* The legacy theme only loads Roboto 300/400, so every "bold" was synthetic.
   @import must precede all other rules in this sheet.
   Urdu: Roboto has no Arabic-script glyphs, so Urdu text used to fall back to a
   generic system face (the poor readability). Adding proper Urdu faces AFTER
   Roboto in the stack means Latin still renders in Roboto while Arabic-script
   characters automatically pick up the Urdu font — no markup changes needed.
     · Noto Naskh Arabic  → body/UI text (compact, very legible at small sizes)
     · Noto Nastaliq Urdu → titles/quotes (the calligraphic style Urdu readers
       expect; needs generous line-height or descenders clip) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Qissa UI — shared design system (from the Daastan Figma).
   Scoped, opt-in classes (.qs-*) + CSS variables so pages adopt the new look
   incrementally without disturbing the legacy theme. Applied page by page.
   ========================================================================== */

:root {
    --qs-navy:        #0E3A53;   /* Dark Blue — primary: headings, price, buttons, ribbon */
    --qs-navy-700:    #0A2C40;   /* hover/darker */
    --qs-blue:        #2F6FA6;   /* Light Blue — links, "by author" */
    --qs-bg-blue:     #EAF1F6;   /* BG Blue — pill / tag backgrounds */
    --qs-pill-text:   #38617A;   /* text on bg-blue pills */
    --qs-ink:         #1A1A1A;   /* primary text */
    --qs-ink-2:       #3A3A3A;   /* body text */
    --qs-muted:       #8A8A8A;   /* labels / secondary */
    --qs-line:        #E6E6E6;   /* hairline borders */
    --qs-field-border:#D5DBE0;   /* inputs */
    --qs-star:        #F4B400;   /* rating gold */
    --qs-surface:     #FFFFFF;
    --qs-radius:      8px;        /* controls */
    --qs-radius-card: 14px;       /* cards */
    /* Roboto first (Latin), then Naskh — Arabic-script glyphs fall through to it. */
    --qs-font: "Roboto", "Noto Naskh Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    /* Calligraphic Nastaliq for book titles + quotes. */
    --qs-font-urdu: "Roboto", "Noto Nastaliq Urdu", "Noto Naskh Arabic", Arial, sans-serif;
}

/* Base scope: apply .qs-scope to a wrapper to opt a region into the new type. */
.qs-scope { font-family: var(--qs-font); color: var(--qs-ink-2); }

/* ---- Typography ---- */
.qs-h1 { font-size: 34px; font-weight: 800; color: var(--qs-ink); line-height: 1.2; margin: 0; }
.qs-h2 { font-size: 22px; font-weight: 700; color: var(--qs-ink); margin: 0 0 14px; }
.qs-byline { font-size: 15px; color: var(--qs-muted); }
.qs-byline a, .qs-link { color: var(--qs-blue); text-decoration: underline; }
.qs-link:hover { color: var(--qs-navy); }

/* ---- Breadcrumb ---- */
.qs-breadcrumb { font-size: 14px; color: var(--qs-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qs-breadcrumb a { color: var(--qs-muted); text-decoration: none; }
.qs-breadcrumb a:hover { color: var(--qs-blue); }
.qs-breadcrumb .qs-sep { color: #c9c9c9; }
.qs-breadcrumb .qs-current { color: var(--qs-blue); }

/* ---- Pills / tags (Figma tokens: BG Blue bg, slate-blue text — NOT grey) ---- */
.qs-pill { display: inline-block; background: var(--qs-bg-blue); color: #38617A; font-family: var(--qs-font);
           font-size: 13px; padding: 6px 16px; border-radius: 20px; line-height: 1.4; }

/* ---- Ribbon (Best Seller etc.) — folded banner with a notched tail ---- */
.qs-ribbon { display: inline-block; background: var(--qs-navy); color: #fff; font-family: var(--qs-font);
             font-size: 14px; font-weight: 500; padding: 8px 32px 8px 16px; border-radius: 4px 0 0 4px;
             -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
             clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }

/* ---- Stars ---- */
/* ==========================================================================
   Content column.

   Bootstrap's .container is 1170px from 1200px up — 91% of a 1280 viewport,
   against the 72% the Figma lays out (1040 of 1440). At 1170 a full-width
   paragraph runs to about 135 characters a line; comfortable reading is 45-75.

   So 1040 everywhere, with two exceptions: the store and the genre listings
   are grids of book covers, where the extra width is a feature rather than a
   readability cost. Those pages carry <body class="qs-wide">.

   The header and footer keep their own 1170 — they are chrome, and the store
   still needs the full width beneath them.
   ========================================================================== */
.container { max-width: 1040px; }
body.qs-wide .container { max-width: none; }

.qs-stars { color: var(--qs-star); font-size: 20px; letter-spacing: 2px; line-height: 1;
            display: inline-block; }
.qs-stars .qs-off { color: #DCDCDC; }
.qs-stars--sm { font-size: 15px; letter-spacing: 1px; }

/* Stars + score + source. Built by qs_rating_pill() in bin/stars.php so every
   place that shows an aggregate rating looks the same. */
.qs-rating-pill { display: inline-flex; align-items: center; gap: 11px; margin-top: 12px;
                  padding: 11px 22px; background: #fff; border-radius: 40px; }
.qs-rating-pill--tint { background: var(--qs-bg-blue); }
.qs-rating-pill strong { font-size: 19px; font-weight: 800; color: var(--qs-navy); }
.qs-rating-pill span:not(.qs-stars):not(.qs-off) { font-size: 14.5px; color: var(--qs-pill-text); }
.qs-rating-pill a { color: var(--qs-blue); font-weight: 600; text-decoration: none; }
.qs-rating-pill a:hover { text-decoration: underline; }
/* Figma: the review count beside the stars is navy and bold, not grey */
.qs-reviews { color: var(--qs-navy); font-size: 14px; font-weight: 700; }
.qs-pd-by { font-family: var(--qs-font); font-size: 18px; color: var(--qs-ink-2);
            font-weight: 400 !important; margin: 0 0 4px; text-transform: none; }
.qs-pd-by a { color: var(--qs-ink); text-decoration: underline; }

/* ---- Price ---- */
.qs-price { font-size: 36px; font-weight: 800; color: var(--qs-navy); line-height: 1; }
.qs-price small { font-size: 15px; font-weight: 500; color: var(--qs-muted); }

/* ---- Buttons ---- */
.qs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          background: var(--qs-navy); color: #fff; border: 1px solid var(--qs-navy);
          font-size: 16px; font-weight: 500; padding: 16px 20px; border-radius: var(--qs-radius);
          cursor: pointer; text-decoration: none; transition: background .15s ease; }
.qs-btn:hover { background: var(--qs-navy-700); color: #fff; }
.qs-btn--block { width: 100%; }
.qs-btn--outline { background: #fff; color: var(--qs-navy); border: 1px solid var(--qs-field-border); }
.qs-btn--outline:hover { background: var(--qs-bg-blue); color: var(--qs-navy); }
.qs-btn.disabled, .qs-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Format tabs (segmented) ---- */
.qs-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.qs-tab { flex: 1; text-align: center; padding: 13px 10px; border: 1px solid var(--qs-field-border);
          border-radius: var(--qs-radius); background: #fff; color: var(--qs-muted);
          font-size: 14px; font-weight: 500; cursor: pointer; transition: all .12s ease; line-height: 1.3; }
.qs-tab:hover { border-color: var(--qs-navy); color: var(--qs-navy); }
.qs-tab.is-active { background: var(--qs-navy); color: #fff; border-color: var(--qs-navy); }

/* ---- Form controls ---- */
.qs-select, .qs-input { width: 100%; padding: 12px 14px; border: 1px solid var(--qs-field-border);
             border-radius: var(--qs-radius); font-size: 14px; color: var(--qs-ink);
             background: #fff; }
.qs-select { cursor: pointer; }
.qs-select:focus, .qs-input:focus { outline: none; border-color: var(--qs-navy); box-shadow: 0 0 0 3px rgba(14,58,83,.10); }

/* ---- Cards ---- */
.qs-card { background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: var(--qs-radius-card); padding: 20px; }

/* ---- Spec list (Product Details: bold dark label, regular value — per Figma) ---- */
.qs-specs { font-size: 14px; line-height: 2.6; color: var(--qs-ink-2); }
.qs-specs .qs-k { color: var(--qs-ink); font-weight: 700; }

/* ---- Section headings (About, Reviews, Product Details, related) ---- */
.qs-section-h { font-family: var(--qs-font); font-size: 26px; font-weight: 700; color: var(--qs-ink);
                line-height: 1.25; margin: 0 0 18px; }
.qs-center { text-align: center; }
.qs-body-text { font-size: 15px; line-height: 1.85; color: var(--qs-ink-2); }
.qs-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
               flex-wrap: wrap; margin-bottom: 10px; }
.qs-sec-head .qs-section-h { margin: 0; }
.qs-btn--sm { padding: 10px 24px; font-size: 14px; }

/* ---- Video block (rounded, light frame like the Figma placeholder) ---- */
.qs-video { border-radius: 12px; overflow: hidden; background: var(--qs-bg-blue); margin: 6px 0 40px; }
.qs-videos-list { margin: 0 0 40px; }
/* Photos & Videos gallery — same section rhythm as its neighbours (40–46px). */
.qs-gallery-sec { margin: 6px 0 44px; }

.qs-about { margin: 0 0 44px; }

/* ---- Reviews (Figma rows: stars · By Name · date right; grey body) ---- */
.qs-reviews-sec { margin: 8px 0 46px; }
.qs-review { margin: 26px 0; }
.qs-review-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Figma review row: 5-star span ~141 design px (measured off frame 919-64554). */
.qs-review-head .qs-stars { font-size: 29px; letter-spacing: 4px; line-height: 1; }
.qs-review-name { font-size: 16px; font-weight: 700; color: var(--qs-ink); }
.qs-review-name a { color: inherit; text-decoration: none; }
.qs-review-name a:hover { color: var(--qs-navy); }
.qs-review-date { margin-left: auto; font-size: 13px; color: var(--qs-ink-2); }
.qs-review-text { margin: 12px 0 0; font-size: 15px; line-height: 1.8; color: #6B7280; }

/* ---- Right rail: About the Author ---- */
.qs-rail { padding-top: 6px; }
.qs-author-card { margin-bottom: 44px; }
.qs-author-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; }
.qs-author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.qs-author-name { display: block; font-size: 19px; font-weight: 700; color: var(--qs-ink); text-decoration: none; }
.qs-author-name:hover { color: var(--qs-navy); text-decoration: none; }
.qs-author-sub { font-size: 13px; color: var(--qs-muted); }
.qs-author-bio { font-size: 15px; line-height: 1.8; color: var(--qs-ink-2); margin-bottom: 14px;
                 display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.qs-author-social { margin-bottom: 16px; }
.qs-author-social a { color: var(--qs-blue); margin-right: 12px; font-size: 16px; }
.qs-author-social .goodreads_icon { font-weight: 700; font-family: Georgia, serif; }
.qs-rail-cta { text-align: center; }

/* ---- Right rail: Product Details + editors ---- */
.qs-product-details { margin-bottom: 40px; }
.qs-editors { margin-top: 10px; font-size: 14px; }
.qs-editors > .qs-k { display: block; margin-bottom: 6px; }
.qs-editor { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.qs-editor img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.qs-editor a { color: var(--qs-ink); text-decoration: underline; }
.qs-editor a:hover { color: var(--qs-navy); }

/* ---- Book card (listing / related sections) ---- */
.qs-book-card { font-family: var(--qs-font); }
/* On light backgrounds a wide halo bleeds into neighbouring cards — use a
   tight elevation shadow instead: slightly darker hairline outline + short
   drop, deepening a touch on hover. */
.qs-book-cover { position: relative; display: block; background: var(--qs-bg-blue);
                 border-radius: 10px; overflow: hidden;
                 box-shadow: 0 0 0 1px rgba(14,58,83,.14), 0 3px 8px rgba(14,58,83,.14),
                             0 8px 16px -8px rgba(14,58,83,.30);
                 transition: box-shadow .15s ease, transform .15s ease; }
.qs-book-cover:hover { transform: translateY(-2px);
                 box-shadow: 0 0 0 1px rgba(14,58,83,.18), 0 5px 12px rgba(14,58,83,.18),
                             0 14px 24px -8px rgba(14,58,83,.35); }
/* height:auto is load-bearing — the same trap already documented for
   .qs-svc-gal img further down this file, which was fixed there and never
   swept. qs_img_dims() puts width/height ATTRIBUTES on these covers to reserve
   the box and stop layout shift. The attribute height is a presentational hint,
   and a definite height makes the browser IGNORE aspect-ratio entirely: the
   author rule sets width:100% but nothing set height, so every cover on the
   store and the author pages rendered at its natural height — 1250px against a
   208px column. */
.qs-book-cover img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.qs-book-badge { position: absolute; top: 10px; right: 10px; background: #DCEAF7; color: var(--qs-blue);
                 font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 14px; }
/* Title clamps to exactly two lines (min-height reserves them) and the genre
   pill pins to the card bottom, so a row of cards stays aligned whether a
   title takes one line or three-would-be lines. */
.qs-book-card { display: flex; flex-direction: column; }
/* min-height reserves TWO title lines so the author line and genre pill sit at
   the same height on every card — in grids AND in carousels (where cards don't
   stretch to a shared height, so margin-top:auto alone can't align them).
   Must track line-height + the Nastaliq head-room padding: 2×1.7em + 0.3em. */
.qs-book-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                overflow: hidden; min-height: 3.7em; margin: 12px 0 4px; font-size: 17px;
                font-weight: 700; color: var(--qs-ink); text-decoration: none; line-height: 1.7; }
.qs-book-name:hover { color: var(--qs-navy); text-decoration: none; }
.qs-book-author { display: block; font-size: 13.5px; color: var(--qs-muted); white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.qs-book-author:hover { color: var(--qs-navy); text-decoration: underline; }
.qs-feat-author a { color: inherit; text-decoration: none; }
.qs-feat-author a:hover { color: #fff; text-decoration: underline; }
.qs-spot-author a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); }
.qs-spot-author a:hover { color: #fff; text-decoration: none; border-bottom-color: #fff; }
.qs-modal-author { font-size: 14px; color: #777; margin: -4px 0 8px; }
.qs-modal-author a { color: var(--qs-navy, #0E3A53); font-weight: 600; text-decoration: none; }
.qs-modal-author a:hover { text-decoration: underline; }
.qs-book-genre { text-align: center; margin-top: auto; padding-top: 12px; }

/* 3-up grid for "More books by {author}" */
.qs-book-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.qs-book-grid .qs-book-card { width: calc(33.333% - 19px); min-width: 150px; }
/* Static 5-up store row (odd rows alternate with carousels, per the Figma) */
.qs-book-grid--row { gap: 24px; }
.qs-book-grid--row .qs-book-card { width: calc(20% - 20px); min-width: 140px; }
@media (max-width: 991px) { .qs-book-grid--row .qs-book-card { width: calc(33.333% - 16px); } }
@media (max-width: 560px) { .qs-book-grid--row .qs-book-card { width: calc(50% - 12px); } }
.qs-more-by { margin: 0 0 46px; }

/* ---- Related carousel ("Other books you might like") — Owl v1 controls ---- */
.qs-related { margin: 22px 0 36px; }
.qs-related .qs-section-h { margin-bottom: 30px; }
.qs-carousel { position: relative; padding-bottom: 64px; list-style: none; margin: 0; padding-left: 0; }
/* Vertical padding gives the cover glow room — owl's wrapper clips overflow */
.qs-carousel .owl-item { padding: 10px 12px 18px; }
.qs-carousel .owl-controls { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; }
.qs-carousel .owl-pagination { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; }
.qs-carousel .owl-page { display: inline-block; margin: 0 3px; }
.qs-carousel .owl-page span { display: block; width: 8px; height: 8px; border-radius: 5px;
                              background: #C7D2DC; opacity: 1; transition: all .15s ease; }
.qs-carousel .owl-page.active span { width: 22px; background: var(--qs-navy); }
.qs-carousel .owl-buttons div.owl-prev,
.qs-carousel .owl-buttons div.owl-next { position: absolute; bottom: 0; width: 40px; height: 40px;
    border-radius: 50%; background: var(--qs-navy); color: #fff; font-size: 20px; line-height: 40px;
    text-align: center; opacity: 1; padding: 0; margin: 0; cursor: pointer; }
.qs-carousel .owl-buttons div.owl-prev { left: calc(50% - 175px); }
.qs-carousel .owl-buttons div.owl-next { right: calc(50% - 175px); }
.qs-carousel .owl-pagination { max-width: 240px; margin: 0 auto; line-height: 20px; }
.qs-carousel .owl-buttons div.owl-prev:hover,
.qs-carousel .owl-buttons div.owl-next:hover { background: var(--qs-navy-700); opacity: 1; }
.qs-carousel .owl-buttons div.disabled { opacity: .45; cursor: default; }

/* ==========================================================================
   Store / bookstore landing (Figma node 928-53751)
   ========================================================================== */

/* Hero banner: the two admin featured-book slides as a fixed-proportion navy
   gradient panel — white-matted cover left, clamped copy + white CTA right,
   overlay arrows. Admin bg/text colours are ignored (black-on-black legacy). */
.qs-store-hero { border-radius: var(--qs-radius-card); overflow: hidden; margin: 4px 0 10px; }
.qs-hero-slide { display: flex; align-items: center; gap: 48px; height: 400px;
                 padding: 40px 120px 40px 64px;
                 background: linear-gradient(115deg, #0A2C40 0%, var(--qs-navy) 45%, #1B5379 100%); }
.qs-hero-cover { flex-shrink: 0; display: block; border-radius: 8px; transform: rotate(-2deg);
                 box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 36px 6px rgba(255,255,255,.30),
                             0 18px 40px rgba(0,0,0,.45);
                 transition: transform .2s ease; }
.qs-hero-cover:hover { transform: rotate(0deg) scale(1.02); }
.qs-hero-cover img { display: block; width: 210px; height: 300px; object-fit: cover; border-radius: 8px; }
.qs-hero-body { min-width: 0; }
.qs-hero-kicker { color: rgba(255,255,255,.65); font-family: var(--qs-font); font-size: 13px;
                  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.qs-hero-title { font-family: var(--qs-font); color: #fff; font-size: 36px; font-weight: 800 !important;
                 line-height: 1.2; margin: 0 0 14px; text-transform: none; letter-spacing: 0;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-hero-desc { color: rgba(255,255,255,.85); font-family: var(--qs-font); font-size: 15px;
                line-height: 1.85; max-width: 640px; margin: 0 0 24px;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) {
    .qs-hero-slide { flex-direction: column; height: auto; padding: 30px; gap: 24px; }
    .qs-hero-title { font-size: 26px; }
}
/* Overlay arrows on the hero (owl v1: neutralise the theme's positioned controls).
   owl.js adds `.owl-theme` to the container at runtime, so owl.theme.css's
   `.owl-theme .owl-controls .owl-buttons div` (3 classes) out-specifies a bare
   `.qs-store-hero .owl-buttons div` (2) and its grey #869791 / opacity:.5 defaults
   win — the arrows rendered muddy grey and half-transparent. Every rule below is
   qualified through `.owl-theme .owl-controls` so it carries more weight than the
   theme it is replacing; .clickable on hover matches the class owl adds there. */
.qs-store-hero .owl-carousel3 { position: relative; }
.qs-store-hero .owl-theme .owl-controls { position: static !important; margin: 0; height: 0; }
.qs-store-hero .owl-theme .owl-controls .owl-buttons div {
    position: absolute; top: 50%; margin: -20px 0 0; padding: 0; width: 40px; height: 40px;
    border-radius: 50%; background: rgba(255,255,255,.92); color: var(--qs-navy);
    font-size: 17px; line-height: 40px; text-align: center; opacity: 1; }
.qs-store-hero .owl-theme .owl-controls .owl-buttons div.owl-prev { left: 20px; }
.qs-store-hero .owl-theme .owl-controls .owl-buttons div.owl-next { right: 20px; }
.qs-store-hero .owl-theme .owl-controls.clickable .owl-buttons div:hover { background: #fff; color: var(--qs-navy); opacity: 1; }
.qs-store-hero .owl-theme .owl-controls .owl-buttons div.disabled { opacity: 0; }

/* Section rhythm + centred heading with optional right-hand "See All".
   The h2 selectors are deliberately specific: the legacy theme styles bare
   h2/h3 (light weight, letter-spacing, transforms) and was winning. */
.qs-sec { margin: 56px 0; }
.qs-sec-head2 { position: relative; text-align: center; margin-bottom: 26px; }
/* "612 titles" under a paged catalogue heading. Only drawn when the list is
   paged -- on a three-book shelf the count is already in front of you, and a
   number that restates what is visible is noise. */
.qs-sec-count { display: block; margin-top: 4px; font-size: 14px; color: var(--qs-muted); }
.qs-scope .qs-section-h, .qs-scope h2.qs-section-h {
    display: block; font-family: var(--qs-font); font-size: 28px; font-weight: 700 !important;
    color: var(--qs-ink); line-height: 1.25; letter-spacing: -0.3px; text-transform: none;
    margin: 0 0 18px; }
/* Wrappers that own their own spacing keep the heading flush. */
.qs-scope .qs-sec-head .qs-section-h, .qs-scope .qs-sec-head2 .qs-section-h { margin: 0; }
.qs-sec-head2 .qs-section-h, .qs-sec-head2 h2.qs-section-h { display: inline-block; font-size: 30px; }
.qs-see-all { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
              color: var(--qs-navy); font-weight: 600; text-decoration: none; font-size: 15px; }
.qs-see-all:hover { color: var(--qs-blue); text-decoration: none; }
.qs-sub { text-align: center; color: var(--qs-muted); font-size: 15px; margin: -16px 0 26px; }
/* Editorial paragraph under the sub-title, above the books. Real prose rather
   than a one-line strapline, so it gets a reading measure and body line-height
   instead of .qs-sub's tighter treatment; centred to sit under the heading, but
   the text itself stays left-aligned because centred prose is hard to read past
   a line or two. */
.qs-sec-desc { max-width: 760px; margin: -10px auto 30px; color: var(--qs-muted);
               font-family: var(--qs-font); font-size: 16px; line-height: 1.75; text-align: left; }
.qs-sub + .qs-sec-desc { margin-top: 0; }
/* Urdu and Arabic-script copy: Nastaliq ink runs to roughly twice its declared
   font size, so the 1.75 above overlaps. Same reason .qs-feat-title carries its
   own line-height. */
.qs-sec-desc[dir="rtl"], .qs-sec-desc:lang(ur) { line-height: 2.15; }
@media (max-width: 767px) { .qs-sec-desc { font-size: 15px; margin-bottom: 24px; } }

/* Perks strip: icon + navy title + grey sub, hairline separators */
.qs-perks { display: flex; justify-content: center; flex-wrap: wrap; margin: 46px 0; }
.qs-perk { display: flex; align-items: flex-start; gap: 14px; padding: 6px 44px; }
.qs-perk + .qs-perk { border-left: 1px solid var(--qs-line); }
.qs-perk i { color: var(--qs-navy); font-size: 26px; margin-top: 2px; }
.qs-perk-t { color: var(--qs-navy); font-weight: 700; font-size: 16px; }
.qs-perk-s { color: var(--qs-muted); font-size: 13px; margin-top: 2px; }

/* The legacy .books class paints a #f8f8f8 band with no top padding — the
   Figma has no band there, so reskinned sections drop it. */
.qs-sec.books { background: transparent !important; padding: 0 !important; }

/* Genre banners (talent-tile style from the Figma: photo strip, white fade,
   navy bold label on the left). First 9 show; the rest toggle open. */
.qs-genre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Genre band = Figma talent tile + our folded-ribbon count chip: a curated
   photo strip under a white wash (strong on the label side, lighter right),
   navy label left, navy notched count tab flush on the right edge. */
/* The genre tile moved to assets/css/qs-genre-tile.css -- the admin loads
   the same file to preview a tile, and one copy cannot drift from another. */
.qs-genre-hidden.qs-genre-show { display: flex; }
.qs-genre-toggle-wrap { text-align: center; margin-top: 22px; }
/* A <button>, not an anchor: with <base href> set, a bare href="#" resolves
   against the base URL and navigates to the site root. It still has to LOOK
   like the quiet text link the design calls for, so the button chrome is
   reset here -- otherwise the browser draws its default grey box. */
.qs-genre-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 8px 4px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--qs-blue);
    cursor: pointer;
    text-decoration: none;
    transition: color .15s;
}
.qs-genre-toggle:hover, .qs-genre-toggle:focus { color: var(--qs-navy); }
.qs-genre-toggle:focus-visible { outline: 2px solid var(--qs-blue); outline-offset: 3px; border-radius: 4px; }
.qs-genre-toggle i { font-size: 13px; transition: transform .2s; }
.qs-genre-toggle[aria-expanded="true"] i { transform: translateY(1px); }
@media (max-width: 991px) { .qs-genre-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qs-genre-grid { grid-template-columns: 1fr; } }

/* Featured Books navy cards (2-up) — fixed height so a pair always matches;
   title/description/author all clamp instead of stretching the card. */
.qs-feat-card { display: flex; gap: 22px; background: var(--qs-navy); border-radius: var(--qs-radius-card);
                padding: 24px; height: 296px; overflow: hidden; }
/* Soft white glow (no hard outline) so dark covers separate from the navy card */
.qs-feat-cover { width: 180px; height: 248px; object-fit: cover; border-radius: 8px; display: block;
                 flex-shrink: 0;
                 box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 28px 4px rgba(255,255,255,.28),
                             0 10px 24px rgba(0,0,0,.35); }
.qs-feat-body { color: #fff; display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.qs-feat-title { font-size: 21px; font-weight: 700; color: #fff; margin: 2px 0 10px; line-height: 1.3;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-feat-desc { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.7; margin: 0 0 8px;
                display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.qs-feat-author { color: rgba(255,255,255,.9); font-style: italic; font-size: 14px; margin: 0 0 12px;
                  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-feat-body .qs-btn { margin-top: auto; }
@media (max-width: 767px) {
    .qs-feat-card { height: auto; flex-direction: column; }
    .qs-feat-cover { width: 140px; height: 190px; }
}
.qs-btn--white { background: #fff; color: var(--qs-navy); border-color: #fff; }
.qs-btn--white:hover { background: var(--qs-bg-blue); color: var(--qs-navy); border-color: var(--qs-bg-blue); }
.qs-btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.qs-btn--outline-white:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

/* Highlights ("Celebrating this Day"): Figma editorial cards — image,
   bold headline, grey blurb; 3-up, wrapping as more items are added. */
.qs-highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.qs-highlight { display: block; text-decoration: none; }
.qs-highlight-img { display: block; width: 100%; aspect-ratio: 8 / 5; border-radius: 10px;
                    background-size: cover; background-position: center;
                    box-shadow: 0 0 0 1px rgba(14,58,83,.14), 0 3px 8px rgba(14,58,83,.14),
                                0 8px 16px -8px rgba(14,58,83,.30); }
.qs-highlight-img--ph { background: var(--qs-bg-blue); display: flex; align-items: center;
                        justify-content: center; color: var(--qs-blue); font-size: 40px; opacity: .8; }
.qs-highlight-title { display: block; margin: 18px 0 8px; font-family: var(--qs-font); font-size: 20px;
                      font-weight: 700; color: var(--qs-ink); line-height: 1.3; }
a.qs-highlight:hover .qs-highlight-title { color: var(--qs-blue); }
.qs-highlight-desc { display: block; font-family: var(--qs-font); font-size: 14px;
                     line-height: 1.75; color: var(--qs-muted); }
@media (max-width: 991px) { .qs-highlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qs-highlight-grid { grid-template-columns: 1fr; } }

/* Featured author navy banner. The carousel arrows overlay the banner sides
   (white circles) and the dot row is disabled — with a dozen authors it
   wrapped into a mess. Covers on the right centre themselves vertically;
   with 1-2 books they render larger via --few. */
.qs-author-banner { display: flex; justify-content: space-between; align-items: stretch; gap: 40px;
                    background: var(--qs-navy); border-radius: var(--qs-radius-card);
                    padding: 30px 120px 30px 46px; height: 380px; overflow: hidden; }
.qs-ab-left { display: flex; flex-direction: column; justify-content: center; }
.qs-ab-label { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; letter-spacing: .08em;
               text-transform: uppercase; margin-bottom: 22px; }
.qs-ab-main { display: flex; gap: 22px; align-items: flex-start; }
.qs-ab-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block;
                border: 3px solid rgba(255,255,255,.25); }
.qs-ab-name { display: inline-block; color: #fff; font-size: 30px; font-weight: 800; text-decoration: none;
              line-height: 1.2; margin-bottom: 10px; }
.qs-ab-name:hover { color: #fff; text-decoration: underline; }
.qs-ab-bio { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.75; max-width: 600px; margin: 0 0 18px;
             display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.qs-ab-actions { display: flex; align-items: center; gap: 18px; }
.qs-ab-quick { color: rgba(255,255,255,.85); text-decoration: underline; font-size: 14px; }
.qs-ab-quick:hover { color: #fff; }
.qs-ab-covers { display: grid; grid-template-columns: repeat(2, 108px); gap: 14px;
                align-content: center; align-self: center; flex-shrink: 0; }
.qs-ab-covers img { width: 108px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; display: block;
                    box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 22px 3px rgba(255,255,255,.26),
                                0 6px 18px rgba(0,0,0,.35); }
.qs-ab-covers--few { grid-template-columns: 150px; }
.qs-ab-covers--few img { width: 150px; }
/* Mobile: the desktop banner is a two-up (person left, shelf right) and simply
   stacking it left three problems — a 70px right padding that only existed to
   clear the desktop arrows, a 104px avatar crowding a 30px name into a narrow
   column, and a fixed 2 x 108px cover grid sitting left-aligned with a gap of
   dead navy beside it. Each is addressed rather than inherited. */
@media (max-width: 900px) {
    .qs-author-banner { flex-direction: column; padding: 26px 22px 28px; height: auto; gap: 24px; }
    .qs-ab-label { margin-bottom: 16px; font-size: 12.5px; }
    .qs-ab-main { gap: 16px; }
    .qs-ab-avatar { width: 72px; height: 72px; border-width: 2px; }
    .qs-ab-name { font-size: 22px; margin-bottom: 8px; }
    .qs-ab-bio { font-size: 14.5px; line-height: 1.7; -webkit-line-clamp: 3; margin-bottom: 14px; }
    /* Covers stretch to the full width in one row, so the shelf reads as a
       shelf instead of a 2x2 block floating against the left edge. */
    .qs-ab-covers { grid-template-columns: repeat(4, 1fr); gap: 10px;
                    align-content: start; align-self: stretch; width: 100%; }
    .qs-ab-covers img { width: 100%; }
    .qs-ab-covers--few { grid-template-columns: repeat(2, 1fr); }
    .qs-ab-covers--few img { width: 100%; }
}
@media (max-width: 520px) {
    /* Below this the avatar and the name cannot share a line without the name
       breaking after one word, so the avatar goes above it. */
    .qs-ab-main { flex-direction: column; align-items: flex-start; gap: 12px; }
    .qs-ab-name { font-size: 20px; }
    .qs-ab-actions { flex-wrap: wrap; gap: 12px; }
    .qs-ab-covers { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .qs-ab-covers--few { grid-template-columns: repeat(2, 1fr); }
}

/* Author carousel: overlay arrows on the banner, no reserved control strip.
   The theme positions .owl-controls itself, which would trap the absolute
   buttons — neutralise it so they anchor to the carousel (the banner). */
.qs-carousel-author { padding-bottom: 0; }
.qs-carousel-author .owl-controls { position: static !important; margin: 0; height: 0; }
.qs-carousel-author .owl-controls .owl-buttons div.owl-prev,
.qs-carousel-author .owl-controls .owl-buttons div.owl-next {
    position: absolute; bottom: auto; top: 50% !important; margin-top: -20px;
    background: rgba(255,255,255,.92); color: var(--qs-navy); }
.qs-carousel-author .owl-controls .owl-buttons div.owl-prev { left: 22px; }
.qs-carousel-author .owl-controls .owl-buttons div.owl-next { left: auto; right: 22px; }
.qs-carousel-author .owl-controls .owl-buttons div.owl-prev:hover,
.qs-carousel-author .owl-controls .owl-buttons div.owl-next:hover { background: #fff; }
.qs-carousel-author .owl-controls .owl-buttons div.disabled { opacity: 0; }

/* Ad spaces (were sidebar-width; keep them modest now that the store is full-width) */
#ad_space_1, #ad_space_2 { max-width: 360px; margin: 24px auto; text-align: center; }
#ad_space_1 img, #ad_space_2 img { max-width: 100%; height: auto; }

/* Promo banner */
.qs-promo { background: var(--qs-bg-blue); border-radius: var(--qs-radius-card); padding: 44px;
            margin: 52px 0; display: flex; }
.qs-promo-card { background: #fff; border-radius: 10px; padding: 30px 34px; }
.qs-promo-t { font-size: 22px; font-weight: 700; color: var(--qs-ink); margin-bottom: 18px; }

/* ==========================================================================
   Cart + checkout
   ========================================================================== */
.qs-cart-head { margin: 4px 0 22px; }
.qs-cart-count { color: var(--qs-muted); font-size: 15px; margin: 6px 0 0; }
.qs-cart-item { display: flex; align-items: center; gap: 18px; background: #fff;
                border: 1px solid var(--qs-line); border-radius: var(--qs-radius-card);
                padding: 16px 18px; margin-bottom: 14px; }
.qs-cart-cover { flex-shrink: 0; }
.qs-cart-cover img { width: 64px; height: 88px; object-fit: cover; border-radius: 6px; display: block;
                     box-shadow: 0 0 0 1px rgba(14,58,83,.12), 0 4px 10px rgba(14,58,83,.18); }
.qs-cart-info { flex: 1; min-width: 0; }
.qs-cart-title { display: block; font-family: var(--qs-font); font-size: 16.5px; font-weight: 700;
                 color: var(--qs-ink); text-decoration: none; margin-bottom: 6px;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-cart-title:hover { color: var(--qs-navy); }
.qs-cart-meta { margin-bottom: 6px; }
.qs-cart-unit { color: var(--qs-muted); font-size: 13.5px; }
.qs-cart-qty { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.qs-qty-btn { width: 30px; height: 30px; border: 1px solid var(--qs-field-border); border-radius: 8px;
              display: flex; align-items: center; justify-content: center; color: var(--qs-navy);
              font-size: 11px; text-decoration: none; background: #fff; }
.qs-qty-btn:hover { border-color: var(--qs-navy); background: var(--qs-bg-blue); color: var(--qs-navy); }
.qs-qty-num { min-width: 34px; text-align: center; font-weight: 700; color: var(--qs-ink); font-size: 15px; }
.qs-cart-line { text-align: right; min-width: 96px; flex-shrink: 0; }
.qs-cart-line-total { font-weight: 800; color: var(--qs-navy); font-size: 16.5px; }
.qs-coupon-off { color: #1f7a4d; font-size: 13px; font-weight: 600; }
.qs-cart-remove { flex-shrink: 0; color: #C25B5B; font-size: 16px; padding: 8px; text-decoration: none; }
.qs-cart-remove:hover { color: #a33f3f; }
.qs-cart-empty { text-align: center; padding: 60px 20px; background: #fff;
                 border: 1px dashed var(--qs-field-border); border-radius: var(--qs-radius-card); }
.qs-cart-empty .fa-shopping-cart { font-size: 44px; color: var(--qs-bg-blue); -webkit-text-stroke: 1px var(--qs-blue); }
.qs-cart-empty h3 { font-family: var(--qs-font); font-weight: 700; color: var(--qs-ink); margin: 16px 0 8px; }
.qs-cart-empty p { color: var(--qs-muted); margin-bottom: 20px; }
.qs-cart-summary h3 { font-family: var(--qs-font); font-size: 19px; font-weight: 700;
                      color: var(--qs-ink); margin: 2px 0 16px; }
.qs-sum-row { display: flex; justify-content: space-between; font-family: var(--qs-font); font-size: 14.5px;
              color: var(--qs-ink-2); padding: 9px 0; border-bottom: 1px solid var(--qs-line); }
.qs-sum-coupon span:last-child { color: #1f7a4d; font-weight: 600; }
.qs-sum-total { border-bottom: 0; padding-top: 14px; font-size: 16px; font-weight: 700; color: var(--qs-ink); }
.qs-sum-total span:last-child { color: var(--qs-navy); font-size: 20px; font-weight: 800; }
.qs-cart-summary .qs-btn--block { margin-top: 14px; }
.qs-cart-continue { display: block; text-align: center; margin-top: 14px; color: var(--qs-blue);
                    font-size: 14px; text-decoration: none; }
.qs-cart-continue:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .qs-cart-item { flex-wrap: wrap; }
    .qs-cart-info { flex-basis: calc(100% - 100px); }
}

/* Checkout: restyle the bootstrap form controls in place (ids/names carry
   the shipping-quote and validation JS — markup must not change shape). */
.qs-checkout-card { padding: 26px 28px; }
.qs-checkout label { font-family: var(--qs-font); font-size: 13.5px; font-weight: 600;
                     color: var(--qs-ink); }
.qs-checkout .form-control { height: auto; padding: 11px 14px; border: 1px solid var(--qs-field-border);
                             border-radius: 8px; box-shadow: none; font-family: var(--qs-font);
                             font-size: 14.5px; color: var(--qs-ink); }
.qs-checkout .form-control:focus { border-color: var(--qs-navy); box-shadow: 0 0 0 3px rgba(14,58,83,.10); }
.qs-checkout .form-group { margin-bottom: 18px; }
.qs-co-sechead { display: flex; align-items: baseline; justify-content: space-between;
                 flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--qs-line);
                 padding-bottom: 12px; }
.qs-co-sechead h4 { font-family: var(--qs-font); font-size: 17px; font-weight: 700;
                    color: var(--qs-ink); margin: 0; }
.qs-co-loginhint { font-size: 13.5px; color: var(--qs-muted); }
.qs-co-loginhint a { color: var(--qs-blue); font-weight: 600; }
.qs-pay-options { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.qs-pay-option { flex: 1; min-width: 200px; margin: 0; font-weight: 400; cursor: pointer; }
.qs-pay-option input { position: absolute; opacity: 0; }
.qs-pay-body { display: block; border: 1.5px solid var(--qs-field-border); border-radius: 10px;
               padding: 14px 16px 12px 42px; position: relative; transition: all .12s ease; }
.qs-pay-body i { position: absolute; left: 14px; top: 16px; color: var(--qs-muted); font-size: 16px; }
.qs-pay-t { display: block; font-weight: 700; color: var(--qs-ink); font-size: 14.5px; }
.qs-pay-s { display: block; color: var(--qs-muted); font-size: 12.5px; margin-top: 2px; }
.qs-pay-option input:checked + .qs-pay-body { border-color: var(--qs-navy);
               background: var(--qs-bg-blue); box-shadow: 0 0 0 1px var(--qs-navy) inset; }
.qs-pay-option input:checked + .qs-pay-body i,
.qs-pay-option input:checked + .qs-pay-body .qs-pay-t { color: var(--qs-navy); }
.qs-co-sumhead { display: flex; align-items: baseline; justify-content: space-between; }
.qs-co-edit { color: var(--qs-blue); font-size: 13.5px; text-decoration: none; }
.qs-co-edit:hover { text-decoration: underline; }
.qs-cart-item--sm { padding: 12px 0; border: 0; border-bottom: 1px solid var(--qs-line);
                    border-radius: 0; margin-bottom: 0; }
.qs-cart-item--sm .qs-cart-cover img { width: 46px; height: 64px; }
.qs-cart-item--sm .qs-cart-title { font-size: 14.5px; margin-bottom: 4px; }
.qs-cart-item--sm .qs-cart-line { min-width: 80px; }
.qs-cart-item--sm .qs-cart-line-total { font-size: 15px; }

/* ---- Genre listing page ---- */
.qs-genre-hero { display: flex; align-items: center; justify-content: space-between; gap: 26px;
                 flex-wrap: wrap; background: linear-gradient(115deg, #0A2C40 0%, var(--qs-navy) 45%, #1B5379 100%);
                 border-radius: var(--qs-radius-card); padding: 34px 40px; margin-bottom: 30px; }
.qs-genre-hero-title { font-family: var(--qs-font); color: #fff; font-size: 34px; font-weight: 800 !important;
                       margin: 0 0 8px; text-transform: capitalize; letter-spacing: -0.3px; }
.qs-genre-hero-desc { color: rgba(255,255,255,.82); font-family: var(--qs-font); font-size: 15px;
                      line-height: 1.75; max-width: 680px; margin: 0; }
.qs-genre-hero-count { flex-shrink: 0; background: #fff; color: var(--qs-navy); font-family: var(--qs-font);
                       font-size: 13px; font-weight: 700; line-height: 1; padding: 10px 18px 10px 22px;
                       -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
                       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
/* 4-up grid for the genre results */
.qs-book-grid--4 { gap: 26px; margin-bottom: 26px; }
.qs-book-grid--4 .qs-book-card { width: calc(25% - 20px); min-width: 150px; }
@media (max-width: 991px) { .qs-book-grid--4 .qs-book-card { width: calc(33.333% - 18px); } }
@media (max-width: 560px) { .qs-book-grid--4 .qs-book-card { width: calc(50% - 13px); } }
/* One-line-and-a-bit description under each card: information scent + real
   indexable text on the listing */
.qs-book-desc { font-size: 13px; color: var(--qs-muted); line-height: 1.6; margin-top: 6px;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Spotlight: one random book from the genre, full-width navy feature */
.qs-spotlight { display: flex; align-items: center; gap: 34px; margin: 6px 0 32px;
                background: linear-gradient(115deg, #0A2C40 0%, var(--qs-navy) 50%, #1B5379 100%);
                border-radius: var(--qs-radius-card); padding: 30px 40px; }
.qs-spot-cover { flex-shrink: 0; display: block; border-radius: 8px;
                 box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 26px 4px rgba(255,255,255,.28),
                             0 12px 28px rgba(0,0,0,.4); }
.qs-spot-cover img { width: 128px; height: 182px; object-fit: cover; border-radius: 8px; display: block; }
.qs-spot-body { min-width: 0; }
.qs-spot-title { font-family: var(--qs-font); color: #fff; font-size: 25px; font-weight: 800 !important;
                 margin: 0 0 4px; line-height: 1.25; text-transform: none; letter-spacing: 0;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-spot-author { color: rgba(255,255,255,.7); font-family: var(--qs-font); font-size: 14px; margin-bottom: 10px; }
.qs-spot-desc { color: rgba(255,255,255,.85); font-family: var(--qs-font); font-size: 14.5px;
                line-height: 1.75; max-width: 720px; margin: 0 0 16px;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .qs-spotlight { flex-direction: column; padding: 24px; } }

/* Gold badge for the genre's top-rated books */
.qs-top-badge { position: absolute; top: 10px; left: 10px; background: var(--qs-star); color: #3A2E00;
                font-family: var(--qs-font); font-size: 11.5px; font-weight: 700; line-height: 1;
                padding: 5px 10px; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.qs-top-badge .fa-star { font-size: 10px; }

/* Reader-review feature panel (alternates with the Spotlight every 8 cards):
   light card so the two panel types read differently at a glance. */
.qs-reviewblock { display: flex; align-items: center; gap: 26px; margin: 6px 0 32px;
                  background: var(--qs-bg-blue); border: 1px solid #D9E6F0;
                  border-radius: var(--qs-radius-card); padding: 28px 36px; }
.qs-rb-quote { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: #fff;
               color: var(--qs-blue); font-size: 20px; display: flex; align-items: center;
               justify-content: center; box-shadow: 0 3px 10px rgba(14,58,83,.12); }
.qs-rb-body { flex: 1; min-width: 0; }
.qs-rb-stars { font-size: 17px; letter-spacing: 3px; margin-bottom: 8px; display: block; }
.qs-rb-text { font-family: var(--qs-font); font-size: 16px; line-height: 1.75; color: var(--qs-ink);
              font-style: italic; margin: 0 0 10px; max-width: 640px;
              display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qs-rb-reviewer { font-family: var(--qs-font); font-size: 13.5px; color: var(--qs-muted); }
.qs-rb-book { flex-shrink: 0; display: flex; align-items: center; gap: 14px; text-decoration: none;
              background: #fff; border-radius: 10px; padding: 12px 18px 12px 12px;
              box-shadow: 0 3px 10px rgba(14,58,83,.10); max-width: 300px;
              transition: box-shadow .15s ease, transform .15s ease; }
.qs-rb-book:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14,58,83,.18); text-decoration: none; }
.qs-rb-book img { width: 52px; height: 74px; object-fit: cover; border-radius: 5px; display: block; }
.qs-rb-bookmeta { min-width: 0; }
.qs-rb-booktitle { display: block; font-family: var(--qs-font); font-size: 14.5px; font-weight: 700;
                   color: var(--qs-ink); line-height: 1.3; margin-bottom: 3px;
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-rb-bookauthor { display: block; font-family: var(--qs-font); font-size: 12.5px; color: var(--qs-muted); margin-bottom: 5px; }
.qs-rb-cta { display: block; font-family: var(--qs-font); font-size: 13px; font-weight: 700; color: var(--qs-blue); }
@media (max-width: 767px) { .qs-reviewblock { flex-direction: column; align-items: flex-start; } }

/* Quote feature panel ("From the Pages") — third member of the every-8-cards
   rotation: navy Spotlight, blue reviewblock, and this white card, so the
   three read differently at a glance. */
.qs-qpanel { position: relative; background: #fff; border: 1px solid var(--qs-line);
             border-radius: var(--qs-radius-card); margin: 6px 0 32px; padding: 0 36px 26px;
             box-shadow: 0 0 0 1px rgba(14,58,83,.04), 0 4px 14px rgba(14,58,83,.08); }
.qs-qpanel-tab { display: inline-block; background: var(--qs-navy); color: #fff;
                 font-family: var(--qs-font); font-size: 11.5px; font-weight: 700;
                 letter-spacing: 2px; text-transform: uppercase; line-height: 1;
                 padding: 8px 22px 8px 16px; margin: 18px 0 0 -36px;
                 clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
.qs-qpanel-body { display: flex; align-items: flex-start; gap: 26px; padding-top: 16px; }
.qs-qpanel-cover { flex-shrink: 0; display: block; }
.qs-qpanel-cover img { width: 84px; height: 120px; object-fit: cover; border-radius: 6px;
                       box-shadow: 0 0 0 1px rgba(14,58,83,.12), 0 4px 10px rgba(14,58,83,.18); }
.qs-qpanel-main { min-width: 0; }
.qs-qpanel-quote { border: 0; margin: 0 0 10px; padding: 0; font-size: 19px; line-height: 1.7;
                   color: var(--qs-ink); font-family: Georgia, 'Times New Roman', serif;
                   max-width: 760px;
                   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qs-qpanel-meta { font-family: var(--qs-font); font-size: 14px; color: var(--qs-ink-2); margin-bottom: 14px; }
.qs-qpanel-meta a { color: var(--qs-navy); font-weight: 600; text-decoration: none; }
.qs-qpanel-meta a:hover { text-decoration: underline; }
.qs-qpanel-theme { display: inline-block; background: var(--qs-bg-blue); color: #38617A !important;
                   font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 20px;
                   margin-left: 8px; }
.qs-qpanel-theme:hover { background: var(--qs-navy); color: #fff !important; text-decoration: none; }
@media (max-width: 640px) { .qs-qpanel { padding: 0 24px 22px; }
                            .qs-qpanel-tab { margin-left: -24px; }
                            .qs-qpanel-cover { display: none; } }

/* "Lines Worth Remembering" — bookmark-shaped random-quote cards (store) */
.qs-quotes-band .qs-bmk-row { display: flex; gap: 22px; align-items: stretch; }
.qs-bmk { flex: 1 1 0; min-width: 0; background: var(--qs-bg-blue); padding: 20px 22px 34px;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 18px), 0 100%);
          font-family: var(--qs-font); display: flex; flex-direction: column; }
.qs-bmk-mark { font-family: Georgia, 'Times New Roman', serif; font-size: 44px; line-height: .5;
               color: var(--qs-blue); display: block; margin-bottom: 8px; }
.qs-bmk-quote { border: 0; margin: 0 0 14px; padding: 0; font-size: 15.5px; line-height: 1.7;
                color: var(--qs-ink); font-family: Georgia, 'Times New Roman', serif;
                display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.qs-bmk-meta { margin-top: auto; font-size: 13px; color: #38617A; }
.qs-bmk-meta a { color: var(--qs-navy); font-weight: 600; text-decoration: none; }
.qs-bmk-meta a:hover { text-decoration: underline; }
@media (max-width: 767px) { .qs-quotes-band .qs-bmk-row { flex-direction: column; } }

/* ---- Quotes (public pages + book/author sections) ---- */
.qs-quote-card { position: relative; background: #fff; border: 1px solid var(--qs-line);
                 border-radius: var(--qs-radius-card); padding: 24px 130px 20px 28px;
                 margin-bottom: 18px; font-family: var(--qs-font); }
.qs-quote-text { border: 0; margin: 0 0 14px; padding: 0; font-size: 18px; line-height: 1.75;
                 color: var(--qs-ink); font-family: Georgia, 'Times New Roman', serif; }
.qs-quote-attrib { font-size: 14.5px; color: var(--qs-ink-2); margin-bottom: 10px; }
.qs-quote-attrib a { color: var(--qs-navy); font-weight: 600; text-decoration: none; }
.qs-quote-attrib a:hover { text-decoration: underline; }
.qs-quote-tags .qs-pill { font-size: 12px; padding: 4px 12px; text-decoration: none; margin-right: 4px; }
.qs-quote-tags .qs-pill:hover { background: var(--qs-navy); color: #fff; }
.qs-quote-cover { position: absolute; right: 24px; top: 24px; display: block; }
.qs-quote-cover img { width: 78px; height: 110px; object-fit: cover; border-radius: 6px;
                      box-shadow: 0 0 0 1px rgba(14,58,83,.12), 0 4px 10px rgba(14,58,83,.18); }
.qs-quote-side h3 { font-family: var(--qs-font); font-size: 17px; font-weight: 700;
                    color: var(--qs-ink); margin: 2px 0 14px; }
.qs-quote-theme { display: flex; justify-content: space-between; align-items: center;
                  padding: 8px 10px; border-radius: 8px; text-decoration: none;
                  color: var(--qs-navy); font-family: var(--qs-font); font-size: 14.5px; font-weight: 500; }
.qs-quote-theme:hover { background: var(--qs-bg-blue); text-decoration: none; color: var(--qs-navy); }
.qs-quote-theme.is-active { background: var(--qs-navy); color: #fff; }
.qs-qt-count { font-size: 12.5px; color: var(--qs-muted); }
.qs-quote-theme.is-active .qs-qt-count { color: rgba(255,255,255,.75); }
@media (max-width: 640px) { .qs-quote-card { padding-right: 28px; } .qs-quote-cover { display: none; } }

/* Quotes section on book / author pages */
.qs-bookquotes { margin: 0 0 44px; }
.qs-bq { border-left: 3px solid var(--qs-bg-blue); padding: 4px 0 4px 20px; margin: 18px 0; }
.qs-bq blockquote { border: 0; margin: 0 0 8px; padding: 0; font-size: 16.5px; line-height: 1.8;
                    color: var(--qs-ink); font-family: Georgia, 'Times New Roman', serif; }
.qs-bq-meta { font-family: var(--qs-font); font-size: 13.5px; color: var(--qs-muted); }
.qs-bq-meta a { color: var(--qs-navy); text-decoration: none; }
.qs-bq-meta a:hover { text-decoration: underline; }
.qs-bq-meta .qs-pill { font-size: 11.5px; padding: 3px 10px; margin-left: 6px; text-decoration: none; }
.qs-bq-all { font-family: var(--qs-font); font-size: 14px; font-weight: 600; color: var(--qs-blue);
             text-decoration: none; }
.qs-bq-all:hover { text-decoration: underline; }

/* ---- Author profile page (Figma "Author" frame 956-57748: white intro,
   large rounded photo left; name / @username / About the Author / bio /
   plain social icons right) ---- */
.qs-author-intro { display: flex; align-items: flex-start; gap: 56px; margin: 14px 0 36px; }
.qs-ai-photo { flex-shrink: 0; width: 330px; max-width: 38vw; }
.qs-ai-photo img { width: 100%; height: auto; aspect-ratio: 6 / 7; object-fit: cover; border-radius: 10px; display: block; }
.qs-ai-main { flex: 1; min-width: 0; }
.qs-ai-name { font-family: var(--qs-font); color: var(--qs-ink); font-size: 44px; font-weight: 800 !important;
              margin: 0 0 6px; line-height: 1.15; text-transform: none; letter-spacing: 0; }
.qs-ai-username { font-family: var(--qs-font); font-size: 17px; color: var(--qs-muted); margin-bottom: 12px; }
.qs-ai-meta { font-family: var(--qs-font); font-size: 13.5px; color: var(--qs-muted); margin-bottom: 10px; }
.qs-ai-meta i { margin-right: 5px; }
.qs-ai-meta span { margin-right: 16px; white-space: nowrap; }
.qs-ai-meta a { color: var(--qs-navy); font-weight: 600; text-decoration: none; }
.qs-ai-meta a:hover { text-decoration: underline; }
.qs-ai-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.qs-ai-rating .qs-stars { font-size: 19px; letter-spacing: 3px; color: var(--qs-star); }
/* Publishers carry a verified mark instead of a star rating: a press is not
   scored out of five, and five empty stars read as a bad review of nothing.
   Awarded by us, so it says something a rating cannot. */
.qs-ai-verified { display: inline-flex; align-items: center; gap: 6px; font-family: var(--qs-font);
    font-size: 13.5px; font-weight: 600; color: var(--qs-navy); background: rgba(14,58,83,.07);
    border: 1px solid rgba(14,58,83,.16); border-radius: 999px; padding: 4px 12px; }
.qs-ai-verified i { color: var(--qs-navy); font-size: 14px; }
.qs-ai-followers { font-family: var(--qs-font); font-size: 13.5px; color: var(--qs-muted); }
.qs-ai-badges { display: flex; gap: 8px; margin-bottom: 6px; }
.qs-ai-badges img { width: 40px; height: 40px; }
.qs-ai-abouth { font-family: var(--qs-font); color: var(--qs-ink); font-size: 28px; font-weight: 700 !important;
                margin: 18px 0 12px; text-transform: none; letter-spacing: 0; }
.qs-ai-bio { font-family: var(--qs-font); font-size: 16px; line-height: 1.8; color: var(--qs-ink-2);
             max-width: 760px; margin: 0 0 20px; }
/* EQUAL BOXES, not equal gaps. Each link shrink-wrapped its glyph, and Font
   Awesome marks have very different advance widths -- the Goodreads "g" is
   narrow, facebook-f narrower still, the WordPress mark a wide filled circle.
   A fixed 18px between boxes of different widths is uneven to the eye however
   even it is in the CSS, which is what "not balanced" was. Centring each glyph
   in a square of its own makes the spacing optical rather than arithmetic, and
   gives every icon the same tap target. */
.qs-ai-social { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.qs-ai-social a { color: var(--qs-navy); font-size: 19px; text-decoration: none;
                  font-family: var(--qs-font); font-weight: 700; line-height: 1;
                  display: inline-flex; align-items: center; justify-content: center;
                  width: 36px; height: 36px; border-radius: 8px; }
/* The box is invisible until hover, which is where it earns its keep: a tint
   the size of the target tells you what you are about to click, which a bare
   colour change on a 19px glyph does not. */
.qs-ai-social a:hover { color: var(--qs-blue); background: var(--qs-bg-blue); }
.qs-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qs-ai-actions .qs-btn { padding: 12px 22px; font-size: 15px; }
@media (max-width: 767px) { .qs-author-intro { flex-direction: column; gap: 24px; }
                            .qs-ai-photo { width: 100%; max-width: 340px; }
                            .qs-ai-name { font-size: 32px; } }

/* Stat cards (as an Author / as an Editor) */
.qs-astat-k { font-family: var(--qs-font); font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
              text-transform: uppercase; color: var(--qs-muted); margin: 0 0 10px; }
.qs-astat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.qs-astat { flex: 1 1 130px; background: #fff; border: 1px solid var(--qs-line); border-radius: 12px;
            padding: 16px 20px; box-shadow: 0 0 0 1px rgba(14,58,83,.04), 0 4px 14px rgba(14,58,83,.08); }
.qs-astat b { display: block; font-family: var(--qs-font); font-size: 24px; font-weight: 800; color: var(--qs-navy); }
.qs-astat span { font-family: var(--qs-font); font-size: 13px; color: var(--qs-muted); }

/* Book sections: centred heading per the Figma ("Books by {name}") */
.qs-ah-sec { margin: 40px 0 10px; }
.qs-ah-sec .qs-sec-head2 { margin-bottom: 24px; }

/* ---- Thank-you / confirmation page ---- */
.qs-ty-icon { width: 74px; height: 74px; border-radius: 50%; background: #E7F4EE; color: #1f7a4d;
              font-size: 32px; line-height: 74px; text-align: center; margin: 10px auto 20px; }
.qs-ty-sub { font-family: var(--qs-font); font-size: 16px; color: var(--qs-ink-2); margin-top: 10px; }
.qs-ty-card { max-width: 620px; margin: 26px auto; text-align: left; padding: 26px 28px;
              font-family: var(--qs-font); font-size: 14.5px; color: var(--qs-ink-2); }
.qs-ty-ordernum { text-align: center; font-size: 20px; color: var(--qs-ink); margin-bottom: 18px; }
.qs-track { text-align: center; background: var(--qs-bg-blue); border: 1px solid #CFE0EC;
            border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.qs-track-l { font-size: 14px; color: var(--qs-ink-2); line-height: 1.7; }
.qs-track-num { font-size: 26px; font-weight: 800; color: var(--qs-navy); letter-spacing: 1px; margin-top: 4px; }
.qs-ty-h { font-family: var(--qs-font); font-size: 15px; font-weight: 700; color: var(--qs-ink);
           margin: 20px 0 6px; }
.qs-ty-total { color: var(--qs-navy); font-weight: 800; }
.qs-ty-note { color: var(--qs-muted); font-size: 13.5px; margin-top: 16px; }
.qs-ty-help { color: var(--qs-ink-2); font-size: 14.5px; }
.qs-ty .detail_bank { margin: 10px 0 4px; line-height: 2; }

/* ---- Out-of-stock / notice ---- */
.qs-notice { border: 1px solid #E6D5B8; background: #FDF8EF; border-radius: var(--qs-radius);
             padding: 12px; text-align: center; color: #7A6A53; font-size: 13px; }

/* ---- Availability status ---- */
.qs-unavailable { color: #7A6A53; }

/* ==========================================================================
   Book / order page — restyle the existing (legacy) elements to the new
   system. This stylesheet currently loads only on book.php, so these are
   safely page-scoped. Markup reflow (buy box beside cover, gallery) comes next.
   ========================================================================== */
.breadcrumb { background: transparent; padding: 10px 0; margin-bottom: 14px; font-size: 14px; }
.breadcrumb > li + li:before { color: #c9c9c9; }
.breadcrumb a { color: var(--qs-muted); }
.breadcrumb .active { color: var(--qs-blue); }

/* !important on every heading weight: legacy style.css sets
   h1..h6 { font-weight:500 !important } and would otherwise win. */
.book_title { font-family: var(--qs-font); font-size: 42px; font-weight: 800 !important; color: var(--qs-ink);
              line-height: 1.12; letter-spacing: -0.5px; margin: 14px 0 10px; }
/* Author byline: "by Name" — dark "by", dark underlined name (not blue) */
.col-md-7 h4, h4.qs-pd-by { font-family: var(--qs-font); font-weight: 400; font-size: 18px;
               color: var(--qs-ink-2); text-transform: none; margin: 0 0 16px; }
.col-md-7 h4 a[href], h4.qs-pd-by a[href] { color: var(--qs-ink); text-decoration: underline; font-weight: 500; }
.col-md-7 .co_authors a { color: var(--qs-ink); }

/* Old avg-rating block + social share are replaced/omitted to match the Figma hero */
.col-md-7 .book-rating, .col-md-7 .sharing { display: none; }

/* Cover shown inside a light frame (matches the Figma gallery) — constrained so a
   tall portrait cover doesn't dominate the hero. */
.book-cover-frame { background: var(--qs-bg-blue); border-radius: 12px; padding: 16px;
                    max-width: 360px; margin: 0 auto; }
.book-cover-frame .fotorama__stage { border-radius: 8px; overflow: hidden; }
.fotorama__nav__frame .fotorama__thumb { background: var(--qs-bg-blue); border-radius: 6px; }

/* Section headings (About, Reviews, Videos accordions) */
.panel-title > a { color: var(--qs-ink); font-weight: 700; text-decoration: none; }
.panel-default > .panel-heading { background: transparent; border: 0; padding-left: 0; }
.panel-group .panel { border: 0; box-shadow: none; }

/* Reviews */
.reviews .media { border-top: 1px solid var(--qs-line); padding-top: 16px; }
.reviews .fa-star { color: var(--qs-star); }
.reviews .fa-star-o { color: #DCDCDC; }

/* ==========================================================================
   Global header (Figma): navy announcement bar, white main bar with logo +
   centre search + cart/account, centred nav row. Self-contained qs- classes
   so legacy .navbar styles never touch it.
   ========================================================================== */
.qs-announce { background: var(--qs-navy); color: #fff; font-family: var(--qs-font);
               font-size: 13.5px; text-align: center; padding: 9px 16px; display: block;
               text-decoration: none; }
.qs-announce:hover { color: #fff; text-decoration: underline; }
.qs-header { background: #fff; border-bottom: 1px solid var(--qs-line);
             font-family: var(--qs-font); position: relative; z-index: 999; }
.qs-header-main { max-width: 1170px; margin: 0 auto; padding: 16px 15px;
                  display: flex; align-items: center; gap: 26px; }
.qs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.qs-brand img { width: 44px; height: auto; display: block; }
.qs-brand span { font-size: 21px; font-weight: 800; color: var(--qs-navy); letter-spacing: -0.3px; }
.qs-brand:hover { text-decoration: none; }
.qs-search { flex: 1; position: relative; }
.qs-search input { width: 100%; padding: 12px 18px 12px 44px; border: 1.5px solid var(--qs-navy);
                   border-radius: 10px; font-size: 14.5px; color: var(--qs-ink); background: #fff; }
.qs-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(14,58,83,.12); }
.qs-search .fa-search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
                        color: var(--qs-muted); font-size: 15px; pointer-events: none; }
.qs-header-icons { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.qs-header-icons > a { color: var(--qs-navy); font-size: 21px; position: relative;
                       text-decoration: none; line-height: 1; }
.qs-header-icons > a:hover { color: var(--qs-blue); }
.qs-cart-badge { position: absolute; top: -8px; right: -10px; background: var(--qs-blue);
                 color: #fff; font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px;
                 line-height: 17px; text-align: center; border-radius: 9px; padding: 0 4px; }
.qs-header-auth { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.qs-header-auth .qs-login { color: var(--qs-navy); font-size: 14.5px; font-weight: 600;
                            text-decoration: none; }
.qs-header-auth .qs-login:hover { color: var(--qs-blue); }
.qs-header-nav { border-top: 1px solid var(--qs-line); }
.qs-header-nav ul { max-width: 1170px; margin: 0 auto; padding: 0 15px; list-style: none;
                    display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
/* Matched to the Figma header component: Dark Blue #094977, 16px/24px, weight
   500. We had 15px/600 in pure black, which is why it read heavier, tighter and
   wrong.
   The colour needs this much selector because css/custom.css:1197 carries
   `.white-header header nav ul li a { color: #000 !important }` — higher
   specificity AND !important, so it beat every simpler rule here. That one line
   is why the header was black no matter what this file said. */
.qs-header-nav a { display: block; padding: 13px 20px; font-size: 16px;
                   font-weight: 500; line-height: 24px; text-decoration: none; }
.white-header header nav.qs-header-nav ul li a,
.qs-header-nav a { color: #094977 !important; }
.white-header header nav.qs-header-nav ul li a:hover,
.qs-header-nav a:hover { color: var(--qs-blue) !important; text-decoration: none; }
.white-header header nav.qs-header-nav ul li a.qs-nav-free,
.qs-header-nav a.qs-nav-free { color: #1f7a4d !important; }
@media (max-width: 767px) {
    .qs-header-main { flex-wrap: wrap; gap: 12px; }
    .qs-search { order: 3; flex-basis: 100%; }
    .qs-header-nav a { padding: 11px 12px; font-size: 14px; }
}

/* The legacy morphsearch overlay collapses to a small corner box — invisible
   until opened now that the header search proxy drives it. (focus() still
   works on an opacity-0 element, display:none would break it.) */
#morphsearch:not(.open) { opacity: 0; pointer-events: none; }
#morphsearch.open { opacity: 1; }

/* ==========================================================================
   Global footer (Figma): navy panel — brand + tagline left, link columns,
   hairline divider, copyright + socials bottom bar.
   ========================================================================== */
/* No top margin. The 70px here used to separate the footer from the white
   WhatsApp pre-footer band; with that band gone it is a strip of page
   background between the last section and the footer, which reads as a gap
   rather than as breathing room. The footer's own padding does the spacing. */
.qs-footer { background: var(--qs-navy); font-family: var(--qs-font); }
.qs-footer-in { max-width: 1170px; margin: 0 auto; padding: 54px 15px 0; }
.qs-footer-cols { display: flex; flex-wrap: wrap; gap: 40px; }
.qs-footer-brand { flex: 1.4; min-width: 220px; }
.qs-footer-brand .qs-fb-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.qs-footer-brand img { width: 40px; height: auto; background: #fff; border-radius: 50%; padding: 5px; }
.qs-footer-brand .qs-fb-name { color: #fff; font-size: 19px; font-weight: 700; }
.qs-footer-brand p { color: rgba(255,255,255,.75); font-size: 14.5px; line-height: 1.8; max-width: 300px; }
.qs-footer-col { flex: 1; min-width: 150px; }
.qs-footer-col h5 { font-family: var(--qs-font); color: #9fb8ce; font-size: 14px; font-weight: 700 !important;
                    letter-spacing: .02em; text-transform: none; margin: 6px 0 18px; }
/* Second heading inside a column ("By City", "Services", "Legal"). Needs a gap
   above it that the first heading must not have, or the column starts with a
   dead band of space. */
.qs-footer-col .qs-footer-h5b { margin-top: 30px; }
.qs-footer-col a, .qs-footer-col span { display: block; color: rgba(255,255,255,.9); font-size: 14.5px;
                     padding: 6px 0; text-decoration: none; }
.qs-footer-col a:hover { color: #fff; text-decoration: underline; }
.qs-footer-col span { color: rgba(255,255,255,.7); }
.qs-footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 44px;
                    padding: 20px 0 24px; display: flex; align-items: center;
                    justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.qs-footer-bottom p { margin: 0; color: rgba(255,255,255,.65); font-size: 13.5px; }
.qs-footer-bottom p a { color: rgba(255,255,255,.85); text-decoration: none; }
.qs-footer-bottom p a:hover { text-decoration: underline; }
.qs-footer-social a { color: rgba(255,255,255,.8); font-size: 16px; margin-left: 16px;
                      text-decoration: none; }
.qs-footer-social a:hover { color: #fff; }

/* ---- Auth modals (login / forgot password) + generic modal chrome ---- */
.qs-modal .modal-content { border: 0; border-radius: 14px; font-family: var(--qs-font);
                           box-shadow: 0 18px 50px rgba(14,58,83,.28); }
.qs-modal .modal-header { border: 0; padding: 26px 30px 0; }
.qs-modal .modal-title { font-size: 21px; font-weight: 700 !important; color: var(--qs-ink);
                         text-align: center; text-transform: none; letter-spacing: 0; }
.qs-modal .close { font-size: 26px; opacity: .45; margin-top: -6px; }
.qs-modal .close:hover { opacity: .8; }
.qs-modal .modal-body { padding: 20px 30px 30px; }
.qs-modal .form-control { height: 46px; border-radius: 8px; border: 1px solid #d9dfe4;
                          box-shadow: none; font-size: 14.5px; padding: 0 16px; }
.qs-modal .form-control:focus { border-color: var(--qs-navy); box-shadow: 0 0 0 3px rgba(14,58,83,.12); }
.qs-modal .alert { border-radius: 8px; }
.qs-gbtn { display: flex; align-items: center; justify-content: center; gap: 10px;
           border: 1px solid #d9dfe4; border-radius: 8px; background: #fff; color: #444;
           font-weight: 600; padding: 11px; font-size: 14.5px; text-decoration: none; width: 100%; }
.qs-gbtn:hover { background: #f5f8fa; color: #222; text-decoration: none; }
.qs-gbtn img { height: 20px; width: 20px; }
.qs-or { display: flex; align-items: center; gap: 12px; color: #9aa7b0; font-size: 13px; margin: 18px 0; }
.qs-or:before, .qs-or:after { content: ""; flex: 1; border-top: 1px solid #e8edf1; }
.qs-auth-link { display: block; text-align: center; font-size: 14px; color: var(--qs-muted); margin-top: 14px; }
.qs-auth-link a { color: var(--qs-navy); font-weight: 700; text-decoration: none; }
.qs-auth-link a:hover { text-decoration: underline; }

/* Signup page card */
.qs-auth-card { max-width: 480px; margin: 36px auto 70px; background: #fff;
                border: 1px solid var(--qs-line); border-radius: 14px; padding: 34px 36px;
                font-family: var(--qs-font);
                box-shadow: 0 0 0 1px rgba(14,58,83,.04), 0 4px 14px rgba(14,58,83,.08); }
.qs-auth-card h1 { font-family: var(--qs-font); font-size: 26px; font-weight: 800 !important;
                   color: var(--qs-ink); margin: 0 0 4px; text-align: center;
                   text-transform: none; letter-spacing: 0; }
.qs-auth-sub { text-align: center; color: var(--qs-muted); font-size: 14.5px; margin-bottom: 20px; }
.qs-auth-card .form-control { height: 46px; border-radius: 8px; border: 1px solid #d9dfe4;
                              box-shadow: none; font-size: 14.5px; padding: 0 16px; }
.qs-auth-card .form-control:focus { border-color: var(--qs-navy); box-shadow: 0 0 0 3px rgba(14,58,83,.12); }
.qs-auth-fine { font-size: 12.5px; color: var(--qs-muted); line-height: 1.6; margin: 14px 0 16px; }
.qs-auth-fine a { color: var(--qs-navy); font-weight: 600; }

/* ---- Rate / review page ---- */
.qs-rate-wrap { max-width: 660px; margin: 26px auto 70px; font-family: var(--qs-font); }
.qs-rate-book { display: flex; gap: 18px; align-items: center; background: var(--qs-bg-blue);
                border-radius: 12px; padding: 16px 20px; margin-bottom: 26px; }
.qs-rate-book img { width: 58px; height: 82px; object-fit: cover; border-radius: 6px;
                    box-shadow: 0 0 0 1px rgba(14,58,83,.12), 0 4px 10px rgba(14,58,83,.18); }
.qs-rate-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px;
                  text-transform: uppercase; color: #38617A; margin-bottom: 3px; }
.qs-rate-title { font-size: 18px; font-weight: 700; color: var(--qs-ink); line-height: 1.3; }
.qs-rate-h { font-size: 24px; font-weight: 800 !important; color: var(--qs-ink);
             text-align: center; margin: 0 0 6px; text-transform: none; letter-spacing: 0; }
.qs-rate-sub { text-align: center; color: var(--qs-muted); font-size: 14.5px; margin-bottom: 12px; }
.qs-rate-stars { text-align: center; margin: 6px 0 4px; }
.qs-rate-stars .rating-input i, .qs-rate-stars .rating i { color: var(--qs-star); font-size: 34px; margin: 0 3px; }
.qs-survey { background: #fff; border: 1px solid var(--qs-line); border-radius: 12px;
             padding: 22px 26px; margin: 20px 0;
             box-shadow: 0 0 0 1px rgba(14,58,83,.04), 0 4px 14px rgba(14,58,83,.08); }
.qs-survey .form-group { margin-bottom: 20px; }
.qs-survey .form-group:last-child { margin-bottom: 0; }
.qs-survey label { font-weight: 700; color: var(--qs-ink); font-size: 15px; }
.qs-survey .radio { display: flex; align-items: center; gap: 8px; font-size: 14.5px;
                    color: var(--qs-ink-2); margin: 7px 0; }
.qs-survey .radio input { margin: 0 !important; position: static !important; }
.qs-rate-wrap textarea.form-control { border-radius: 10px; border: 1px solid #d9dfe4;
                                      box-shadow: none; font-size: 14.5px; padding: 14px 16px; }
.qs-rate-wrap textarea.form-control:focus { border-color: var(--qs-navy);
                                            box-shadow: 0 0 0 3px rgba(14,58,83,.12); }
.qs-rate-login { text-align: center; background: var(--qs-bg-blue); border: 1px solid #CFE0EC;
                 border-radius: 14px; padding: 40px 30px; }
.qs-rate-login h3 { font-family: var(--qs-font); font-size: 20px; font-weight: 700 !important;
                    color: var(--qs-ink); margin: 0 0 8px; text-transform: none; }
.qs-rate-login p { color: var(--qs-ink-2); font-size: 14.5px; margin-bottom: 18px; }

/* ---- Search overlay (morphsearch reskin; classes/JS untouched) ---- */
.morphsearch { background: var(--qs-bg-blue); border-radius: 10px; }
.morphsearch.open { background: #fff; border-radius: 0; }
.morphsearch-input { font-family: var(--qs-font); color: var(--qs-navy); font-weight: 700; }
.morphsearch.open .morphsearch-input { font-size: 4.5em; color: var(--qs-navy);
                                       border-bottom: 3px solid var(--qs-bg-blue); }
.morphsearch-input::-webkit-input-placeholder { color: #b9c9d4; }
.morphsearch-input::-moz-placeholder { color: #b9c9d4; }
.morphsearch.open .morphsearch-form { max-width: 900px; }
.morphsearch-close::before, .morphsearch-close::after { background: var(--qs-navy); }
.morphsearch-content { background: #fff; font-family: var(--qs-font); }
.morphsearch .dummy-column h2 { font-family: var(--qs-font); font-size: 13px; font-weight: 700 !important;
                                letter-spacing: 2px; text-transform: uppercase; color: var(--qs-muted); }
.morphsearch .dummy-media-object { border-radius: 10px; padding: 8px 10px; background: transparent;
                                   transition: background .15s ease; display: flex; align-items: center; gap: 12px; }
.morphsearch .dummy-media-object:hover { background: var(--qs-bg-blue); }
.morphsearch .dummy-media-object img { border-radius: 8px; object-fit: cover; margin: 0; }
.morphsearch .dummy-media-object img.round { border-radius: 50%; }
.morphsearch .dummy-media-object h3 { font-family: var(--qs-font); font-size: 15px; font-weight: 600;
                                      color: var(--qs-ink); margin: 0; }
@media (max-width: 767px) { .morphsearch.open .morphsearch-input { font-size: 2em; } }

/* ---- Pre-footer: newsletter card + press strip ---- */
.qs-prefooter { padding: 50px 20px 10px; }
.qs-newsletter { max-width: 560px; margin: 0 auto 46px; background: var(--qs-bg-blue);
                 border-radius: 16px; padding: 34px 38px; text-align: center;
                 font-family: var(--qs-font); }
.qs-newsletter h3 { font-family: var(--qs-font); font-size: 22px; font-weight: 800 !important;
                    color: var(--qs-navy); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.qs-newsletter p { color: #38617A; font-size: 14.5px; line-height: 1.65; margin: 0 0 18px; }
.qs-newsletter form { display: flex; flex-direction: column; gap: 12px; }
.qs-newsletter input[type="email"] { height: 48px; border-radius: 10px; border: 1px solid #CFE0EC;
                                     background: #fff; padding: 0 18px; font-size: 14.5px;
                                     font-family: var(--qs-font); outline: none; width: 100%; }
.qs-newsletter input[type="email"]:focus { border-color: var(--qs-navy);
                                           box-shadow: 0 0 0 3px rgba(14,58,83,.12); }
.qs-newsletter .qs-btn { width: 100%; }
.qs-press { max-width: 1100px; margin: 0 auto; padding-bottom: 40px; text-align: center; }
.qs-press-label { font-family: var(--qs-font); font-size: 12.5px; font-weight: 700;
                  letter-spacing: 2.5px; text-transform: uppercase; color: var(--qs-muted);
                  margin-bottom: 22px; }
.qs-press-row { display: flex; align-items: center; justify-content: center;
                flex-wrap: wrap; gap: 44px; }
.qs-press-row img { height: 34px; width: auto; max-width: 130px; object-fit: contain;
                    filter: grayscale(1); opacity: .55; transition: all .2s ease; }
.qs-press-row img:hover { filter: none; opacity: 1; }
@media (max-width: 640px) { .qs-newsletter { padding: 26px 22px; }
                            .qs-press-row { gap: 26px; }
                            .qs-press-row img { height: 26px; } }

/* ---- Mobile hamburger nav ---- */
.qs-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.qs-burger span { display: block; width: 24px; height: 3px; background: var(--qs-navy);
                  border-radius: 2px; margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.qs-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.qs-burger.is-open span:nth-child(2) { opacity: 0; }
.qs-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 991px) {
    .qs-burger { display: block; }
    .qs-header-nav { display: none; }
    .qs-header-nav.is-open { display: block; }
    .qs-header-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0;
                                padding: 6px 0 12px; }
    .qs-header-nav.is-open ul li a { display: block; padding: 12px 24px;
                                     border-top: 1px solid var(--qs-line); }
}

/* ---- WhatsApp band (pre-footer) ---- */
.qs-wa-band { max-width: 760px; margin: 0 auto 46px; background: linear-gradient(115deg, #0A2C40 0%, var(--qs-navy) 45%, #1B5379 100%);
              border-radius: 16px; padding: 30px 34px; text-align: center; font-family: var(--qs-font); }
.qs-wa-band h3 { font-family: var(--qs-font); color: #fff; font-size: 21px; font-weight: 800 !important;
                 margin: 0 0 6px; text-transform: none; letter-spacing: 0; }
.qs-wa-band > p { color: rgba(255,255,255,.75); font-size: 14px; margin: 0 0 20px; }
.qs-wa-cards { display: flex; gap: 16px; justify-content: center; }
.qs-wa-card { flex: 1 1 0; max-width: 300px; background: #fff; border-radius: 12px; padding: 18px 16px;
              text-decoration: none; display: block; transition: transform .15s ease, box-shadow .15s ease; }
.qs-wa-card:hover { transform: translateY(-3px); text-decoration: none;
                    box-shadow: 0 0 26px 4px rgba(255,255,255,.28); }
/* Crop the baked-in caption off the legacy QR images: show just the QR square
   (which sits at ~21% left / ~13% top / ~57.5% wide in the 1080px source). */
.qs-wa-qr { display: block; position: relative; width: 120px; height: 120px; margin: 0 auto 12px;
            overflow: hidden; border-radius: 8px; }
.qs-wa-qr img { position: absolute; width: 174%; left: -37%; top: -22.6%; }
.qs-wa-card b { display: block; color: var(--qs-navy); font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.qs-wa-sub { display: block; color: var(--qs-muted); font-size: 12.5px; margin-bottom: 12px; }
.qs-wa-btn { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff;
             font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 8px; }
.qs-wa-btn .fa { font-size: 16px; }
.qs-wa-card:hover .qs-wa-btn { background: #1DB954; }
.qs-wa-hint { display: block; color: rgba(255,255,255,.6); font-size: 12px; margin-top: 14px; }
@media (max-width: 640px) { .qs-wa-cards { flex-direction: column; align-items: center; }
                            .qs-wa-card { width: 100%; max-width: 320px; }
                            .qs-wa-qr { display: none; }   /* can't scan your own phone */
                            .qs-wa-hint { display: none; } }

/* ---- Floating WhatsApp chip ---- */
.qs-wa-fab { position: fixed; right: 22px; bottom: 22px; z-index: 9990; font-family: var(--qs-font); }
.qs-wa-toggle { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #25D366; color: #fff;
                font-size: 28px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25);
                display: flex; align-items: center; justify-content: center; transition: transform .15s ease; }
.qs-wa-toggle:hover { transform: scale(1.07); }
.qs-wa-menu { display: none; position: absolute; right: 0; bottom: 68px; width: 230px; background: #fff;
              border: 1px solid var(--qs-line); border-radius: 12px; padding: 12px;
              box-shadow: 0 10px 30px rgba(14,58,83,.22); }
.qs-wa-menu.is-open { display: block; }
.qs-wa-menu b { display: block; color: var(--qs-navy); font-size: 13px; font-weight: 700; margin: 2px 4px 10px; }
.qs-wa-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
                color: var(--qs-navy); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.qs-wa-menu a:hover { background: var(--qs-bg-blue); text-decoration: none; }
.qs-wa-menu a .fa { color: #25D366; font-size: 16px; width: 18px; text-align: center; }

/* ---- Thank-you page WhatsApp nudge ---- */
.qs-ty-wa { display: flex; gap: 16px; align-items: center; text-align: left; background: #E9F8EF;
            border: 1px solid #BFE8CD; border-radius: 12px; padding: 16px 18px; margin: 20px 0;
            font-family: var(--qs-font); }
.qs-ty-wa .qs-wa-qr { width: 72px; height: 72px; margin: 0; flex-shrink: 0; }
.qs-ty-wa b { display: block; color: #14532D; font-size: 14.5px; margin-bottom: 3px; }
.qs-ty-wa p { color: #3D6B4F; font-size: 13px; margin: 0 0 10px; line-height: 1.55; }
.qs-ty-wa .qs-wa-btn { padding: 7px 14px; font-size: 12.5px; }
@media (max-width: 480px) { .qs-ty-wa .qs-wa-qr { display: none; } }

/* Newsletter row inside the navy footer (between link columns and bottom bar) */
/* The newsletter now lives INSIDE the brand column, not in a full-width band
   below the links. It kept the old row layout when it moved and the heading
   and paragraph were squeezed into one-word-per-line slivers beside the
   form. Stacked block, full-width field, button beneath. */
.qs-footer-news { display: block; border-top: 1px solid rgba(255,255,255,.14);
                  margin-top: 30px; padding-top: 26px; font-family: var(--qs-font); max-width: 340px; }
.qs-footer-news h5 { font-family: var(--qs-font); color: #fff; font-size: 16px; font-weight: 700 !important;
                     margin: 0 0 5px; text-transform: none; letter-spacing: 0; }
.qs-footer-news p { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; margin: 0 0 14px; max-width: none; }
.qs-footer-news form { display: grid; gap: 10px; }
.qs-footer-news input[type="email"] { width: 100%; height: 44px; border-radius: 9px; border: 0;
                                      background: rgba(255,255,255,.12); color: #fff; padding: 0 16px;
                                      font-size: 14px; font-family: var(--qs-font); outline: none; }
.qs-footer-news input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.qs-footer-news input[type="email"]:focus { background: rgba(255,255,255,.18);
                                            box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
/* Left-aligned to sit with the heading and the field above it — the button is
   full width, so centred label text drifted away from everything else in the
   column. Centred again on a phone, where the whole block is centred anyway. */
.qs-footer-news button { height: 44px; width: 100%; padding: 0 22px; text-align: left; border: 0; border-radius: 9px;
                         background: #fff; color: var(--qs-navy); font-family: var(--qs-font);
                         font-size: 14px; font-weight: 700; cursor: pointer; }
.qs-footer-news button:hover { background: var(--qs-bg-blue); }
@media (max-width: 767px) {
    /* It is already a stacked block at every width now, so the only thing left
       to do here is let it use the full column. The old rules centred the text
       and un-rowed a form that is no longer a row. */
    .qs-footer-news { max-width: none; }
    .qs-footer-news button { text-align: center; }
}

/* Footer contact icons (phone/email) */
.qs-footer-col a .fa { width: 16px; margin-right: 6px; text-align: center; color: rgba(255,255,255,.6); }

/* Contact line inside the footer newsletter row */
/* Hairline between the blocks inside a footer column — the same rule the brand
   column draws above its newsletter, so the two sides of the footer match.
   On the h5 the padding goes above the text; on the contact block it goes above
   the first row of links. */
.qs-footer-sep { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.qs-footer-col .qs-footer-h5b.qs-footer-sep { margin-top: 26px; }

/* The contact details stack rather than sitting in a row: they are the last
   block in the column now, and a phone number wrapping mid-number reads badly. */
.qs-footer-contact { display: flex; flex-direction: column; flex-wrap: wrap;
                     gap: 10px; margin-top: 26px; }
.qs-footer-contact a { color: rgba(255,255,255,.85); font-size: 13.5px; text-decoration: none;
                       white-space: nowrap; }
.qs-footer-contact a:hover { color: #fff; text-decoration: underline; }
.qs-footer-contact a .fa { color: rgba(255,255,255,.6); margin-right: 6px; }
@media (max-width: 767px) { .qs-footer-contact { justify-content: center; } }

/* ---- Rate this book (inline, open to guests) ---- */
.qs-ratebox { background: var(--qs-bg-blue); border: 1px solid #CFE0EC; border-radius: 12px;
              padding: 20px 24px; margin: 0 0 26px; font-family: var(--qs-font); }
.qs-ratebox-head b { display: block; font-size: 16px; font-weight: 700; color: var(--qs-ink); }
.qs-ratebox-head span { font-size: 13px; color: #38617A; }
.qs-starpick { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; }
.qs-starpick-b { background: none; border: 0; padding: 0 2px; cursor: pointer; line-height: 1;
                 font-size: 34px; color: #C9D8E3; transition: color .12s ease, transform .12s ease; }
.qs-starpick-b:hover { transform: scale(1.12); }
.qs-starpick-b.is-on { color: var(--qs-star); }
.qs-starpick-label { margin-left: 12px; font-size: 14px; font-weight: 600; color: var(--qs-navy); }
.qs-ratebox-more { margin-top: 14px; }
.qs-ratebox-more textarea { width: 100%; border: 1px solid #CFE0EC; border-radius: 10px; background: #fff;
                            padding: 12px 14px; font-size: 14.5px; font-family: var(--qs-font);
                            line-height: 1.6; outline: none; resize: vertical; }
.qs-ratebox-more textarea:focus { border-color: var(--qs-navy); box-shadow: 0 0 0 3px rgba(14,58,83,.12); }
.qs-ratebox-note { font-size: 12.5px; color: #38617A; margin: 10px 0 12px; line-height: 1.55; }
.qs-review-done { background: #E9F8EF; border: 1px solid #BFE8CD; border-radius: 10px;
                  padding: 14px 18px; margin: 0 0 24px; font-family: var(--qs-font);
                  font-size: 14.5px; color: #14532D; }
.qs-review-done .fa { color: #1f7a4d; margin-right: 7px; }

/* ---- Book media gallery (3 layouts, one shared lightbox) ---- */
.qs-media { font-family: var(--qs-font); }
.qs-media button { background: none; border: 0; padding: 0; cursor: pointer; }
.qs-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qs-media-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.qs-media-play .fa { width: 44px; height: 44px; border-radius: 50%; background: rgba(14,58,83,.86);
                     color: #fff; font-size: 16px; display: flex; align-items: center;
                     justify-content: center; padding-left: 3px; }
.qs-media-thumb .qs-media-play .fa, .qs-media-tile .qs-media-play .fa { width: 30px; height: 30px; font-size: 11px; }
.qs-media-meta { font-size: 12.5px; color: var(--qs-muted); margin-top: 10px; text-align: center; }
.qs-media-stage { position: relative; }
.qs-media-main { position: relative; display: block; width: 100%; border-radius: 12px; overflow: hidden;
                 background: var(--qs-bg-blue); aspect-ratio: 3 / 4; }
.qs-media-main img { object-fit: contain; }
.qs-media-count { position: absolute; top: 12px; right: 12px; background: rgba(14,58,83,.85); color: #fff;
                  font-size: 11.5px; padding: 4px 11px; border-radius: 20px; }

/* single / legacy cover */
.qs-media--single .qs-media-main { background: var(--qs-bg-blue); padding: 18px; }

/* rail */
.qs-media-row { display: flex; gap: 14px; align-items: stretch; }
.qs-media-rail { display: flex; flex-direction: column; gap: 9px; flex: none; }
.qs-media-thumbwrap { position: relative; display: block; }
.qs-media-thumb { position: relative; width: 58px; height: 76px; border-radius: 8px; overflow: hidden;
                  background: var(--qs-bg-blue); box-shadow: 0 0 0 1px rgba(14,58,83,.10);
                  transition: box-shadow .15s ease; }
.qs-media-thumb:hover, .qs-media-thumb.is-on { box-shadow: 0 0 0 2px var(--qs-navy); }
.qs-media-morecount { position: absolute; inset: 0; border-radius: 8px;
                      background: rgba(14,58,83,.72); color: #fff; font-size: 13px; font-weight: 700;
                      display: flex; align-items: center; justify-content: center; pointer-events: none; }
.qs-media-row .qs-media-stage { flex: 1; min-width: 0; display: flex; }
.qs-media-row .qs-media-main { aspect-ratio: auto; height: 100%; }

/* story deck */
.qs-media--story .qs-media-story { max-width: 340px; margin: 0 auto; }
.qs-media-bars { display: flex; gap: 4px; margin-bottom: 9px; }
.qs-media-bars span { flex: 1; height: 3px; border-radius: 2px; background: #CFE0EC; }
.qs-media-bars span.is-on { background: var(--qs-navy); }
.qs-media--story .qs-media-main { aspect-ratio: 4 / 5; border-radius: 16px; }
.qs-media-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
                border-radius: 50%; background: rgba(255,255,255,.92); color: var(--qs-navy);
                display: flex; align-items: center; justify-content: center; font-size: 17px;
                box-shadow: 0 2px 8px rgba(14,58,83,.2); }
.qs-media-prev { left: 8px; } .qs-media-next { right: 8px; }
.qs-media-cap { position: absolute; left: 12px; bottom: 12px; background: rgba(14,58,83,.85); color: #fff;
                font-size: 11.5px; padding: 4px 11px; border-radius: 20px; max-width: 78%;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mosaic */
.qs-media-mosaic { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: 168px; gap: 10px; }
.qs-media-hero { grid-row: span 2; position: relative; border-radius: 12px; overflow: hidden;
                 background: var(--qs-bg-blue); height: 100%; }
.qs-media-hero img { object-fit: contain; }
.qs-media-cell { position: relative; display: block; }
.qs-media-tile { position: relative; display: block; width: 100%; height: 100%; min-height: 88px;
                 border-radius: 10px; overflow: hidden; background: var(--qs-bg-blue);
                 transition: transform .15s ease; }
.qs-media-tile:hover { transform: scale(1.02); }
.qs-media button.qs-media-all { position: absolute; inset: 0; border-radius: 10px; background: rgba(10,32,46,.78);
                color: #fff; font-family: var(--qs-font); display: flex; flex-direction: column;
                align-items: center; justify-content: center; gap: 6px; }
.qs-media button.qs-media-all .fa { font-size: 17px; opacity: .9; }
.qs-media button.qs-media-all b { font-size: 13px; font-weight: 700; }
.qs-media button.qs-media-all:hover { background: rgba(10,32,46,.88); }
@media (max-width: 640px) { .qs-media-mosaic { grid-template-columns: 1fr 1fr; }
                            .qs-media-hero { grid-column: span 2; grid-row: auto; } }

/* shared lightbox */
.qs-lb { position: fixed; inset: 0; z-index: 10000; background: rgba(8,22,32,.94);
         display: flex; align-items: center; justify-content: center; font-family: var(--qs-font); }
.qs-lb[hidden] { display: none; }
.qs-lb-stage { max-width: 88vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.qs-lb-stage img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 6px; }
.qs-lb-stage iframe { width: min(88vw, 960px); aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.qs-lb-x { position: absolute; top: 16px; right: 22px; background: none; border: 0; color: #fff;
           font-size: 34px; line-height: 1; cursor: pointer; opacity: .8; }
.qs-lb-x:hover { opacity: 1; }
.qs-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
             border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff;
             font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qs-lb-nav:hover { background: rgba(255,255,255,.26); }
.qs-lb-prev { left: 20px; } .qs-lb-next { right: 20px; }
.qs-lb-bar { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center;
             gap: 14px; color: rgba(255,255,255,.8); font-size: 13px; }
@media (max-width: 640px) { .qs-lb-nav { width: 38px; height: 38px; font-size: 20px; }
                            .qs-lb-prev { left: 6px; } .qs-lb-next { right: 6px; } }

/* Videos row under the description (cards feed the shared lightbox) */
.qs-vidrow { display: flex; flex-wrap: wrap; gap: 16px; }
.qs-vidcard { width: 210px; text-align: left; font-family: var(--qs-font); }
.qs-vidcard-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
                    border-radius: 10px; overflow: hidden; background: var(--qs-bg-blue);
                    box-shadow: 0 0 0 1px rgba(14,58,83,.08); transition: transform .15s ease, box-shadow .15s ease; }
.qs-vidcard:hover .qs-vidcard-thumb { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14,58,83,.18); }
.qs-vidcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-vidcard-t { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--qs-ink);
                line-height: 1.4; }
.qs-videos-list { margin: 0 0 40px; }
.qs-yourrating { font-family: var(--qs-font); font-size: 14px; color: var(--qs-muted); }
.qs-yourrating .qs-stars { font-size: 29px; letter-spacing: 4px; line-height: 1; color: var(--qs-star); margin-left: 4px; }

/* ---- Urdu typography ----------------------------------------------------
   Nastaliq is calligraphic and sits on a steep baseline, so anywhere it may
   appear needs extra line-height or the descenders clip. Latin text in these
   same elements is unaffected (Roboto still wins for Latin glyphs). */
.book_title { line-height: 1.5; }
.qs-quote-text, .qs-bmk-quote, .qs-qpanel-quote, .qs-bq blockquote { line-height: 2; }
/* Urdu book titles keep correct RTL character order but stay LEFT-aligned so
   they line up with the LTR buy box / breadcrumb / price beneath them. */
.book_title[dir], .book_title:lang(ur) { text-align: left; }
:lang(ur), [lang="ur"] { line-height: 1.9; }

/* ---- Urdu everywhere -----------------------------------------------------
   Two problems this solves:
   1) Legacy rules say `font-family: Roboto, sans-serif` — Roboto has no Arabic
      glyphs, so Urdu dropped to an ugly system fallback. This broad, LOW
      specificity rule appends real Urdu faces to the stack. Latin is unchanged
      (Roboto still wins for Latin), and legacy Latin styling is untouched
      because Roboto stays first.
   2) Literary text (titles, book names, quotes, headings) should be Nastaliq —
      the calligraphic style Urdu readers expect — so those put Nastaliq first.
      Nastaliq only ships single weights, so never let the browser fake-bold it. */
body, p, div, span, li, td, th, a, button, label, blockquote,
h1, h2, h3, h4, h5, h6, input, textarea, select {
    font-family: "Roboto", "Noto Naskh Arabic", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Arial, sans-serif;
}
/* Literary surfaces → Nastaliq first (Latin still falls through to Roboto). */
.book_title, .book_title_roman, .qs-book-name, .qs-genre-hero-title, .qs-section-h,
.qs-quote-text, .qs-bmk-quote, .qs-qpanel-quote, .qs-bq blockquote, .qs-spot-title,
.qs-feat-title, .qs-rate-title, .qs-review-text, .qs-rb-text, .qs-current,
.qs-qp-quote h1,
.qs-ai-name, .qs-vidcard-t, .qs-highlight-title {
    /* Roboto FIRST: it has no Arabic glyphs, so Urdu falls through to Nastaliq
       while Latin stays Roboto (Nastaliq ships its own Latin, which would
       otherwise make English text look inconsistent).
       "Segoe UI"/"Urdu Typesetting" before Arial: if the webfont fails to load,
       Windows still has real Urdu shaping. Arial does not, and dropping
       straight to it is what made the quote page look worse than before the
       fonts were wired up at all. */
    font-family: "Roboto", "Noto Nastaliq Urdu", "Noto Naskh Arabic",
                 "Urdu Typesetting", "Segoe UI", Arial, sans-serif;
}
/* Nastaliq has a steep baseline + tall descenders: give it room, and never
   synthesise bold (it smears the joins). */
.book_title { line-height: 1.55; }
.qs-section-h, .qs-genre-hero-title, .qs-spot-title { line-height: 1.5; }
/* .qs-feat-title needs MORE than the others, not the same.
 *
 * It was in the 1.5 group and is the largest text of the set at 21px, which is
 * the worst pairing for Nastaliq: the script's ink runs to roughly twice its
 * declared size, so at 31.5px of leading a mixed title like "Taleem Aman,
 * Ba-Tareeq Aman / تعلیم امن بطریق امن" painted its Urdu across the Latin line
 * above it.
 *
 * Browser geometry cannot see this -- getClientRects() reports the FONT box, so
 * the lines measured as non-overlapping while visibly colliding. 2.05 is the
 * value already tuned for Nastaliq on the quote cards; same script, same
 * problem, so the same number rather than a fresh guess. */
.qs-feat-title { line-height: 2.05; }
.qs-vidcard-t, .qs-highlight-title, .qs-ai-name { line-height: 1.7; }
.qs-quote-text, .qs-bmk-quote, .qs-qpanel-quote, .qs-bq blockquote,
.qs-review-text, .qs-rb-text { line-height: 2.05; }

/* Nastaliq's glyphs rise well above the Latin cap height, so any element with
   -webkit-line-clamp + overflow:hidden shaved the top off the first line
   (Urdu book titles on the store, Urdu quote cards). Padding sits INSIDE the
   clip box, so a little head room fixes it; em keeps it proportional. */
.qs-book-name, .qs-feat-title, .qs-spot-title, .qs-rb-booktitle, .qs-book-desc,
.qs-bmk-quote, .qs-qpanel-quote, .qs-quote-text, .qs-review-text, .qs-rb-text,
.qs-hero-title, .qs-author-name, .qs-ab-name, .qs-bq blockquote, .qs-vidcard-t,
.qs-qp-quote h1 {
    padding-top: 0.3em;
}

/* Compact tile row — used automatically when a book has only 1–2 gallery items,
   so a single thumbnail never balloons to half the page. */
.qs-media-tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.qs-media-tilebig { position: relative; display: block; width: 232px; aspect-ratio: 4 / 3;
                    border-radius: 12px; overflow: hidden; background: var(--qs-bg-blue);
                    box-shadow: 0 0 0 1px rgba(14,58,83,.08); transition: transform .15s ease, box-shadow .15s ease; }
.qs-media-tilebig:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14,58,83,.18); }
@media (max-width: 560px) { .qs-media-tilebig { width: 100%; } }

/* Hero star row on the book page, measured against the Figma book frame
   (919-64554): the 5-star row is ~148 design px wide. At 20px/2px it was only
   93px — visibly undersized, which is what the owner kept flagging. */
.qs-hero-stars { font-size: 31px; letter-spacing: 4px; line-height: 1; vertical-align: -3px; }
.qs-hero-stars + .qs-reviews { font-size: 15px; vertical-align: 5px; }

/* "Featured" flag on the book's headline video inside the media gallery. */
.qs-media-featured { position: absolute; top: 8px; left: 8px; background: var(--qs-navy);
                     color: #fff; font-family: var(--qs-font); font-size: 10.5px;
                     font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                     padding: 3px 9px; border-radius: 20px; }

/* ==========================================================================
   Read-a-Sample  (sample.php + the button on book.php)
   ========================================================================== */

.qs-btn--lg { padding: 18px 34px; font-size: 18px; }

/* The button on the book page. Deliberately quieter than Add to Cart — it is
   the fallback for a reader who is not ready to buy, not a competing CTA. */
.qs-sample-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
                 width: 100%; margin-top: 10px; padding: 13px 16px;
                 background: var(--qs-bg-blue); color: var(--qs-pill-text);
                 border: 1px solid transparent; border-radius: var(--qs-radius);
                 font-family: var(--qs-font); font-size: 14.5px; font-weight: 500;
                 text-align: center; text-decoration: none; transition: background .15s ease; }
.qs-sample-btn:hover, .qs-sample-btn:focus { background: #DCE8F1; color: var(--qs-navy);
                 text-decoration: none; }

/* ---- Sample page header ---- */
.qs-smp-head { display: flex; gap: 28px; align-items: flex-start; margin: 6px 0 26px; }
.qs-smp-cover { flex: 0 0 148px; display: block; border-radius: var(--qs-radius);
                overflow: hidden; box-shadow: 0 4px 18px rgba(14,58,83,.16); }
.qs-smp-cover img { width: 100%; height: auto; display: block; }
.qs-smp-meta { flex: 1 1 auto; min-width: 0; }
.qs-smp-tag { display: inline-flex; align-items: center; gap: 7px; background: var(--qs-bg-blue);
              color: var(--qs-pill-text); font-size: 12.5px; font-weight: 500;
              padding: 5px 13px; border-radius: 20px; }
.qs-smp-meta h1 { font-size: 30px; font-weight: 800 !important; color: var(--qs-ink);
                  line-height: 1.3; margin: 12px 0 4px; padding-top: .12em; }
.qs-smp-meta h1[dir="rtl"] { font-family: var(--qs-font-urdu); line-height: 1.7;
                             padding-top: .3em; }
.qs-smp-by { font-size: 15.5px; color: var(--qs-muted); margin: 0 0 12px; }
.qs-smp-by a { color: var(--qs-blue); text-decoration: none; }
.qs-smp-by a:hover { text-decoration: underline; }
.qs-smp-note { font-size: 14.5px; color: var(--qs-ink-2); line-height: 1.65; margin: 0 0 16px;
               max-width: 56ch; }
.qs-smp-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- How far in the sample goes ---- */
.qs-smp-progress { height: 6px; background: var(--qs-bg-blue); border-radius: 20px;
                   overflow: hidden; }
.qs-smp-progress span { display: block; height: 100%; background: var(--qs-navy);
                        border-radius: 20px; }
.qs-smp-progress-lbl { font-size: 12.5px; color: var(--qs-muted); margin: 7px 0 22px; }

/* ---- The excerpt itself ---- */
.qs-smp-body { position: relative; max-width: 720px; margin: 0 auto;
               font-family: var(--qs-font); font-size: 17.5px; line-height: 1.85;
               color: var(--qs-ink-2); padding-bottom: 90px; }
.qs-smp-body.is-urdu { font-family: var(--qs-font-urdu); font-size: 19px; line-height: 2.4;
                       text-align: right; }
.qs-smp-body p { margin: 0 0 1.15em; }
.qs-smp-body img { max-width: 100%; height: auto; }
.qs-smp-body table { max-width: 100%; }
.qs-smp-body h1, .qs-smp-body h2, .qs-smp-body h3, .qs-smp-body h4 {
    color: var(--qs-ink); font-weight: 700 !important; line-height: 1.4; margin: 1.6em 0 .6em; }
/* The excerpt stops on a hard cut, so ease the last screen out rather than
   letting the text end abruptly against the paywall card. */
.qs-smp-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
               pointer-events: none;
               background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 88%); }

/* ---- Paywall card ---- */
.qs-smp-wall { max-width: 720px; margin: 0 auto 46px; padding: 34px 30px; text-align: center;
               background: var(--qs-bg-blue); border-radius: var(--qs-radius-card); }
.qs-smp-wall-icn { font-size: 30px; color: var(--qs-navy); }
.qs-smp-wall h2 { font-size: 24px; font-weight: 700 !important; color: var(--qs-ink);
                  margin: 12px 0 8px; }
.qs-smp-wall > p { font-size: 15px; color: var(--qs-ink-2); line-height: 1.7; margin: 0 auto 20px;
                   max-width: 46ch; }
/* display:table so the list shrink-wraps its content and still centres via auto
   margins — inline-block would let the buy button flow up alongside it. */
.qs-smp-perks { list-style: none; padding: 0; margin: 0 auto 24px; display: table;
                text-align: left; }
.qs-smp-perks li { font-size: 14.5px; color: var(--qs-pill-text); margin-bottom: 9px; }
.qs-smp-perks li i { color: var(--qs-navy); width: 20px; }
.qs-smp-wall-alt { margin: 16px 0 0; font-size: 14px; }
.qs-smp-wall-alt a { color: var(--qs-blue); text-decoration: underline; }

/* ---- Sticky buy bar ---- */
.qs-smp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
              background: #fff; border-top: 1px solid var(--qs-line);
              box-shadow: 0 -3px 14px rgba(14,58,83,.09);
              padding: 10px 0; transform: translateY(110%); transition: transform .2s ease; }
.qs-smp-bar.is-on { transform: translateY(0); }
.qs-smp-bar .container { display: flex; align-items: center; gap: 16px;
                         justify-content: space-between; }
.qs-smp-bar-t { font-family: var(--qs-font); font-size: 15px; font-weight: 500;
                color: var(--qs-ink); overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }

@media (max-width: 767px) {
    .qs-smp-head { flex-direction: column; gap: 18px; }
    .qs-smp-cover { flex: 0 0 auto; width: 128px; }
    .qs-smp-meta h1 { font-size: 24px; }
    .qs-smp-cta .qs-btn { flex: 1 1 100%; }
    .qs-smp-body { font-size: 16.5px; }
    .qs-smp-wall { padding: 26px 18px; }
    .qs-smp-bar-t { max-width: 46%; }
}

/* Bottom breathing room for pages whose last element would otherwise sit flush
   against the footer (the contact form did exactly that). */
.qs-page { padding-bottom: 56px; }

/* ==========================================================================
   Long-form prose — the policy pages.

   These were Word "Save as HTML" dumps: 640 inline font-size declarations
   across terms.php alone, in a mix of 11pt, 12pt and 7pt, which is why the
   page read as several documents stapled together. tools/clean_policy_html.php
   removed every one of them (verifying the text was unchanged first), so the
   type scale below is now the ONLY thing setting size on these pages.

   That is the point: one scale, three levels, no exceptions. Nothing here uses
   !important, because nothing is fighting anything any more.
   ========================================================================== */

/* Reading measure. The 1040 column alone still left these at ~129 characters a
   line; comfortable is 45-75. `ch` rather than px so it holds if type changes. */
.qs-prose { max-width: 68ch; margin-left: auto; margin-right: auto;
            font-size: 16.5px; line-height: 1.75; color: #333; }

/* In CSS, not inline on each page: tools/clean_policy_html.php strips style
   attributes out of the two Word-derived pages, so an inline value here would
   survive on three policy pages and vanish from the other two. */
.qs-prose .qs-breadcrumb { padding: 14px 0 0; }

.qs-prose h2 {
    font-size: 23px;
    font-weight: 700;
    color: #0E3A53;
    margin: 46px 0 14px;
    line-height: 1.3;
}
.qs-prose h2:first-of-type { margin-top: 26px; }

/* Sub-points within a section. Smaller than h2 and set apart by weight rather
   than by another size step, so the hierarchy stays legible at three levels. */
.qs-prose h3 {
    font-size: 17.5px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 30px 0 8px;
    line-height: 1.4;
}

.qs-prose p { margin: 0 0 18px; }

/* The opening paragraph. One size up, in the body colour rather than navy, so
   it reads as a lead rather than as another heading. */
.qs-prose .qs-lede { font-size: 18.5px; line-height: 1.7; color: #4a5b68; margin-bottom: 30px; }

/* The sign-off at the foot of a policy page. Reads like the lede so the page
   opens and closes in the same voice, but it is a separate class because a page
   with two ledes has two openings. */
.qs-prose .qs-prose-close {
    font-size: 17.5px; line-height: 1.7; color: #4a5b68;
    margin-top: 38px; padding-top: 24px; border-top: 1px solid #e6e6e6;
}

.qs-prose ul, .qs-prose ol { margin: 0 0 20px; padding-left: 22px; }
.qs-prose li { margin-bottom: 9px; }
.qs-prose li:last-child { margin-bottom: 0; }
.qs-prose ul ul, .qs-prose ol ol { margin-top: 9px; margin-bottom: 0; }

/* Clause lists on the legal pages — "(i) ... (ii) ... (iii) ...".
   Word exported these as plain paragraphs; tools/policy_lists.php made them
   lists and left the markers in the text, because a clause cited elsewhere as
   "(vii)" has to still read "(vii)". So the bullet is off and the indent is a
   hanging one: the marker sits in the gutter and wrapped lines align under the
   first word rather than under the bracket. */
.qs-prose .qs-legal-list { list-style: none; padding-left: 0; margin: 0 0 22px; }
.qs-prose .qs-legal-list > li {
    padding-left: 2.6em;
    text-indent: -2.6em;
    margin-bottom: 11px;
}

/* A passage the reader must not skim past. Used for the "read these terms
   before using Daastan" opener — the navy rule does the work a bolded
   all-caps paragraph was doing badly. */
.qs-prose blockquote, .qs-prose .qs-callout {
    margin: 26px 0; padding: 16px 20px;
    background: #EAF1F6; border-left: 4px solid #0E3A53; border-radius: 0 8px 8px 0;
    color: #0E3A53; font-size: 16.5px; line-height: 1.7;
}
.qs-prose blockquote p:last-child, .qs-prose .qs-callout p:last-child { margin-bottom: 0; }
.qs-prose blockquote strong, .qs-prose .qs-callout strong { color: #0E3A53; }

/* Bold is for the phrase a skimmer should catch. Near-black rather than navy,
   which was the first attempt: terms.php has 155 bold runs — defined-term
   labels like "Intellectual Property Rights:" — and 155 navy phrases down a
   long page reads as noise competing with the headings. Counted before
   choosing; none of them is a bolded paragraph, so the weight alone is enough
   and the colour is left to carry the hierarchy. */
.qs-prose strong, .qs-prose b { font-weight: 700; color: #1a1a1a; }

.qs-prose a { color: #2F6FA6; text-decoration: underline; text-underline-offset: 2px; }
.qs-prose a:hover { color: #0E3A53; }

.qs-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15.5px; }
.qs-prose th, .qs-prose td { border: 1px solid #e6e6e6; padding: 9px 12px; text-align: left; }
.qs-prose th { background: #EAF1F6; color: #0E3A53; font-weight: 700; }

.qs-prose hr { border: 0; border-top: 1px solid #e6e6e6; margin: 34px 0; }

.qs-prose .qs-legal-num { color: #2F6FA6; }

@media (max-width: 767px) {
    .qs-prose { font-size: 16px; }
    .qs-prose h2 { font-size: 20px; margin-top: 36px; }
    .qs-prose h3 { font-size: 16.5px; }
    .qs-prose .qs-lede { font-size: 17px; }
}

/* The bookstore's page title. The design has no headline band, so this is
   deliberately quiet -- it exists because the page had no <h1> at all and the
   first heading a crawler met was a featured book's name. */
.qs-store-h1 {
    font-size: 26px;
    font-weight: 700;
    color: #0E3A53;
    margin: 0 0 18px;
    line-height: 1.2;
}
@media (max-width: 767px) { .qs-store-h1 { font-size: 21px; } }

/* The store <h1> and the city-shelf dropdown share a row. The h1 keeps its own
   bottom margin, so the row zeroes it and carries the spacing itself -- two
   margins here left the button floating below the baseline. */
.qs-store-h1row { display: flex; align-items: center; justify-content: space-between;
                  flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.qs-store-h1row .qs-store-h1 { margin: 0; }

.qs-citydrop { position: relative; }
.qs-citydrop-btn {
    background: #fff; border: 1px solid #d7dee5; color: #0E3A53;
    font-family: var(--qs-font); font-size: 14px; font-weight: 600;
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; line-height: 1;
    transition: border-color .15s, background .15s;
}
.qs-citydrop-btn:hover { border-color: #2F6FA6; background: #f4f8fb; }
.qs-citydrop-btn .fa { transition: transform .15s; }
.qs-citydrop-btn[aria-expanded="true"] { border-color: #2F6FA6; background: #f4f8fb; }
.qs-citydrop-btn[aria-expanded="true"] .fa { transform: rotate(180deg); }

.qs-citydrop-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    min-width: 230px; background: #fff; border: 1px solid #e2e8ee;
    border-radius: 10px; box-shadow: 0 8px 26px rgba(14,58,83,.13);
    padding: 6px; display: none;
}
.qs-citydrop-menu.is-open { display: block; }
.qs-citydrop-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 12px; border-radius: 7px; color: #0E3A53;
    font-size: 14.5px; text-decoration: none;
}
.qs-citydrop-menu a:hover { background: #f4f8fb; color: #2F6FA6; text-decoration: none; }
.qs-citydrop-menu a em { font-style: normal; color: #8a97a3; font-size: 12.5px; }

@media (max-width: 767px) {
    .qs-store-h1row { align-items: flex-start; }
    /* Right-anchored on desktop where the button sits at the right edge; on a
       narrow screen the button wraps to the left, so the menu follows it. */
    .qs-citydrop-menu { right: auto; left: 0; }
}

/* The legal pages' own <h1>. The global h1 rule is sized for hero banners and
   rendered "Terms of Use" at ~64px above 15px body copy. */
.qs-prose h1 { font-size: 34px; line-height: 1.15; margin: 0 0 18px; color: #0E3A53; }
@media (max-width: 767px) { .qs-prose h1 { font-size: 26px; } }

/* Word wrote text-align:justify inline on every paragraph, which at a 68ch
   measure with no hyphenation opens rivers of white space down the column. The
   inline styles are gone now (tools/clean_policy_html.php), so this no longer
   needs !important -- it is simply the setting. */
.qs-prose p, .qs-prose li, .qs-prose div { text-align: left; }

/* Sidebar heading on the quotes page. It was an <h3> sitting directly under the
   <h1>, i.e. a skipped level; it is an <h2> now and this keeps it looking the
   same size as before rather than inheriting the larger h2 scale. */
.qs-side-h { font-size: 17px; font-weight: 700; color: #0E3A53; margin: 0 0 12px; }

/* ==========================================================================
   Genre pagination — the crawlable list of every book in a genre.

   Pagination on the genre listing. It replaced a per-visit shuffle capped at
   16 behind a JavaScript "Load More", which left 321 of 669 published books
   with no link pointing at them.
   ========================================================================== */

/* Pager */
.qs-arch-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 34px 0 10px;
}
.qs-arch-num {
    display: inline-block;
    min-width: 36px;
    padding: 7px 10px;
    text-align: center;
    border: 1px solid #d7e0e7;
    border-radius: 6px;
    color: #2F6FA6;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
}
.qs-arch-num:hover, .qs-arch-num:focus { background: #EAF1F6; color: #0E3A53; text-decoration: none; }
.qs-arch-num.is-current {
    background: #0E3A53;
    border-color: #0E3A53;
    color: #fff;
    cursor: default;
}
.qs-arch-gap { padding: 0 2px; color: #9bacb8; }
.qs-arch-pager .qs-btn { margin: 0 4px; }


/* "You are here" in the Explore-other-genres grid. The current genre is sorted
   last and marked rather than hidden: dropping it would make the grid reflow
   between pages, and the count is still worth showing. */
.qs-genre-banner.is-current { outline: 2px solid #2F6FA6; outline-offset: -2px; opacity: .75; }
.qs-genre-banner.is-current .qs-genre-label { color: #2F6FA6; }

/* ==========================================================================
   "You already started this order" prompt.

   Shown on the book page and in the cart when the buyer has an unpaid order
   for the same book. Amber rather than red: it is not an error, it is a
   shortcut that saves them paying twice.
   ========================================================================== */
.qs-resume-note {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FDF1E3;
    border: 1px solid #F0D9BC;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 18px;
}
.qs-resume-ico { font-size: 20px; color: #B4690E; flex: none; }
.qs-resume-body { flex: 1; min-width: 0; }
.qs-resume-body strong { display: block; color: #8A5109; font-size: 14.5px; margin-bottom: 2px; }
.qs-resume-body span { display: block; color: #8A5109; font-size: 13px; opacity: .9; line-height: 1.45; }
.qs-resume-note .qs-btn { flex: none; }
@media (max-width: 600px) {
    .qs-resume-note { flex-wrap: wrap; }
    .qs-resume-note .qs-btn { width: 100%; justify-content: center; }
}

/* --- rate.php: what the stars mean ---------------------------------------- */
/* Stars alone never say which end of the scale is good — a reader can just as
   easily read five as "took the most effort". The chosen rating is spelled out
   in words. All five lines are in the HTML so the meaning is available without
   JavaScript; the script hides all but the selected one. */
.qs-rate-word {
    margin: 6px 0 18px;
    font-size: 14px;
    color: var(--qs-ink-2, #5A7385);
    text-align: center;
    min-height: 21px;
}
.qs-rate-word span { display: block; }
.qs-rate-word.is-set span { font-weight: 600; color: var(--qs-navy, #0E3A53); }

/* --- rate-from-the-hero --------------------------------------------------- */
/* "No ratings yet" was dead text sitting exactly where a rating control
   belongs. Five grey stars that colour under the pointer say the same thing and
   invite the click — the control is the message. The label is not decoration:
   an empty star row on its own reads as a SCORE of zero rather than an
   invitation, which is the opposite of what it is for. */
.qs-hero-rate { display: inline-flex; align-items: center; gap: 10px; }
.qs-hero-rate-stars { display: inline-flex; }
.qs-hero-rate-s {
    font-size: 26px; line-height: 1; text-decoration: none;
    color: #D6DEE4; padding: 0 1px;
    transition: color .1s, transform .1s;
}
.qs-hero-rate-s:hover, .qs-hero-rate-s:focus-visible { transform: scale(1.12); }
/* Hovering a star fills it AND everything before it — a 4-star hover has to
   look like four stars, not one. Done with a sibling selector rather than
   script so it works before any JS runs. */
.qs-hero-rate-stars:hover .qs-hero-rate-s { color: var(--qs-star, #E8A33D); }
.qs-hero-rate-s:hover ~ .qs-hero-rate-s { color: #D6DEE4; }
.qs-hero-rate-label { font-size: 14px; color: var(--qs-muted, #6B7C88); }
.qs-hero-rate-stars:hover + .qs-hero-rate-label { color: var(--qs-navy, #0E3A53); }

/* "Add yours" beside an existing average. */
.qs-rate-inline {
    margin-left: 10px; font-size: 13.5px; font-weight: 600;
    color: var(--qs-blue, #2F6FA6); text-decoration: none;
}
.qs-rate-inline:hover { text-decoration: underline; }

/* Replaces the price on a format the reader already owns. */
.qs-owned {
    display: inline-block; font-size: 20px; font-weight: 700;
    color: #1F8A54;
}

/* ─────────────────────────────────────────────────────────────────────────
   Service pages (/service/book-publishing, -printing, -marketing)

   Magazine layout, not a sidebar. The first version put a navy CTA rail beside
   navy headings — so the button was navy-on-navy and invisible — and left a
   column of dead space beneath it once the copy ran past the rail. The CTA is
   a full-width band now and every white-on-navy control uses .qs-btn--white.
   ───────────────────────────────────────────────────────────────────────── */
/* Full-bleed, like the home page hero — no radius, no side margin, and the
   text held to the container measure by an inner .container rather than by
   padding on the panel itself. */
.qs-svc-hero { background: #0E3A53; background-size: cover;
               background-position: center; padding: 76px 0 96px; margin: 0 0 46px; }
.qs-svc-hero-in { max-width: 620px; }
.qs-svc-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
                  text-transform: uppercase; color: #9fc6e3; margin-bottom: 14px; }
.qs-svc-hero h1 { font-size: 40px; font-weight: 800; color: #fff; line-height: 1.15; margin: 0 0 16px; }
.qs-svc-hero p  { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.86); margin: 0 0 26px; }

.qs-svc-block { margin-bottom: 52px; }
.qs-svc-h2 { font-size: 26px; font-weight: 800; color: #0E3A53; margin: 0 0 22px; line-height: 1.25; }

/* Two columns: seven short lines read as a scannable block rather than a long
   ladder down the left edge. */
.qs-svc-list { list-style: none; margin: 0; padding: 0;
               display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 36px; }
.qs-svc-list li { display: flex; gap: 12px; align-items: flex-start;
                  font-size: 15.5px; line-height: 1.6; color: #40515e; }
.qs-svc-list .fa { color: #1D9E75; font-size: 13px; margin-top: 5px; flex: 0 0 auto; }

.qs-svc-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 52px; }
.qs-svc-shots figure { margin: 0; }
.qs-svc-shots img { width: 100%; height: 210px; object-fit: cover; border-radius: 12px; display: block; }
.qs-svc-shots figcaption { font-size: 13.5px; color: #7a8996; margin-top: 9px; line-height: 1.5; }

/* Three across: the process reads as a path rather than a queue. */
.qs-svc-steps { list-style: none; margin: 0; padding: 0;
                display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 30px; }
.qs-svc-steps li { position: relative; }
.qs-svc-stepn { display: flex; align-items: center; justify-content: center;
                width: 34px; height: 34px; border-radius: 50%; background: #0E3A53; color: #fff;
                font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.qs-svc-steps h3 { font-size: 16.5px; font-weight: 700; color: #0E3A53; margin: 0 0 6px; }
.qs-svc-steps p  { font-size: 14.5px; line-height: 1.7; color: #5a6b78; margin: 0; }

.qs-svc-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qs-svc-wcard { background: #F5F8FA; border-radius: 12px; padding: 24px; }
.qs-svc-wcard h3 { font-size: 17px; font-weight: 700; color: #0E3A53; margin: 0 0 9px; }
.qs-svc-wcard p  { font-size: 14.5px; line-height: 1.7; color: #5a6b78; margin: 0; }

.qs-svc-cta { background: #0E3A53; border-radius: 16px; padding: 38px 44px; margin-bottom: 52px;
              display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; align-items: center; }
.qs-svc-cta h2 { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.25; }
.qs-svc-cta p  { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0; }
.qs-svc-cta-side .qs-btn { width: 100%; text-align: center; }
.qs-svc-contact { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16);
                  display: grid; gap: 9px; }
.qs-svc-contact a, .qs-svc-contact span { color: rgba(255,255,255,.85); font-size: 13.5px;
                  text-decoration: none; display: flex; gap: 9px; align-items: center; }
.qs-svc-contact a:hover { color: #fff; text-decoration: underline; }
.qs-svc-contact .fa { width: 15px; text-align: center; opacity: .7; }

.qs-svc-faq details { border-bottom: 1px solid #e6ebef; }
.qs-svc-faq summary { cursor: pointer; padding: 16px 34px 16px 0; font-size: 16px; font-weight: 600;
                      color: #0E3A53; list-style: none; position: relative; }
.qs-svc-faq summary::-webkit-details-marker { display: none; }
.qs-svc-faq summary::after { content: "\f107"; font-family: FontAwesome; position: absolute;
                             right: 6px; top: 16px; color: #93a3b0; transition: transform .15s; }
.qs-svc-faq details[open] summary::after { transform: rotate(180deg); }
.qs-svc-faq p { font-size: 15px; line-height: 1.75; color: #5a6b78; margin: 0 0 18px; padding-right: 34px; }

.qs-svc-also { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.qs-svc-acard { position: relative; display: block; overflow: hidden; border-radius: 12px;
                padding: 26px; text-decoration: none; background: #0E3A53; min-height: 172px; }
.qs-svc-abg { position: absolute; inset: 0; background-size: cover; background-position: center;
              opacity: .3; transition: opacity .2s, transform .3s; }
.qs-svc-acard > div { position: relative; }
.qs-svc-acard:hover { text-decoration: none; }
.qs-svc-acard:hover .qs-svc-abg { opacity: .42; transform: scale(1.04); }
.qs-svc-acard h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.qs-svc-acard p  { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0 0 12px; }
.qs-svc-acard span { font-size: 14px; font-weight: 700; color: #9fc6e3; }

@media (max-width: 900px) {
  .qs-svc-hero { padding: 44px 0 60px; }
  .qs-svc-hero h1 { font-size: 28px; }
  .qs-svc-list, .qs-svc-shots, .qs-svc-steps, .qs-svc-why, .qs-svc-also { grid-template-columns: 1fr; }
  .qs-svc-cta { grid-template-columns: 1fr; padding: 30px 24px; gap: 24px; }
  .qs-svc-shots img { height: 190px; }
}

/* Folder-driven service gallery (marketing posters, author photographs).
   Square-ish tiles so portrait phone shots and square posters sit together
   without one format dictating the row height. */
.qs-svc-note { font-size: 15.5px; line-height: 1.7; color: #5a6b78; margin: -8px 0 22px; max-width: 720px; }
.qs-svc-gal { display: grid; gap: 16px; }
.qs-svc-gal figure { margin: 0; border-radius: 12px; overflow: hidden; background: #EDF1F4; }
/* height:auto is load-bearing. The width/height ATTRIBUTES were added to stop
   layout shift, but a bare height attribute acts as a presentational hint —
   so the tiles rendered 750px and 1000px tall instead of following their
   aspect-ratio. The attributes still give the browser the ratio it needs to
   reserve the box; this stops them dictating the final size. */
.qs-svc-gal img { width: 100%; height: auto; object-fit: cover; display: block;
                  transition: transform .3s; }
.qs-svc-gal figure:hover img { transform: scale(1.04); }
@media (max-width: 520px) { .qs-svc-gal { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Tile shape is per gallery, because the collections are different shapes and
   a single ratio crops one of them badly. Launch photographs are landscape
   group shots and a 4:5 tile beheads them; the campaign posters are 4:5
   portrait and a 3:2 tile cut the titles off their own artwork. */
.qs-svc-gal--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.qs-svc-gal--wide img { aspect-ratio: 3 / 2; }
.qs-svc-gal--tall { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.qs-svc-gal--tall img { aspect-ratio: 4 / 5; }

/* Proof numbers under the service hero — the blue band from the home page.
   Same fill, same 48px figure over a 12px uppercase label, same hairline
   separators. It overlaps the hero by 40px rather than the home page's 79px
   because the service hero is a shorter panel and a deeper bite would eat
   the call-to-action button. */
/* -86px, not -40px: the hero already carries a 46px bottom margin, so a -40px
   pull only closed the gap and left the band sitting 6px BELOW the panel
   instead of biting into it. 46 + 40 = the 40px overlap that was intended. */
.qs-svc-statswrap { position: relative; z-index: 5; margin: -86px 0 46px; padding: 0 15px; }
.qs-svc-stats {
    /* max-width is what makes this read as a card floating ON the hero rather
       than a strip welded to the bottom of it. Without it the band matched the
       hero edge for edge and the two merged into one shape — which is exactly
       how the first attempt looked wrong next to the home page. 944px is the
       home band's width, so the two are the same object on both pages. */
    max-width: 944px; margin: 0 auto;
    background: #2B62B3; border-radius: 8px; padding: 24px 32px;
    display: flex; align-items: center; justify-content: center; gap: 40px;
    box-shadow: 0 8px 26px rgba(11,45,84,.22);
}
.qs-svc-stats-c { flex: 0 0 auto; min-width: 160px; text-align: center; }
.qs-svc-stats-c strong { display: block; white-space: nowrap; font-size: 48px; line-height: 60px;
                         font-weight: 700; letter-spacing: -.02em; color: #fff; }
.qs-svc-stats-c span   { display: block; margin-top: 26px; font-size: 12px; line-height: 1;
                         font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: #FEFEFE; }
.qs-svc-stats-sep { flex: 0 0 auto; width: 0; height: 68px; border-left: .5px solid #FEFEFE; }

@media (max-width: 991px) {
    .qs-svc-stats { gap: 24px; padding: 22px 20px; }
    .qs-svc-stats-c { flex: 0 0 130px; min-width: 0; }
    .qs-svc-stats-c strong { font-size: 38px; line-height: 46px; }
    .qs-svc-stats-c span { margin-top: 16px; }
}
@media (max-width: 767px) {
    /* Too tight to overlap on a phone, same as the home page band. */
    .qs-svc-statswrap { margin-top: 18px; }
    .qs-svc-stats { flex-wrap: wrap; gap: 22px 0; padding: 22px 12px; }
    /* flex-basis 44%, not 50%. At 375px the content box is 321px and 50% rounds
       up to 161px a cell — two of those are 322px, one pixel over, so all four
       wrapped to a row each. A basis under half with grow lets exactly two sit
       per row and share the remainder evenly. */
    .qs-svc-stats-c { flex: 1 1 44%; max-width: 50%; }
    .qs-svc-stats-c strong { font-size: 30px; line-height: 38px; }
    .qs-svc-stats-c span { margin-top: 8px; font-size: 11px; }
    .qs-svc-stats-sep { display: none; }
}

/* The problem section. Narrower measure and a rule down the left so it reads as
   a held breath before the pitch rather than more of the same. */
.qs-svc-problem { max-width: 760px; border-left: 3px solid #E3B23C; padding-left: 26px; }
.qs-svc-problem p { font-size: 16.5px; line-height: 1.8; color: #40515e; margin: 0 0 16px; }
.qs-svc-problem p:last-child { margin-bottom: 0; }

/* The offer stack: heading per line plus what it means. Two columns, because a
   seven-item ladder down the left edge reads as a list nobody finishes. */
.qs-svc-stack { list-style: none; margin: 0; padding: 0;
                display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 36px; }
.qs-svc-stack li { display: flex; gap: 13px; align-items: flex-start; }
.qs-svc-stack .fa { color: #1D9E75; font-size: 13px; margin-top: 6px; flex: 0 0 auto; }
.qs-svc-stack b { display: block; font-size: 16px; font-weight: 700; color: #0E3A53;
                  line-height: 1.4; margin-bottom: 4px; }
.qs-svc-stack span { display: block; font-size: 14.5px; line-height: 1.7; color: #5a6b78; }

.qs-svc-why--guarantee .qs-svc-wcard { background: #eef8f3; }
.qs-svc-why--guarantee .fa { color: #1D9E75; font-size: 20px; margin-bottom: 10px; display: block; }

@media (max-width: 900px) {
  /* The two .qs-svc-stats rules that lived here were left behind when the
     stats became the blue home-page band: they still set a grid template on
     what is now a flex row, and a 12px column gap that pushed two 50% cells
     over the width so all four stacked one per row. They also targeted <b>,
     which the markup no longer uses. Removed rather than corrected — the
     band carries its own responsive rules further up. */
  .qs-svc-stack { grid-template-columns: 1fr; gap: 18px; }
  .qs-svc-problem { padding-left: 18px; }
  .qs-svc-problem p { font-size: 15.5px; }
}

/* An explicit `cols` on a gallery is a desktop instruction only — below this
   width three portrait tiles would be three slivers, so the responsive rules
   take back over. */
@media (max-width: 700px) {
  .qs-svc-gal[style] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Why-card icons. Same weight and rhythm as the guarantee cards above them, so
   the two rows read as one family rather than two different components — the
   only difference is colour, which carries the meaning: green for a promise
   we are making, navy for a statement of fact. */
.qs-svc-wcard > .fa { display: block; font-size: 22px; color: #2F6FA6; margin-bottom: 12px; line-height: 1; }
.qs-svc-why--guarantee .qs-svc-wcard > .fa { color: #1D9E75; font-size: 20px; margin-bottom: 10px; }

/* ============================================================================
   OUR STORY  (/our-story)
   A trust page, so the visual job is different from a sales page: nothing here
   should look designed enough to feel staged. Left-rail timeline rather than
   the usual alternating-sides treatment — with ~28 entries, alternating forces
   the eye across the page 28 times and halves the width available to each card.
   ========================================================================== */

.qs-story-hero { background: #0E3A53; padding: 78px 0 100px; margin: 0 0 46px; color: #fff;
                 background-image: linear-gradient(135deg, rgba(14,58,83,.97), rgba(14,58,83,.82)),
                                   url('../../images/launches/03-author-reading-to-a-full-room.jpg');
                 background-size: cover; background-position: center 32%; }
.qs-story-hero-in { max-width: 760px; }
.qs-story-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .16em;
                    text-transform: uppercase; font-weight: 700; color: #9EC7E8;
                    border: 1px solid rgba(158,199,232,.4); border-radius: 40px;
                    padding: 6px 16px; margin-bottom: 20px; }
.qs-story-hero-in h1 { font-size: 44px; line-height: 1.16; font-weight: 800; color: #fff; margin: 0 0 20px; }
.qs-story-hero-in p { font-size: 18px; line-height: 1.66; color: rgba(255,255,255,.9); margin: 0 0 28px; max-width: 640px; }
.qs-story-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.qs-story-intro { max-width: 780px; margin: 8px 0 54px; }
.qs-story-intro p { font-size: 17px; line-height: 1.75; color: #40515C; margin: 0 0 16px; }

/* --- the rail ------------------------------------------------------------ */
/* Capped and left-aligned, not centred: it has to share a left edge with the
   h2 above it. Without the cap the cards run the full 1074px of the container,
   which is around 150 characters a line — roughly twice a readable measure, on
   the one page where we are asking a sceptic to actually read.
   740px is worked backwards from the text, not picked to look right: minus the
   66px rail and 48px of card padding it leaves a ~626px paragraph, which at
   16px is about 80 characters. */
.qs-tl { position: relative; padding: 8px 0 10px 0; margin: 0 0 60px; max-width: 740px; }
/* The spine. Drawn on the list, not on each item, so it stays unbroken across
   the year markers instead of restarting under every one. */
.qs-tl::before { content: ''; position: absolute; left: 21px; top: 6px; bottom: 6px;
                 width: 2px; background: linear-gradient(180deg, #DCE7F0 0%, #DCE7F0 96%, transparent 100%); }

.qs-tl-year { position: relative; padding: 30px 0 14px 66px; }
.qs-tl-year:first-child { padding-top: 4px; }
.qs-tl-yearlabel { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em;
                   text-transform: uppercase; color: #0E3A53; background: #EAF1F7;
                   border-radius: 30px; padding: 7px 18px; }

.qs-tl-item { position: relative; padding: 0 0 26px 66px; }
.qs-tl-node { position: absolute; left: 0; top: 2px; width: 44px; height: 44px; border-radius: 50%;
              background: #fff; border: 2px solid #DCE7F0; display: flex; align-items: center;
              justify-content: center; color: #2F6FA6; font-size: 17px; z-index: 2; }
/* Entries flagged 'key' in bin/timeline.php — the handful a sceptical reader
   should not be able to scroll past. Filled node, tinted card, nothing louder. */
.qs-tl-item--key .qs-tl-node { background: #2F6FA6; border-color: #2F6FA6; color: #fff; }
.qs-tl-item--key .qs-tl-card { border-color: #C6DCEE; background: #F7FBFE; }

.qs-tl-card { border: 1px solid #E4EBF1; border-radius: 10px; background: #fff; padding: 20px 24px 18px; }
.qs-tl-date { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
              text-transform: uppercase; color: #7C8B96; margin-bottom: 6px; }
.qs-tl-card h3 { font-size: 20px; font-weight: 800; color: #0E3A53; margin: 0 0 10px; line-height: 1.3; }
.qs-tl-card > p { font-size: 16px; line-height: 1.72; color: #40515C; margin: 0; }
.qs-tl-card em { font-style: italic; }

.qs-tl-figs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qs-tl-fig { font-size: 13px; font-weight: 700; color: #0E3A53; background: #EAF1F7;
             border-radius: 6px; padding: 6px 12px; }

/* Live counters inside the closing entry. Same idea as the band at the top of
   the page, but inline and quieter — it is evidence here, not a headline. */
.qs-tl-live { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.qs-tl-live > div { flex: 1 1 120px; background: #0E3A53; border-radius: 8px; padding: 14px 16px; }
.qs-tl-live strong { display: block; font-size: 30px; line-height: 1.1; font-weight: 800; color: #fff; }
.qs-tl-live span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35;
                   text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.8); }

.qs-tl-fig-img { margin: 18px 0 0; }
/* height:auto is load-bearing. The width/height attributes on the <img> are
   there to reserve space and stop layout shift, but without this the bare
   height attribute acts as a presentational hint and renders the photo at its
   full intrinsic pixel height. */
.qs-tl-fig-img img { width: 100%; height: auto; display: block; border-radius: 8px;
                     aspect-ratio: 3 / 2; object-fit: cover; }
.qs-tl-fig-img figcaption { font-size: 13px; line-height: 1.55; color: #7C8B96; margin-top: 8px; }
/* Book covers: portrait artwork we produced ourselves, so it gets shown whole.
   aspect-ratio has to be cleared explicitly — the rule above sets 3/2, and a
   cover forced into that loses the title off the top. */
.qs-tl-fig-img--cover { display: flex; gap: 16px; align-items: flex-start; }
.qs-tl-fig-img--cover img { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 150px;
                            border: 1px solid #E4EBF1; box-shadow: 0 3px 12px rgba(11,45,84,.12); }
.qs-tl-fig-img--cover figcaption { margin-top: 0; align-self: center; }
@media (max-width: 767px) {
    .qs-tl-fig-img--cover { display: block; }
    .qs-tl-fig-img--cover img { max-width: 120px; }
    .qs-tl-fig-img--cover figcaption { margin-top: 10px; }
}

.qs-tl-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px;
             padding-top: 14px; border-top: 1px solid #EEF3F7; }
.qs-tl-src > span { font-size: 11px; font-weight: 700; letter-spacing: .1em;
                    text-transform: uppercase; color: #9AA8B2; }
.qs-tl-src a { font-size: 13px; color: #2F6FA6; text-decoration: none;
               border-bottom: 1px solid rgba(47,111,166,.35); }
.qs-tl-src a:hover { color: #0E3A53; border-bottom-color: #0E3A53; }

/* --- press --------------------------------------------------------------- */
.qs-story-press { margin: 0 0 56px; }
.qs-story-presslist { display: flex; flex-wrap: wrap; gap: 10px; }
.qs-story-presslist a { font-size: 15px; font-weight: 600; color: #0E3A53; background: #fff;
                        border: 1px solid #E4EBF1; border-radius: 8px; padding: 12px 20px;
                        text-decoration: none; }
.qs-story-presslist a:hover { border-color: #2F6FA6; color: #2F6FA6; }
.qs-story-pressnote { font-size: 14px; color: #7C8B96; margin: 14px 0 0; max-width: 640px; }

/* --- close --------------------------------------------------------------- */
.qs-story-cta { background: #0E3A53; border-radius: 12px; padding: 46px 44px; margin: 0 0 56px; }
.qs-story-cta h2 { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 14px; line-height: 1.25; }
.qs-story-cta p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.86); margin: 0 0 26px; max-width: 660px; }
.qs-story-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 767px) {
    .qs-story-hero { padding: 54px 0 92px; }
    .qs-story-hero-in h1 { font-size: 30px; }
    .qs-story-hero-in p { font-size: 16px; }
    .qs-story-hero-cta .qs-btn, .qs-story-cta-btns .qs-btn { width: 100%; }
    /* Tighten the rail so the cards keep a usable measure on a phone. */
    .qs-tl::before { left: 15px; }
    .qs-tl-year { padding-left: 48px; }
    .qs-tl-item { padding-left: 48px; }
    .qs-tl-node { width: 32px; height: 32px; font-size: 13px; }
    .qs-tl-card { padding: 16px 16px 14px; }
    .qs-tl-card h3 { font-size: 18px; }
    .qs-tl-live > div { flex: 1 1 100%; }
    .qs-story-cta { padding: 32px 22px; }
    .qs-story-cta h2 { font-size: 23px; }
}

/* ==========================================================================
   Service reviews — authors on what it was like to publish with us.
   One card, used by the home page, both calculators and the service pages;
   the data is one table (service_review) behind bin/service_reviews.php.
   ========================================================================== */
.qs-srev { margin: 46px 0 10px; }
.qs-srev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qs-srev-card {
    background: #fff; border: 1px solid #e6e6e6; border-radius: 14px;
    padding: 22px 22px 18px; margin: 0;
    display: flex; flex-direction: column;
}
.qs-srev-stars { color: #F4B400; font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; }
.qs-srev-card blockquote {
    margin: 0 0 18px; padding: 0; border: 0;
    font-size: 15.5px; line-height: 1.7; color: #333;
    /* Long Google reviews would otherwise make one card three times the height
       of its neighbours; the link out carries anyone who wants the rest. */
    display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
    overflow: hidden;
}
.qs-srev-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.qs-srev-card figcaption img,
.qs-srev-initial {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px;
}
.qs-srev-initial {
    background: #EAF1F6; color: #0E3A53; font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.qs-srev-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.qs-srev-who strong { color: #0E3A53; font-size: 15px; }
.qs-srev-who em, .qs-srev-who a { font-style: normal; font-size: 13px; color: #7b8794; }
.qs-srev-who a { text-decoration: none; }
.qs-srev-who a:hover { color: #2F6FA6; text-decoration: underline; }
.qs-srev-src {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f0f0;
    font-size: 12.5px; color: #2F6FA6; text-decoration: none;
    display: flex; justify-content: space-between; gap: 10px;
}
.qs-srev-src:hover { text-decoration: underline; }
.qs-srev-src span { color: #9aa7b2; }

@media (max-width: 991px) { .qs-srev-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .qs-srev-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Quote permalink — /quote/{id}/{slug}
   The quote is the h1 because it is what somebody searched for; everything
   below it exists to stop the page being thin and to sell the book.
   ========================================================================== */
.qs-qp { max-width: 780px; }
/* The quote is the whole reason the page exists, so it gets a panel of its own
   rather than sitting as loose text above a book card. Tinted, not white, so it
   separates from the cards below it and the page has one clear focal point. */
.qs-qp-quote {
    border: 0; margin: 22px 0 30px; padding: 34px 38px 28px;
    background: linear-gradient(180deg, #F4F9FC 0%, #FFFFFF 100%);
    border: 1px solid #E1EAF1; border-radius: 18px;
}
.qs-qp-quote h1 {
    font-size: 31px; line-height: 1.6; font-weight: 400 !important; color: #0E3A53;
    margin: 0 0 18px; position: relative; padding-left: 30px;
}
.qs-qp-quote h1::before {
    content: '\201C'; position: absolute; left: -6px; top: 4px;
    font-size: 68px; line-height: 1; color: #C3D8E6;
}
.qs-qp-quote cite { font-style: normal; font-size: 15.5px; color: #4a5b68; padding-left: 30px; display: block; }
.qs-qp-quote cite a { color: #2F6FA6; text-decoration: none; }
.qs-qp-quote cite a:hover { text-decoration: underline; }
.qs-qp-share { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0 30px; }
.qs-qp-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid #d7dee5; background: #fff; color: #0E3A53;
    border-radius: 999px; padding: 7px 15px; font-size: 13.5px; font-weight: 500;
    cursor: pointer; text-decoration: none; font-family: inherit;
}
.qs-qp-btn:hover { border-color: #2F6FA6; background: #f4f8fb; color: #0E3A53; text-decoration: none; }
.qs-qp-btn--wa:hover { border-color: #25D366; color: #128C7E; }

/* The book is the commercial point of the page, so it reads as a product card
   with a lifted cover rather than a bordered box. */
.qs-qp-book { display: flex; gap: 24px; padding: 24px; border: 1px solid #E4EBF0;
              border-radius: 14px; background: #fff; margin-bottom: 30px;
              box-shadow: 0 2px 10px rgba(14,58,83,.05); }
.qs-qp-cover { flex: 0 0 120px; }
.qs-qp-cover img { width: 120px; height: auto; border-radius: 8px;
                   box-shadow: 0 6px 20px rgba(14,58,83,.20); transition: transform .18s ease; }
.qs-qp-cover:hover img { transform: translateY(-3px) scale(1.02); }
.qs-qp-bookmeta h2 { font-size: 20px; margin: 0 0 4px; color: #0E3A53; }
.qs-qp-bookmeta h2 a { color: inherit; text-decoration: none; }
.qs-qp-by { margin: 0 0 4px; font-size: 14.5px; color: #4a5b68; }
.qs-qp-spec { font-size: 13px; color: #8a97a3; margin: 0 0 14px; }
.qs-qp-buy { display: flex; gap: 10px; flex-wrap: wrap; }

.qs-qp-themes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.qs-qp-themes span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8a97a3; }
.qs-qp-themes a { background: #EAF1F6; color: #38617A; border-radius: 999px;
                  padding: 5px 14px; font-size: 13.5px; text-decoration: none; }
.qs-qp-themes a:hover { background: #d8e6f0; color: #0E3A53; text-decoration: none; }

/* ---- Urdu -----------------------------------------------------------------
   Direction lives on the TEXT, never on <html>: dir="rtl" on the document
   reversed the footer, the header and every English string on the page.

   NO BLANKET LINE-HEIGHT. This was `[lang="ur"], [dir="rtl"] { line-height:
   2.15 }`, which is right for a paragraph of Nastaliq and wrong for everything
   else that happens to be marked Urdu. It hit the language pills, the theme
   column headers and the chips — small two-line controls where extra leading
   is not leading, it is misalignment, and it put "English" 10px above اردو
   beside it in an equal-height box. Three separate visual bugs, one rule.

   Urdu prose already gets 1.9 from the :lang(ur) rule further up this file,
   and the surfaces that genuinely need more than that ask for it by name
   below. A control should never pick up prose leading just for being Urdu. */
.qs-qp-quote.is-rtl h1 { padding-left: 0; padding-right: 30px; line-height: 1.95; }
.qs-qp-quote.is-rtl h1::before { left: auto; right: -4px; content: '\201D'; }
.qs-qp-quote.is-rtl cite,
.qs-qp-quote.is-rtl .qs-qp-share { padding-left: 0; padding-right: 30px; margin-left: 0; }

@media (max-width: 640px) {
    .qs-qp-quote h1 { font-size: 23px; }
    .qs-qp-book { flex-direction: column; }
    .qs-qp-grid { grid-template-columns: 1fr; }
    .qs-qp-author { flex-direction: column; }
}

/* ---- Quote hub sidebar: language pills + per-theme dual counts -------------
   Each count is its own link (EN column, Urdu column), so one row offers the
   theme in either language and a click is never ambiguous. A count below the
   50-quote hub minimum renders as .is-thin — visible, greyed, not a link — so
   the reader watches the corpus grow without being sent to a thin page and we
   never hide a whole row to enforce the rule. */
.qs-qlang-switch { display: flex; gap: 8px; margin-bottom: 14px; }
.qs-qlang { flex: 1; text-align: center; padding: 9px 6px; border-radius: 8px;
            border: 1px solid var(--qs-line, #dfe6ec); color: var(--qs-navy, #0E3A53);
            font-weight: 600; font-size: 14px; text-decoration: none; }
.qs-qlang span { display: block; font-weight: 400; font-size: 12px; opacity: .65; }
.qs-qlang:hover { background: var(--qs-bg-blue, #eef4f8); text-decoration: none;
                  color: var(--qs-navy, #0E3A53); }
.qs-qlang.is-active { background: var(--qs-navy, #0E3A53); color: #fff; border-color: var(--qs-navy, #0E3A53); }
.qs-qlang.is-active span { opacity: .8; }

.qs-qt-head { display: grid; grid-template-columns: 1fr 46px 46px; gap: 4px;
              padding: 0 10px 6px; font-size: 11px; letter-spacing: .06em;
              text-transform: uppercase; opacity: .55; }
.qs-qt-head span:not(:first-child) { text-align: center; }
.qs-qt-row { display: grid; grid-template-columns: 1fr 46px 46px; gap: 4px;
             align-items: center; padding: 7px 10px; border-radius: 8px; }
.qs-qt-row:hover { background: var(--qs-bg-blue, #eef4f8); }
.qs-qt-row.is-active { background: var(--qs-bg-blue, #eef4f8); font-weight: 600; }
.qs-qt-label { font-size: 14px; color: var(--qs-navy, #0E3A53); }
.qs-qt-n { display: block; text-align: center; font-size: 13px; padding: 3px 0;
           border-radius: 6px; color: var(--qs-navy, #0E3A53); text-decoration: none; }
a.qs-qt-n:hover { background: var(--qs-navy, #0E3A53); color: #fff; text-decoration: none; }
.qs-qt-n.is-here { background: var(--qs-navy, #0E3A53); color: #fff; }
/* Not yet a page: shown so the number is visible, unlinked so it is not a door. */
.qs-qt-n.is-thin { opacity: .38; cursor: default; }

/* The hub listing links each quote to its own permalink. */
.qs-quote-text a { color: inherit; text-decoration: none; }
.qs-quote-text a:hover { color: var(--qs-navy, #0E3A53); text-decoration: underline; }

/* The author block ends on a button, so it needs breathing room above it. */
.qs-qp-author .qs-btn { margin-top: 10px; }



/* ---- Urdu sizing ----------------------------------------------------------
   Nastaliq sits on a steep diagonal baseline and its descenders run far below
   it, so the leading that suits Latin makes lines collide. It also renders
   optically smaller than Latin at the same px, hence the size bump. Applied by
   :lang so English on the same page is untouched. */
.qs-qp-quote h1:lang(ur) { font-size: 30px; line-height: 2.35; padding-top: .35em; }
.qs-genre-hero-title:lang(ur) { line-height: 1.9; padding-top: .3em; }
@media (max-width: 640px) { .qs-qp-quote h1:lang(ur) { font-size: 23px; line-height: 2.2; } }

/* ---- Browse by theme (chips, grouped by language) -------------------------
   Foot of every quote page and the hub sidebar, from one component. On the leaf
   pages this is the link network that feeds the hubs.
   Chips rather than a two-column table: with a balanced corpus every table row
   read "50  50", which looked like a spreadsheet and labelled neither number
   near itself. Saying the language once, as a group heading, lets each chip be
   one unambiguous door — and lets the Urdu group carry Urdu labels. */
.qs-qtb { display: block; border: 1px solid #E4EBF0; border-radius: 14px;
          padding: 22px 24px; background: #fff; margin-bottom: 42px; }
.qs-qtb-h { font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
            color: #92A4B2; margin: 0 0 18px; font-weight: 600; }
.qs-qtb-group + .qs-qtb-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid #EFF4F7; }
.qs-qtb-lang { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
               color: #B3C0CB; margin-bottom: 10px; font-weight: 600; }
.qs-qtb-group.is-ur .qs-qtb-lang { letter-spacing: normal; font-size: 14px; }
.qs-qtb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-qtb-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--qs-bg-blue); color: var(--qs-pill-text);
    border: 1px solid transparent; border-radius: 999px;
    padding: 7px 8px 7px 15px; font-size: 14px; line-height: 1.2; text-decoration: none;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}
.qs-qtb-chip b {
    font-weight: 600; font-size: 11.5px; background: rgba(255,255,255,.78);
    color: #56728A; border-radius: 999px; padding: 3px 8px; min-width: 26px; text-align: center;
}
.qs-qtb-chip:hover { background: var(--qs-navy); color: #fff; text-decoration: none; transform: translateY(-1px); }
.qs-qtb-chip:hover b { background: rgba(255,255,255,.18); color: #fff; }
.qs-qtb-chip.is-here { background: var(--qs-navy); color: #fff; }
.qs-qtb-chip.is-here b { background: rgba(255,255,255,.18); color: #fff; }
/* The Urdu group reads right-to-left, so it starts at the right edge and its
   rows fill leftwards — the same way the Urdu quotes above it do. `direction`
   rather than justify-content: it also puts the word before its count in
   reading order and wraps the rows from the correct side, which flex alignment
   alone would not. The section heading stays LTR; only the Urdu group turns. */
.qs-qtb-group.is-ur { direction: rtl; }
.qs-qtb-chip[dir="rtl"] { padding: 7px 15px 7px 8px; }
.qs-qtb--side .qs-qtb-chips { gap: 6px; }
.qs-qp-quote { margin-bottom: 48px; }
.qs-qp-book  { margin-bottom: 80px; }
.qs-qp-themes { margin-bottom: 80px; }
.qs-qp-quote { padding: 32px; background: linear-gradient(180deg, #F4F9FC 0%, #FEFEFE 100%); }
.qs-qp-book, .qs-qtb { padding: 16px; background: #FEFEFE; }
.qs-qp-grid  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.qs-qp-book  { gap: 24px; }

/* Section title w SeeAll Btn — the system has this as one component: a centred
   heading with See All on the right of the same line. Mine was small caps with
   a fading rule, and the See All was a separate link bolted underneath, which
   is why the headings read as decoration instead of structure. */
.qs-sect-head { position: relative; display: flex; align-items: baseline;
                justify-content: center; margin-bottom: 24px; }
.qs-sect-head h2 { font-size: 24px; font-weight: 600; color: var(--qs-ink);
                   margin: 0; text-align: center; line-height: 1.4; }
.qs-sect-all { position: absolute; right: 0; bottom: 2px; white-space: nowrap;
               font-size: 14px; font-weight: 500; color: var(--qs-blue); text-decoration: none; }
.qs-sect-all:hover { color: var(--qs-navy); text-decoration: none; }
.qs-sect-all i { margin-left: 6px; font-size: 12px; }
@media (max-width: 640px) {
    .qs-sect-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .qs-sect-head h2 { text-align: left; font-size: 20px; }
    .qs-sect-all { position: static; }
}
@media (max-width: 640px) {
}

/* Badge at the system's 28px. */
.qs-qtb-chip { min-height: 28px; }

/* ---- Tag Btn ---------------------------------------------------------------
   The system's tag is an outline navy pill by default and a filled navy pill
   when active. Mine were a pale blue fill with muted text, which reads as
   decoration rather than a control. */
.qs-qtb-chip { background: transparent; color: var(--qs-navy);
               border: 1px solid rgba(14,58,83,.28); }
.qs-qtb-chip b { background: rgba(14,58,83,.07); color: var(--qs-navy); opacity: .75; }
.qs-qtb-chip:hover { background: var(--qs-navy); color: #fff; border-color: var(--qs-navy); }
.qs-qtb-chip.is-here { background: var(--qs-navy); color: #fff; border-color: var(--qs-navy); }
.qs-qtb-chip:hover b, .qs-qtb-chip.is-here b { background: rgba(255,255,255,.18); color: #fff; opacity: 1; }

/* ---- Hero on Featured Books Card -------------------------------------------
   Dark panel, cover on the left, the quote as the body, attribution italic,
   white CTA. The pale panel I had gave the page no anchor and left the cover
   out of the one block a reader actually looks at. */
.qs-qp-quote { background: var(--qs-navy); border: 0; color: #fff; padding: 32px 36px; }
.qs-qp-quote h1 { color: #fff; padding-left: 0; margin-bottom: 14px; }
.qs-qp-quote h1::before { display: none; }
.qs-qp-hero-body { min-width: 0; flex: 1; }
.qs-qp-quote cite { padding-left: 0; color: rgba(255,255,255,.72); font-style: italic; }
.qs-qp-quote cite a { color: #fff; text-decoration: none; }
.qs-qp-quote cite a:hover { text-decoration: underline; }
.qs-qp-share { margin: 18px 0 0; }
.qs-qp-btn { background: #fff; border-color: #fff; color: var(--qs-navy); font-weight: 500; }
.qs-qp-btn:hover { background: #EAF1F6; border-color: #EAF1F6; color: var(--qs-navy); }
.qs-qp-btn--wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
@media (max-width: 640px) {
}
/* The two-column grid lives here now; its original declaration was inside the
   block the Testimonial Card treatment replaced, and restating only the gap
   left the cards stacked full-width. */
.qs-qp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 640px) { .qs-qp-grid { grid-template-columns: 1fr; } }

/* The See All link sits in its own lane instead of overlapping the title.
   Absolutely positioning it over a CENTRED heading works only while the
   heading is short; "More from Roshni K Deep - Tragic Stories Book in Urdu"
   ran straight underneath it with no gap at all. Reserving the lane on both
   sides keeps the title optically centred and makes a long one wrap rather
   than collide. */
.qs-sect-head h2 { padding: 0 104px; }
@media (max-width: 640px) { .qs-sect-head h2 { padding: 0; } }

/* The quote page reuses the store's bookmark card (.qs-bmk) rather than a card
   of its own — it was already built, already styled, and already in the
   Nastaliq and line-height lists, which the three bespoke versions I wrote
   were not. Only the grid differs: the store lays them in a flex row of three,
   these sit two-up. */
.qs-bmk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch; }
.qs-bmk-grid .qs-bmk { flex: none; }
.qs-bmk-quote a { color: inherit; text-decoration: none; }
.qs-bmk-quote a:hover { text-decoration: underline; }
@media (max-width: 640px) { .qs-bmk-grid { grid-template-columns: 1fr; } }

/* One column, the same as the hub listings. Two-up made the identical card
   read as a different component depending on which page you were on, and a
   quote — especially a long Urdu one — needs the full measure to breathe. */
.qs-quote-grid { display: block; }

/* A card whose book is the one the page is already about carries no cover and
   no attribution, so it does not need the 130px right gutter the cover sits in.
   Without this the quote wrapped early against empty space. */
.qs-quote-card--bare { padding-right: 28px; }

/* ---- The book strip --------------------------------------------------------
   With the cover gone from the hero, the navy panel and this one stacked as two
   full-width slabs — one dark, one light — and the page read as two blocks
   rather than a quote with a way to buy the book under it.
   So this stops being a second content panel and becomes an action strip: the
   cover smaller, the meta on one line each, and the buttons pulled up beside
   them instead of below. Same information, roughly half the height. */
.qs-qp-book { display: flex; gap: 20px; align-items: center; padding: 16px 20px;
              border: 1px solid #E4ECEC; border-radius: 8px; background: #FEFEFE;
              box-shadow: none; }
.qs-qp-cover { flex: 0 0 78px; }
.qs-qp-cover img { width: 78px; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
                   border-radius: 4px; box-shadow: 0 3px 10px rgba(14,58,83,.18); }
.qs-qp-bookmeta { flex: 1 1 auto; min-width: 0; }
.qs-qp-bookmeta h2 { font-size: 17px; margin: 0 0 3px; line-height: 1.35; }
.qs-qp-by   { margin: 0; font-size: 13.5px; }
.qs-qp-spec { margin: 0; font-size: 12.5px; }
/* The buttons sit on the end of the strip on a wide screen and wrap under it on
   a narrow one, which is what keeps the height down without hiding anything. */
.qs-qp-buy { flex: 0 0 auto; gap: 8px; }
.qs-qp-buy .qs-btn { padding: 9px 16px; font-size: 13.5px; }
@media (max-width: 700px) {
    .qs-qp-book { flex-wrap: wrap; }
    .qs-qp-bookmeta { flex: 1 1 100%; }
    .qs-qp-buy { flex: 1 1 100%; }
}

/* ---- Themes row on Tag Btn -------------------------------------------------
   The last element on the page still wearing its own clothes. The system's tag
   is an outline navy pill; these were a pale fill with muted text, which read
   as a caption rather than the link out to the theme hub that they are — and
   with the theme cards now at the foot of the page, this row is the only early
   exit to it. */
.qs-qp-themes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qs-qp-themes span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
                     color: #92A4B2; font-weight: 600; }
.qs-qp-themes a { display: inline-flex; align-items: center; min-height: 28px;
                  background: transparent; color: var(--qs-navy);
                  border: 1px solid rgba(14,58,83,.28); border-radius: 999px;
                  padding: 4px 15px; font-size: 14px; text-decoration: none;
                  transition: background .14s ease, color .14s ease, border-color .14s ease; }
.qs-qp-themes a:hover { background: var(--qs-navy); border-color: var(--qs-navy);
                        color: #fff; text-decoration: none; }
/* Buttons at the end of the strip; they drop to their own full-width row only
   when the strip is too narrow to hold them beside the title. */
.qs-qp-buy { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 700px) { .qs-qp-buy { margin-left: 0; } }

/* The Featured Author banner on a quote page. Same component as the store —
   only the fixed 380px height goes, because there it sits in a carousel where
   every slide must match, and here it is a single block that should close up
   around whatever bio it has. */
.qs-author-banner--compact { height: auto; padding: 32px 46px; }
@media (max-width: 767px) { .qs-author-banner--compact { padding: 26px 22px 28px; } }
/* Section rhythm — 80px, per the design system's spacing documentation. This
   was one rule listing .qs-qp-more, .qs-qtb and .qs-fa together, and removing
   the retired .qs-fa component took the whole selector with it. Restated
   without it. */
.qs-qp-more, .qs-qtb, .qs-author-banner--compact { margin-bottom: 80px; }

/* Language pills: same box, same baselines, whichever script is inside.
   The Urdu pill carries lang="ur", which picks up the 2.15 line-height meant
   for running Nastaliq prose — 30.1px against the English pill's 20px, and a
   number sitting 10px lower. In a two-line control that is not leading, it is
   misalignment: "English" floated at the top of its pill while اردو sat
   centred. Fixed leading on both, and the content centred in the box, so the
   script inside can no longer move it. */
.qs-qlang { display: flex; flex-direction: column; justify-content: center;
            line-height: 1.45; padding: 10px 8px; }
.qs-qlang span { line-height: 1.45; margin-top: 2px; }

/* Controls state their own leading so no Urdu prose rule can reach them. The
   column headers on the theme browser, the chips, and the pills are all
   two-line-or-less UI where the script inside must not change the box. */
.qs-qt-head span, .qs-qtb-lang, .qs-qtb-chip, .qs-qt-n, .qs-qtb-n,
.qs-pill, .qs-qp-themes a { line-height: 1.45; }

/* The review card is the home page's .qs-rev, now used on the service pages and
   the calculators too. The home page lays them in a horizontal rail; everywhere
   else they sit three across in a plain band, so the row needs its own layout
   while the card itself stays identical. */
.qs-srev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.qs-srev-row .qs-rev { margin: 0; width: auto; min-width: 0; flex: none; }
@media (max-width: 900px) { .qs-srev-row { grid-template-columns: 1fr; } }

/* The cross-language link under a theme hub's hero.
   First version was grey 14.5px small print and invisible on the page — which
   is a poor way to treat the one thing on this site Goodreads has no answer to.
   It is a destination now: a bordered chip that reads as somewhere to go. */
.qs-quote-xlang { margin: -8px 0 26px; font-size: 15px; }
.qs-quote-xlang a {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid rgba(14,58,83,.22); border-radius: 999px;
    padding: 9px 18px; color: var(--qs-navy); font-weight: 500; text-decoration: none;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.qs-quote-xlang a:hover { background: var(--qs-navy); border-color: var(--qs-navy);
                          color: #fff; text-decoration: none; }
.qs-quote-xlang b { font-weight: 600; }
.qs-quote-xlang .qs-xlang-n { font-size: 12.5px; opacity: .7; }

/* ---- Featured --------------------------------------------------------------
   Three per theme per language, chosen on a schedule and rotated weekly. They
   already sort to the top of the hub; without a mark the reader reads them as
   the first three of a list rather than a selection, so they get a small ribbon
   and a warm card — the same warmth the admin list uses for a featured row.
   Deliberately quiet: three in twenty reads as a recommendation; louder and
   twenty would read as an advert. */
.qs-quote-card--pick { background: #FFFCF5; border-color: #F0E2C4; }
.qs-quote-pick {
    position: absolute; bottom: 0; right: 28px;
    background: #B8862B; color: #fff;
    font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: 5px 12px 6px; border-radius: 5px 5px 0 0; line-height: 1;
}
/* Bottom right in both languages, and the word stays "Featured" in both — an
   Urdu reader of this site reads English, and one word in two scripts meant the
   ribbon changed width and weight between the two columns of the same grid.
   Latin text in an RTL card, so it is pinned rather than flowed: `right` is the
   right edge either way, where `inset-inline-end` would follow the script and
   put it on the left of the Urdu hub. */
.qs-quote-pick:lang(ur) { direction: ltr; }
/* It sits in the gutter the cover reserves (the card pads 130px on that side,
   so the tags never reach it) and below where the cover ends. A short quote
   would otherwise let the two meet, which is what the floor is for; a bare card
   has no cover and needs no floor. */
.qs-quote-card--pick { min-height: 168px; }
.qs-quote-card--bare.qs-quote-card--pick { min-height: 0; }
@media (max-width: 640px) {
    .qs-quote-pick { right: 16px; }
    .qs-quote-card--pick { min-height: 0; }   /* cover is hidden here */
}

/* ---- Genre facets, FAQ, recent and the thin-shelf fallback -----------------
   Four blocks added to the genre page. They share the card language already on
   the site rather than introducing a new one -- same radius, same line colour,
   same navy. Nothing here is a new component; it is the existing vocabulary
   applied to four more places. */

/* Facet strip. Language tabs are real links to real pages; "free to read" is a
   filter and is styled quieter so it does not read as a sibling shelf. */
.qs-gfacets { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 26px; }
.qs-gfacet {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--qs-line); background: #fff;
    color: var(--qs-navy, #0E3A53);
    font-size: 14.5px; font-weight: 600; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.qs-gfacet span { font-size: 12.5px; font-weight: 500; color: var(--qs-muted); }
.qs-gfacet:hover { background: var(--qs-bg-blue); text-decoration: none; color: var(--qs-navy, #0E3A53); }
.qs-gfacet.is-on { background: var(--qs-navy, #0E3A53); border-color: var(--qs-navy, #0E3A53); color: #fff; }
.qs-gfacet.is-on span { color: rgba(255,255,255,.72); }
.qs-gfacet--soft { border-style: dashed; color: var(--qs-ink-2, #5A7385); }

/* FAQ. <details> rather than a JS accordion: it works before any script runs,
   it is keyboard-accessible for free, and the answer text is in the DOM for
   crawlers whether or not it is open. */
.qs-gfaq { margin: 46px 0 0; }
.qs-gfaq h2 { font-size: 24px; font-weight: 700; color: var(--qs-navy, #0E3A53); margin: 0 0 18px; }
.qs-gfaq-list { border: 1px solid var(--qs-line); border-radius: var(--qs-radius-card, 12px); background: #fff; }
.qs-gfaq-item { border-bottom: 1px solid var(--qs-line); }
.qs-gfaq-item:last-child { border-bottom: 0; }
.qs-gfaq-item > summary {
    cursor: pointer; list-style: none;
    padding: 16px 46px 16px 20px; position: relative;
    font-size: 16px; font-weight: 600; color: var(--qs-ink, #17313F);
}
.qs-gfaq-item > summary::-webkit-details-marker { display: none; }
.qs-gfaq-item > summary::after {
    content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 400; color: var(--qs-muted); line-height: 1;
}
.qs-gfaq-item[open] > summary::after { content: '\2013'; }
.qs-gfaq-item > summary:hover { color: var(--qs-navy, #0E3A53); }
.qs-gfaq-item > div {
    padding: 0 20px 18px; font-size: 15px; line-height: 1.75; color: var(--qs-ink-2, #5A7385);
}
.qs-gfaq-item a { color: var(--qs-navy, #0E3A53); font-weight: 600; }

/* Recently added. Uses the site's own book card in the five-up row author.php
   already uses (.qs-book-grid--row) rather than a bespoke list -- the first
   version was a bare row of links styled like nothing else on the site.
   Only the date is new, and it is the one thing the grid above does not say. */
.qs-grecent { margin: 46px 0 0; }
.qs-grecent-when { display: block; margin-top: 6px; font-size: 12.5px; color: var(--qs-muted);
                   font-family: var(--qs-font); }
/* The description is what makes a card tall. In a freshness strip the covers
   and the dates are the content, so it comes off here and nowhere else. */
.qs-grecent .qs-book-desc { display: none; }
/* .qs-book-name reserves two title lines (min-height: 3.7em) so the author
   sits at the same height across a row. In the main grid the description
   under it hides that reserve; here, with the description gone and most
   titles one line, it left a 34px hole between the title and the author on
   every card.
   The reserve is dropped and the alignment done properly instead: the row is
   a flex container, so cards already stretch to equal height, and pushing the
   author to the bottom lines the author and date up whatever the titles do. */
.qs-grecent .qs-book-name   { min-height: 0; margin-bottom: 8px; }
.qs-grecent .qs-book-author { margin-top: auto; }
.qs-grecent-when            { margin-top: 2px; }

/* Thin shelf. Only renders below the indexing floor, so it is never on a page
   that is doing fine -- it exists so seven books is a signpost, not a dead end. */
.qs-gthin { margin: 40px 0 0; padding: 22px 24px; background: var(--qs-bg-blue, #EAF1F6);
            border-radius: var(--qs-radius-card, 12px); }
.qs-gthin h2 { font-size: 19px; font-weight: 700; color: var(--qs-navy, #0E3A53); margin: 0 0 8px; }
.qs-gthin p { margin: 0 0 14px; color: var(--qs-ink-2, #5A7385); font-size: 15px; }
.qs-gthin-links { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-gthin-links a {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 8px 15px; border-radius: 999px; background: #fff;
    color: var(--qs-navy, #0E3A53); font-size: 14px; font-weight: 600; text-decoration: none;
}
.qs-gthin-links a span { font-size: 12px; font-weight: 500; color: var(--qs-muted); }
.qs-gthin-links a:hover { background: var(--qs-navy, #0E3A53); color: #fff; text-decoration: none; }
.qs-gthin-links a:hover span { color: rgba(255,255,255,.7); }

@media (max-width: 640px) {
    .qs-gfacets { gap: 6px; }
    .qs-gfacet { padding: 7px 13px; font-size: 13.5px; }
    .qs-gfaq h2 { font-size: 21px; }
}

/* --- A book that is not on sale ------------------------------------------
   Replaces the whole buy box (format tabs, price, Add to Cart, sample) on a
   deactivated book. The PAGE stays -- description, author, reviews -- because
   404ing a URL that is already indexed and linked throws away everything it
   earned, and if the book is put back it would start from nothing. So the
   address keeps its value and simply stops selling. */
.qs-offsale {
    padding: 18px 20px;
    background: var(--qs-bg-blue, #EEF4F8);
    border: 1px solid rgba(14,58,83,.12);
    border-radius: 12px;
}
.qs-offsale-head {
    margin: 0 0 6px; font-family: var(--qs-font);
    font-size: 17px; font-weight: 700; color: var(--qs-navy, #0E3A53);
}
.qs-offsale-body {
    margin: 0; font-family: var(--qs-font);
    font-size: 14px; line-height: 1.6; color: #38617A;
}
.qs-offsale-body a { color: var(--qs-navy, #0E3A53); text-decoration: underline; }

/* ============================================================================
   SCARCITY TAG — "how many are left", beside the order button
   ----------------------------------------------------------------------------
   Shown only when a print edition has 10 or fewer copies. Two jobs: tell the
   reader the truth, and let them see it without reading. The dot meter does the
   second job -- ten slots, one lit per copy -- so the shape of the tag carries
   the number before the words do.

   Built from the existing tokens. The two amber values are the only new colour
   in the file: --qs-star (#F4B400) is the palette's warm accent but it is a
   rating gold on white and fails contrast as text, so these are the same hue
   taken darker for text and lighter for the fill.
   ============================================================================ */
:root {
    --qs-scarce:      #8A5A00;   /* text on the low tag  — warm, from --qs-star's hue */
    --qs-scarce-bg:   #FFF6E0;   /* fill for the low tag */
    --qs-scarce-line: #F0DCA8;   /* hairline for the low tag */
    --qs-urgent:      #9A3110;   /* text when 3 or fewer remain */
    --qs-urgent-bg:   #FFEDE6;
    --qs-urgent-line: #F5C9B6;
}

.qs-stock-tag {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 12px; padding: 7px 14px 7px 12px;
    font-family: var(--qs-font); font-size: 13px; font-weight: 500; line-height: 1.3;
    color: var(--qs-scarce);
    background: var(--qs-scarce-bg);
    border: 1px solid var(--qs-scarce-line);
    border-radius: 20px;              /* matches .qs-pill */
}
.qs-stock-tag--urgent {
    color: var(--qs-urgent);
    background: var(--qs-urgent-bg);
    border-color: var(--qs-urgent-line);
}

/* Ten slots, one lit per copy left. Reads as a fuel gauge, not a decoration. */
.qs-stock-meter { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.qs-stock-meter i {
    display: block; width: 4px; height: 12px; border-radius: 2px;
    background: currentColor; opacity: .18;
}
.qs-stock-meter i.is-on { opacity: 1; }

/* The last lit slot breathes, but only when it is genuinely the last copy.
   Animating every low-stock tag would make the page restless for no reason. */
.qs-stock-tag--last .qs-stock-meter i.is-on { animation: qs-stock-breathe 2.4s ease-in-out infinite; }
@keyframes qs-stock-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .qs-stock-tag--last .qs-stock-meter i.is-on { animation: none; }
}

.qs-stock-tag__text { white-space: nowrap; }
.qs-stock-tag__text b { font-weight: 700; }

@media (max-width: 480px) {
    .qs-stock-tag { width: 100%; justify-content: center; }
}

/* --- the same scarcity fact, on the format tab -----------------------------
   Sits on its own line under the format name: the tabs are flex:1 and share the
   row, so putting "2 left" inline pushed "Paperback" off-centre and made the two
   tabs different widths. A second line keeps the tab grid even. */
.qs-tab-stock {
    display: block; margin-top: 3px;
    font-size: 11px; font-weight: 600; line-height: 1.2;
    color: var(--qs-scarce);
}
.qs-tab-stock--urgent { color: var(--qs-urgent); }

/* The active tab is navy, where both amber and red fail contrast. Same warning
   role, repainted for a dark ground rather than dropped -- the count matters
   most on the format the reader has actually selected. */
.qs-tab.is-active .qs-tab-stock          { color: #FFD9A8; }
.qs-tab.is-active .qs-tab-stock--urgent  { color: #FFC2A8; }

/* --- Where else you can buy it ----------------------------------------------
   Two surfaces for one fact. The NOTE sits under the format switcher, where the
   buying decision is actually made; the BAND sits above the reviews with logos
   and contact details, where there is room to make the case. The note links to
   the band, so the compact version never has to carry contact details it has no
   room for. */

/* The note. A link styled as a tinted strip, not a button: it must not compete
   with Add to Cart directly above it. */
.qs-stockists-note {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 9px 12px;
    border: 1px solid var(--qs-line); border-radius: var(--qs-radius);
    background: var(--qs-bg-blue);
    font-family: var(--qs-font); font-size: 13.5px; color: var(--qs-pill-text);
    text-decoration: none; line-height: 1.4;
}
.qs-stockists-note:hover { border-color: var(--qs-navy); text-decoration: none; color: var(--qs-navy); }
.qs-stockists-note b { color: var(--qs-navy); font-weight: 600; }
.qs-stockists-note .fa { color: var(--qs-navy); }
.qs-stockists-note__go { margin-left: auto; font-weight: 600; white-space: nowrap; font-size: 13px; }

/* The band. */
.qs-stockband { margin: 40px 0; }
.qs-stockband__lede {
    font-size: 15px; color: var(--qs-muted); margin: -4px 0 18px; line-height: 1.55;
}
/* auto-FILL, not auto-fit. With one bookshop, auto-fit collapses the empty
   tracks and stretches the single card the full width of the column, which
   reads as an empty box with a logo in the corner. auto-fill keeps the track
   and the card stays card-sized whether there is one shop or three. */
.qs-stockband__grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.qs-stockcard {
    display: flex; gap: 14px; align-items: stretch;
    padding: 16px; border: 1px solid var(--qs-line);
    border-radius: 12px; background: #fff;
}
.qs-stockcard:hover { border-color: var(--qs-field-border); }

/* Fixed square so shops with wildly different logo proportions still line up
   down the row. contain, never cover: a cropped logo is a damaged trademark. */
.qs-stockcard__mark {
    flex: 0 0 56px; width: 56px; height: 56px; align-self: flex-start;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--qs-line); border-radius: 10px;
    background: #fff; overflow: hidden;
}
.qs-stockcard__mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* No logo yet: the initial, so the card keeps its shape rather than collapsing
   into a different layout for half the shops. */
.qs-stockcard__initial {
    font-family: var(--qs-font); font-size: 22px; font-weight: 600;
    color: var(--qs-navy); background: var(--qs-bg-blue);
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
/* Column, so the button row can be pushed to the floor of the card with
   margin-top:auto below. Without it the actions sit directly under however much
   text each shop happens to have, and three cards in a row show three different
   button heights. */
.qs-stockcard__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.qs-stockcard__name {
    font-family: var(--qs-font); font-size: 15.5px; font-weight: 600;
    color: var(--qs-ink); line-height: 1.3;
}
.qs-stockcard__where { font-size: 13px; color: var(--qs-muted); margin-top: 3px; line-height: 1.45; }
.qs-stockcard__blurb {
    font-size: 13px; color: var(--qs-pill-text); margin-top: 6px;
    line-height: 1.5; font-style: italic;
}
.qs-stockcard__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.qs-stockcard__act a {
    font-size: 13px; font-weight: 600; color: var(--qs-navy);
    text-decoration: none; padding: 6px 11px; border-radius: 6px;
    background: #fff; border: 1px solid var(--qs-field-border);
}
.qs-stockcard__act a:hover { border-color: var(--qs-navy); text-decoration: none; }
/* WhatsApp keeps its own colour: it is the one people recognise without reading. */
.qs-stockcard__wa { color: #128C7E !important; border-color: #B7E1D8 !important; }
.qs-stockcard__wa:hover { border-color: #128C7E !important; }

.qs-stockband__foot {
    margin: 14px 0 0; font-size: 13px; color: var(--qs-muted); line-height: 1.5;
}
.qs-stockband__foot .fa { color: #2E7D5B; margin-right: 5px; }

@media (max-width: 480px) {
    .qs-stockband__grid { grid-template-columns: 1fr; }
    .qs-stockcard__act a { flex: 1 1 auto; text-align: center; }
    .qs-stockists-note { flex-wrap: wrap; }
    .qs-stockists-note__go { margin-left: 0; }
}

/* "Also available at …" — shown under the buy button when we have stock and a
   bookshop is holding copies too. Deliberately quiet: one line, no panel, no
   buttons. Given the same weight as the stock-out block it would read as an
   alternative to buying here, which is the opposite of the intent. */
.qs-stockists-also {
    margin-top: 10px; font-family: var(--qs-font);
    font-size: 13px; line-height: 1.5; color: var(--qs-muted);
}
.qs-stockists-also a {
    color: var(--qs-blue); font-weight: 500; text-decoration: none;
    border-bottom: 1px solid rgba(47,111,166,.35);
}
.qs-stockists-also a:hover { color: var(--qs-navy); border-bottom-color: var(--qs-navy); }

/* --- Bookshop directory and shop pages --------------------------------------
   /distributors and /distributors/<slug>. Deliberately reuses the shape of the
   stockist cards on a book page: a reader who clicks "Also available at" should
   land somewhere that looks like where they came from. */
.qs-shops-intro { margin: 8px 0 22px; }
.qs-shops-lede { font-size: 15.5px; color: var(--qs-muted); line-height: 1.6; margin: 8px 0 0; max-width: 70ch; }
.qs-shops-empty { padding: 40px 0; text-align: center; color: var(--qs-muted); }
.qs-shops-foot { margin: 32px 0 40px; font-size: 14px; color: var(--qs-muted); }

.qs-shopgrid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-bottom: 8px;
}
.qs-shopcard {
    display: flex; gap: 14px; align-items: stretch;
    padding: 18px; border: 1px solid var(--qs-line); border-radius: 12px;
    background: #fff; text-decoration: none; color: inherit;
}
.qs-shopcard:hover { border-color: var(--qs-navy); text-decoration: none; }
.qs-shopcard__mark, .qs-shophead__mark {
    flex: 0 0 64px; width: 64px; height: 64px; align-self: flex-start;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--qs-line); border-radius: 10px; background: #fff; overflow: hidden;
}
/* contain, never cover: a cropped logo is a damaged trademark. */
.qs-shopcard__mark img, .qs-shophead__mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qs-shopcard__initial, .qs-shophead__initial {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-family: var(--qs-font); font-size: 26px; font-weight: 600;
    color: var(--qs-navy); background: var(--qs-bg-blue);
}
.qs-shopcard__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.qs-shopcard__name { font-family: var(--qs-font); font-size: 16px; font-weight: 600; color: var(--qs-ink); line-height: 1.3; }
.qs-shopcard__where { font-size: 13px; color: var(--qs-muted); margin-top: 3px; line-height: 1.45; }
.qs-shopcard__blurb { font-size: 13px; color: var(--qs-pill-text); margin-top: 7px; line-height: 1.5; font-style: italic; }
.qs-shopcard__count { font-size: 12.5px; color: var(--qs-navy); font-weight: 600; margin-top: auto; padding-top: 10px; }

/* One shop. */
.qs-shophead { display: flex; gap: 20px; align-items: flex-start; margin: 8px 0 34px; }
.qs-shophead__mark { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 12px; }
.qs-shophead__body { min-width: 0; }
.qs-shophead__blurb { font-size: 16px; color: var(--qs-pill-text); font-style: italic; margin: 8px 0 0; line-height: 1.55; max-width: 60ch; }
.qs-shophead__where { font-size: 14.5px; color: var(--qs-muted); margin: 10px 0 0; }
.qs-shophead__where .fa { color: var(--qs-navy); margin-right: 5px; }
.qs-shophead__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.qs-shop-wa { background: #128C7E !important; border-color: #128C7E !important; }

.qs-shopbooks { margin-bottom: 36px; }
.qs-shopbooks__grid {
    display: grid; gap: 20px 16px; margin-top: 18px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.qs-shopbook { display: block; text-decoration: none; color: inherit; }
.qs-shopbook:hover { text-decoration: none; }
.qs-shopbook__cover {
    display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--qs-line); background: var(--qs-bg-blue);
}
.qs-shopbook__title { display: block; margin-top: 9px; font-size: 14px; font-weight: 600; color: var(--qs-ink); line-height: 1.35; }
.qs-shopbook__author { display: block; margin-top: 2px; font-size: 12.5px; color: var(--qs-muted); }

@media (max-width: 560px) {
    .qs-shopgrid { grid-template-columns: 1fr; }
    .qs-shophead { flex-direction: column; gap: 14px; }
    .qs-shophead__act .qs-btn { flex: 1 1 auto; text-align: center; }
}

/* ===========================================================================
   COLLABORATION INVITATION  (accept-invite.php)
   The one page a person lands on from an invitation e-mail. It is read once,
   by somebody who may never have seen Daastan before, while being asked to
   agree to a share of somebody's earnings — so it is narrow, quiet, and the
   terms are the largest thing on it.
   =========================================================================== */
.qs-invite { max-width: 640px; padding-top: 32px; padding-bottom: 56px; }
.qs-invite h1 { font-size: 26px; margin: 0 0 18px; }
.qs-invite-lead { font-size: 18px; line-height: 1.55; margin-bottom: 18px; }

/* The terms get a card of their own. This is the part being agreed to, and on
   a page of prose an unboxed paragraph is something people skim past. */
.qs-invite-terms {
    background: #F4F9FC; border: 1px solid #DCE7EE; border-radius: 12px;
    padding: 18px 20px; margin: 22px 0;
}
.qs-invite-terms p { margin: 0 0 10px; font-size: 16px; }
.qs-invite-terms p:last-child { margin-bottom: 0; }

.qs-invite-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 12px; }
.qs-invite-fine { font-size: 14px; color: #5A7385; margin: 0; }

/* Not an error the reader caused — the hold lapsed while they were deciding.
   Amber rather than red: nobody did anything wrong. */
.qs-invite-err {
    background: #FFF8E6; border: 1px solid #F2D999; color: #6B5312;
    padding: 12px 16px; border-radius: 10px; margin: 20px 0 12px; font-size: 15px;
}

/* --- publisher profile ------------------------------------------------------
   The evidence strip, the people, their authors, and submissions. Built from
   the tokens already here -- navy, bg-blue, line, muted -- because a publisher
   page that looked like a different site would undo the point of it being the
   place people come to check. */

/* THE EVIDENCE. Counted facts, so they are given the weight of facts: big
   numerals, quiet labels, and a rule under them rather than a card each. Cards
   would make five figures read as five separate claims. */
/* THREE NAVY BOXES, not three numbers on white. The counts are the page's
   evidence and they were the quietest thing on it -- a rule above them and grey
   labels under, indistinguishable from a caption. In the brand navy they read
   as a claim being made.
   The rule above them goes: the boxes are their own edge now, and a hairline
   over a row of solid cards is a second border for the same job. */
.qs-pev { padding-top: 8px; }
.qs-pev-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 20px;
}
.qs-pev-i {
    background: var(--qs-navy); border-radius: var(--qs-radius-card);
    padding: 30px 28px; text-align: center;
}
.qs-pev-i b {
    display: block; font-size: 42px; font-weight: 800; color: #fff; line-height: 1.05;
    /* Numerals on one rhythm, so 612 and 2016 do not sit on different widths. */
    font-variant-numeric: tabular-nums;
}
.qs-pev-i span {
    display: block; margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.72);
}

/* THE HERO'S TWO SENTENCES. Wider measure than the bio because it sits beside
   the logo rather than under a heading, and short enough that it never needs
   one. */
.qs-ai-lede {
    font-family: var(--qs-font); font-size: 17px; line-height: 1.65;
    color: var(--qs-ink-2); max-width: 620px; margin: 2px 0 16px;
}
/* The verification, as two chips. This replaced three stacked lines and about
   forty words; the long form is each chip's title attribute. */
.qs-ai-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.qs-trust {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--qs-font); font-size: 13.5px; font-weight: 600;
    color: var(--qs-pill-text); background: var(--qs-bg-blue);
    padding: 6px 12px; border-radius: 999px;
    cursor: default;   /* it carries a tooltip, not a link */
}
.qs-trust--ver i { color: #1E874B; }
/* Monospace on the prefix because it is a number to be copied and compared,
   not read. */
.qs-trust code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; font-weight: 700; background: none; padding: 0;
    color: var(--qs-navy);
}

/* THE PEOPLE. A photo and a name, side by side -- the most human block on the
   page, so it is not a grid of avatars. */

/* THEIR AUTHORS. Small, many, and scannable -- this is a list somebody reads
   looking for a name they know. */
/* EVERY CARD THE SAME HEIGHT, whatever the name does.
   "Muhammad Jahangeer Badar" wrapped to two lines and pushed its "5 titles" a
   line below its neighbours, so the first row had two baselines and read as
   broken while the rows below it looked fine. The name reserves two lines
   whether it needs them or not and clamps at two rather than growing to three,
   so a long name is shortened and never ragged. Same class as the spacing
   complaints in CLAUDE.md: not a missing margin -- a box that changes size. */
/* TWO ROWS DRIFTING PAST EACH OTHER, not a wall. Twenty-four cards in a grid
   took four rows and still showed 5% of the house; the same twenty-four in
   opposite directions read as a pool you are seeing part of, which is the true
   statement. Penguin Random House does not use a photo grid for the reason we
   cannot either: photograph coverage is uneven, and a layout built on faces is
   only as good as its worst quarter -- so these are pills, where the face is a
   detail and the name carries the card. */
/* THE WHOLE BLOCK ON THE TINT, heading included. The pills are white, so on
   white they were outlines floating on nothing; on BG Blue they read as cards.
   No horizontal padding -- the rows are meant to run out of the card on both
   sides, and the mask below is what makes them do it. */
/* FULL BLEED, and it has to break OUT of .container to do it -- the band is
   emitted inside a 1040px centred box. Negative side margins of exactly the
   gap on each side widen it to the viewport.

   100vw counts the scrollbar and .container is centred in the space WITHOUT
   one, so the right edge overshoots by about half a scrollbar -- enough to give
   the whole page a horizontal scrollbar on Windows, where the bar is always
   visible. #body clips that off. `clip` rather than `hidden`: hidden would make
   #body a scroll container and break position:sticky anywhere below it, which
   is a large blast radius for a decorative band. Nothing in any stylesheet
   touches #body, so this rule owns it outright.

   Doubled with .qs-ah-sec deliberately -- both are one class, so which margin
   wins would otherwise be decided by source order, the trap that collapsed
   every dense form grid below 768px. */
#body { overflow-x: clip; }
.qs-ah-sec.qs-pamq-band {
    background: var(--qs-bg-blue);
    /* No radius: a band that reaches both edges has no corners to round. */
    border-radius: 0;
    padding: 44px 0;
    margin: 48px calc(50% - 50vw) 10px;
}
/* The rows run edge to edge; the words must not. */
.qs-pamq-band .qs-sec-head2 { padding: 0 24px; }
.qs-pamq { position: relative; }
.qs-pamq-row {
    overflow: hidden;
    /* Both edges, because content enters and leaves on both. A mask rather than
       gradient overlays because this section is on white here and on a tinted
       panel elsewhere, and a mask does not need to know which. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 72px,
                                        #000 calc(100% - 72px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 72px,
                                        #000 calc(100% - 72px), transparent);
}
.qs-pamq-row + .qs-pamq-row { margin-top: 12px; }
.qs-pamq-track {
    display: flex; width: max-content;
    animation: qs-pamq-run 64s linear infinite;
    will-change: transform;
}
/* Every other row runs the same keyframes backwards. Direction comes from the
   markup because it is a fact about the row and greppable there; the durations
   are positional and stay here -- three primes apart, so the rows never fall
   into step and freeze into looking like one moving block. */
.qs-pamq-row--rev .qs-pamq-track { animation-direction: reverse; }
.qs-pamq-row:nth-child(2) .qs-pamq-track { animation-duration: 79s; }
.qs-pamq-row:nth-child(3) .qs-pamq-track { animation-duration: 71s; }
@keyframes qs-pamq-run {
    from { transform: translateX(0); }
    /* Exactly one set. The pills carry their own trailing margin instead of the
       track carrying a gap -- with a gap the track is 2 sets PLUS one gap, and
       -50% lands half a gap short, which shows up as a stutter once a minute. */
    to   { transform: translateX(-50%); }
}
.qs-pamq-set { display: flex; }
/* TOO FEW TO LOOP -- three of the six houses with books have a single author.
   Held still, centred, duplicate dropped. Centred with an auto margin rather
   than justify-content because auto margins collapse to zero once the content
   overflows, so a house near the threshold can still scroll to the far end
   instead of having it clipped off unreachably to the left. */
.qs-pamq--still .qs-pamq-track { animation: none; width: auto; }
.qs-pamq--still .qs-pamq-set { margin: 0 auto; }
.qs-pamq--still .qs-pamq-set--dup { display: none; }
.qs-pamq--still .qs-pamq-row { overflow-x: auto; overscroll-behavior-x: contain; }
/* The trailing margin exists to make the seam exact; with nothing to seam it is
   just the row sitting six pixels left of centre. */
.qs-pamq--still .qs-pamq-pill:last-child { margin-right: 0; }
/* Stop when the reader reaches for one. A moving link is a link you cannot
   click, and hover is the moment they are trying to. focus-within does the same
   for the keyboard, where the row would otherwise carry the focused pill away. */
@media (hover: hover) and (pointer: fine) {
    .qs-pamq:hover .qs-pamq-track { animation-play-state: paused; }
}
.qs-pamq:focus-within .qs-pamq-track { animation-play-state: paused; }

.qs-pamq-pill {
    display: flex; align-items: center; gap: 11px;
    margin-right: 12px; padding: 7px 20px 7px 7px;
    border: 1px solid var(--qs-line); border-radius: 999px;
    background: var(--qs-surface); text-decoration: none;
    /* No fixed width: "Muhammad Jahangeer Badar" and "AFSHAN HUMA" get the room
       each needs, which is also what stops the two rows looking gridded. */
    white-space: nowrap;
}
.qs-pamq-av {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; display: block;
    /* A ring, so a white or transparent logo does not float loose -- several of
       these "photos" are wordmarks on no background. */
    border: 1px solid var(--qs-line); background: var(--qs-surface);
}
.qs-pamq-txt strong {
    display: block; font-size: 14px; font-weight: 700; color: var(--qs-navy);
    line-height: 1.25;
}
.qs-pamq-txt span { display: block; font-size: 12px; color: var(--qs-muted); margin-top: 1px; }
/* 136 of 478 authors have no usable photograph. The same tinted circle the
   review cards already use for the Google feed -- centred by line-height,
   matching .qs-rev-face, so no flex rule can be silently overridden the way it
   was there. */
.qs-pauthor-i {
    background: var(--qs-bg-blue); color: var(--qs-blue); border-color: transparent;
    font-size: 15px; font-weight: 700; line-height: 42px; text-align: center;
    letter-spacing: .5px;
}


/* THE CONTAINER FRAMES THE CARD, the card does not frame itself. `.qs-review`
   is a list item on a book page and a tile here; the only rules that differ are
   these, so the markup can stay one component instead of two.
   `.qs-preview*` was that second component and is gone. */
/* The book this review was of -- the publisher page used to show it; the
   card still offers it and the book page still does not need it. */
.qs-review-on { margin: 10px 0 0; font-size: 13px; color: var(--qs-muted); }
.qs-review-on a { color: var(--qs-blue); text-decoration: none; }
.qs-review-on a:hover { text-decoration: underline; }

/* SUBMISSIONS. The status is the headline because it is the one thing a writer
   is looking for; a closed house still gets the section, since "no" answers the
   question and saves them a letter. */
/* SUBMISSIONS AND CONTACT, one light box. It was the navy CTA band for a while
   -- reused from the home page, which is why it looked like the home page and
   not like this one: on an otherwise white page it read as a different site
   rather than as this page's most important block. Back to the module that was
   here before, with the contact links inside it, which is the half of the merge
   worth keeping.

   The open tint is the site's BG Blue rather than the pale mint it used to be:
   there was no other green on the page, so the box was the only thing wearing
   it. Closed stays neutral -- a house that is not reading manuscripts should
   not be shouting the fact in colour. */
.qs-psub { border: 1px solid var(--qs-line); border-radius: var(--qs-radius-card); padding: 26px 24px; }
.qs-psub--open   { border-color: #CFE0EC; background: var(--qs-bg-blue); }
.qs-psub--closed { background: #FAFAFA; }
.qs-psub-status { font-size: 18px; margin: 0 0 14px; color: var(--qs-navy); }
.qs-psub-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 16px; }
.qs-psub-facts dt { font-size: 13px; color: var(--qs-muted); text-transform: uppercase;
                    letter-spacing: .04em; align-self: baseline; }
.qs-psub-facts dd { margin: 0; font-size: 15px; color: var(--qs-ink); }
.qs-psub-guide-h { font-size: 15px; font-weight: 700; color: var(--qs-navy); margin: 20px 0 8px; }
.qs-psub-note { font-size: 15px; line-height: 1.7; color: var(--qs-ink-2, #4a4a4a); margin: 0; }
.qs-psub-note p { margin: 0 0 8px; }
.qs-psub-note p:last-child { margin-bottom: 0; }
/* The contact row sits under the submission facts, in the same box -- separated
   by a rule rather than by a second heading, because that separation is the
   only thing the old two-section version was really doing. */
/* STACKED, IN THE RIGHT-HAND COLUMN. Three buttons in a row under the facts
   read as a footer; in their own column they read as the next step. Full width
   so the three line up, and the WhatsApp one is the theme blue rather than
   brand green -- there was one green control on the page and it pulled the eye
   past everything the block was actually saying. */
.qs-pcontact { display: grid; gap: 10px; align-content: start; }
.qs-pcontact .qs-btn { width: 100%; text-align: center; }
.qs-psub .qs-sec-head2 { text-align: left; }
/* WhatsApp in its own colour: it is the number people in Pakistan actually
   answer, and it should not look like one option among three. */

/* The extra facet row (Newest / Top selling) sits under the shared strip. */
.qs-gfacets--more { margin-top: 8px; }

/* --- publisher page: conversion + motion ------------------------------------
   The two things this page is for, and the motion that supports them. Every
   duration below is chosen by how OFTEN the thing is seen, not by taste:
   a section entrance is met once a visit and can afford delight; a filter tab
   is met tens of times and must not animate at all. */

:root {
    /* The built-in CSS easings are too weak to read as intentional. */
    --qs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* The fold's two actions. A reader buys, a writer submits -- both were
   thousands of pixels down past a mission statement. */
.qs-ai-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }

/* The publisher's own words, now in the merged About section rather than folded
   into the intro. Same measure as .qs-ai-bio so a house and an author read at
   the same line length. */
/* LEFT, LIKE THE BOOK PAGE'S "About the Author" CARD -- heading and prose on
   the same left edge, which is what a reader is used to from every book on the
   site. It was centred-heading-over-left-text for a while and the two had
   centres 140px apart, so the block looked like it had slipped; centring the
   measure fixed the alignment and left it reading as a pull quote instead of a
   bio. Left fixes both.
   620px, not 760: at 16px that is about 77 characters a line against 95, and
   continuous prose is comfortable between 45 and 75. */
.qs-pabout-sec .qs-sec-head2 { text-align: left; }
.qs-pabout {
    font-family: var(--qs-font); font-size: 16px; line-height: 1.8;
    color: var(--qs-ink-2); max-width: 620px; margin: 0;
}
/* Bios arrive with their own markup, so the type has to reach inside it. */
.qs-pabout p { margin: 0 0 12px; font-size: inherit; line-height: inherit; color: inherit; }
.qs-pabout p:last-child { margin-bottom: 0; }

/* The rating spread. Bars, because the shape is the point. */

/* PRESS FEEDBACK. Nothing on this page felt heard. 160ms is the band where a
   press reads as instant without being invisible. */
.qs-btn { transition: transform 160ms var(--qs-ease-out), background 160ms ease, color 160ms ease; }
.qs-btn:active { transform: scale(0.97); }

/* HOVER IS A MOUSE IDEA. On a touch screen a tap fires hover and it sticks
   until something else is tapped, so every lift below is gated. */
@media (hover: hover) and (pointer: fine) {
    /* No lift on a pill: the row is inside a mask, so a translate on hover is
       clipped at the edges rather than raised. The track stopping IS the
       feedback -- the colour just confirms which one stopped under the cursor. */
    .qs-pamq-pill { transition: border-color 160ms var(--qs-ease-out); }
    .qs-pamq-pill:hover { border-color: var(--qs-blue); }
    .qs-pamq-pill:hover .qs-pamq-txt strong { color: var(--qs-blue); }
}

/* SECTION ENTRANCE. Seen once a visit, so it can afford to be noticed. Staggered
   50ms apart -- long enough to read as a cascade, short enough that the last
   section is not still arriving when the reader gets there. Never from scale(0):
   nothing in the world appears out of nothing. */
@media (prefers-reduced-motion: no-preference) {
    .qs-pev, .qs-pabout-sec, .qs-pamq, .qs-bookquotes .qs-quote-grid, .qs-spotrail, .qs-psub {
        animation: qs-rise 320ms var(--qs-ease-out) both;
    }
    .qs-pabout-sec { animation-delay: 50ms; }
    .qs-pamq { animation-delay: 100ms; }
    .qs-bookquotes .qs-quote-grid { animation-delay: 150ms; }
    .qs-spotrail { animation-delay: 200ms; }
}
@keyframes qs-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion means fewer and gentler, not none: opacity aids comprehension,
   movement is what causes sickness. */
@media (prefers-reduced-motion: reduce) {
    .qs-pev, .qs-pabout-sec, .qs-pamq, .qs-bookquotes .qs-quote-grid, .qs-spotrail, .qs-psub {
        animation: none;
    }
    /* A marquee is motion with no other purpose, so under this setting it stops
       being one -- the same state as a house too small to loop, which is why
       these five declarations are the same five as .qs-pamq--still above.
       They had already drifted: width, the centring margin and the pill's
       trailing margin were in one copy and not the other, so a reader with
       reduced motion got the row shoved left with a stray twelve pixels on the
       end. CSS cannot apply a class from inside a media query, so the copy
       stays.
       ponytail: two copies of one state, fold them into a shared selector list
       if a third "not running" case ever appears */
    .qs-pamq-track { animation: none; width: auto; }
    .qs-pamq-set { margin: 0 auto; }
    .qs-pamq-set--dup { display: none; }
    .qs-pamq-row { overflow-x: auto; overscroll-behavior-x: contain; }
    .qs-pamq-pill:last-child { margin-right: 0; }
    .qs-btn:active { transform: none; }
}


/* ---- assets/css/qs-numbers.css ---- */
/* ==========================================================================
   Home page: the blue "Numbers Shower" band over the bottom of the hero.

   Figma: 944 x 149, radius 8, padding 24/32, gap 40, fill #2B62B3.
   Each cell is 160px wide; the separators are 68px tall 0.5px rules.
   The band sits 79px inside the hero and overhangs it by 70px, which is what
   the negative margin below reproduces.
   ========================================================================== */
.qs-numbers-wrap {
    position: relative;
    z-index: 15;
    margin: -79px auto 0;
    padding: 0 15px;
}

.qs-numbers {
    max-width: 944px;
    margin: 0 auto;
    background: #2B62B3;
    border-radius: 8px;
    padding: 24px 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 40px;
    box-shadow: 0 8px 26px rgba(11, 45, 84, .22);
}

/* 160px is the Figma cell width, but the figures are live now — "Rs 1.1M" is
   wider than "~10K" ever was, so the cell grows rather than clipping. */
.qs-numbers-c {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 160px;
    text-align: center;
}

.qs-numbers-c strong {
    display: block;
    white-space: nowrap;
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.qs-numbers-c span {
    display: block;
    margin-top: 26px;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #FEFEFE;
}

.qs-numbers-sep {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 0;
    height: 68px;
    border-left: .5px solid #FEFEFE;
}

/* The slider dots sit at the bottom of the hero, which is exactly where the
   band now is. Lift them clear of it. */
#heroSlider .hero-indicators { bottom: 96px; }

@media (max-width: 991px) {
    .qs-numbers { gap: 24px; padding: 22px 20px; }
    .qs-numbers-c { -ms-flex: 0 0 130px; flex: 0 0 130px; }
    .qs-numbers-c strong { font-size: 38px; line-height: 46px; }
    .qs-numbers-c span { margin-top: 16px; }
}

/* Too tight to overlap on a phone — let it sit under the hero instead. */
@media (max-width: 767px) {
    .qs-numbers-wrap { margin-top: 18px; }
    .qs-numbers {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 22px 0;
        padding: 22px 12px;
    }
    .qs-numbers-c { -ms-flex: 0 0 50%; flex: 0 0 50%; }
    .qs-numbers-c strong { font-size: 30px; line-height: 38px; }
    .qs-numbers-c span { margin-top: 8px; font-size: 11px; }
    .qs-numbers-sep { display: none; }
    #heroSlider .hero-indicators { bottom: 24px; }
}


/* ---- assets/css/qs-home.css ---- */
/* ==========================================================================
   Shared layout constants for the author home page.

   Loaded once from index.php, ahead of the per-section stylesheets.
   ========================================================================== */

/* The 1040 content column moved to qissa-ui.css and now applies site-wide
   (every page except the store and the genre listings, which carry
   body.qs-wide). The per-section list that used to live here is redundant. */

/* The stat band is 944 wide in the Figma and sits inside the same column. */
.qs-numbers { max-width: 944px; }

/* The community strip renders its own <section> with no container of its own,
   so on this page it gets the same 1040 column as everything else. Without
   this it ran edge to edge and the cards were 410px instead of 335. */
.qs-community-wrap { max-width: 1040px; margin: 0 auto; padding: 0 15px; }


/* ---- assets/css/qs-intro.css ---- */
/* ==========================================================================
   Home page: intro line + the four service cards (Figma Frame 124 / 125).
   Content column is 1040px wide in the design, four columns with a 40px gap.
   ========================================================================== */
/* Scoped to the id on purpose. Legacy CSS has three #services rules
   (style.css:990, style.css:2483, custom.css:1186) left over from the old
   About Qissa block, and an id beats a class — a plain .qs-intro rule was
   being overridden down to 40px top / 20px bottom, which is why this section
   sat tighter than every other one on the page. */
#services.qs-intro { padding: 62px 0 68px; background: #fff; }

/* No container override here. The Figma column is 1040 of 1440, but every
   other section on this page uses the Bootstrap container, and a section that
   starts 50px further in than the one below it is the thing you actually
   notice. Match the page, not the artboard. */

.qs-intro-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 52px;
}

.qs-intro-head h2 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    margin: 0;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 800 !important;
    color: var(--qs-navy);
}

.qs-intro-head p {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    margin: 5px 0 0;
    font-size: 16px;
    line-height: 1.68;
    color: var(--qs-ink-2);
}

.qs-intro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px 48px;
}

.qs-intro-i {
    display: block;
    color: var(--qs-navy);
    margin-bottom: 18px;
}
.qs-intro-i svg { display: block; width: 34px; height: 34px; }

.qs-intro-c h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700 !important;
    color: var(--qs-blue);
}

.qs-intro-c p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--qs-ink-2);
    max-width: 320px;
}

.qs-intro-cta { text-align: center; margin: 50px 0 0; }
.qs-intro-cta i { margin-left: 7px; font-size: 12px; }

@media (max-width: 900px) {
    .qs-intro-head { display: block; }
    .qs-intro-head h2 { font-size: 25px; margin-bottom: 14px; }
    .qs-intro-head h2 br { display: none; }
    .qs-intro-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .qs-intro-c p { max-width: none; }
}

@media (max-width: 560px) {
    .qs-intro-grid { grid-template-columns: 1fr; }
}


/* ---- assets/css/qs-spot.css ---- */
/* ==========================================================================
   The featured author panel ("Author Spot" in the Figma), directly after the
   services section.

   Proportions follow the Figma: a ~1040x500 panel, not a strip. An earlier
   pass had it at nearly 4:1, which read as a rectangle rather than a card.
   ========================================================================== */
.qs-spot-sec { padding: 0 0 66px; background: #fff; }

.qs-spot { display: flex; gap: 56px; align-items: flex-start; background: var(--qs-navy);
           border-radius: var(--qs-radius-card); padding: 56px 60px; margin: 0;
           text-align: left; }

.qs-spot-body { flex: 1 1 auto; }
.qs-spot-mark { display: block; font-family: Georgia, serif; font-size: 64px; line-height: .6;
                color: rgba(255,255,255,.5); margin-bottom: 28px; }
.qs-spot-body p { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.92); margin: 0 0 18px; }

.qs-spot-who { display: flex; align-items: center; gap: 15px; margin-top: 34px; }
.qs-spot-who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
                   border: 2px solid rgba(255,255,255,.35); }
.qs-spot-who strong { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.qs-spot-who span { display: block; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 3px; }

/* THE COVER AT ITS OWN SHAPE. The frame used to be square with object-fit:
   contain, written when the one featured cover was square (624x624) and meant
   to fit a non-square one rather than stretch it. It fits them, and letterboxes
   them: a portrait cover got navy bars down both sides, which reads as a badly
   cropped image rather than as a book. Width fixed, height auto -- a square
   cover comes out 158x158 exactly as before, and a portrait one is simply
   taller. Nothing is stretched either way. */
.qs-spot-book { flex: 0 0 158px; text-align: center; }
.qs-spot-book img { display: block; width: 158px; height: auto;
                    border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.qs-spot-title { display: block; font-size: 13.5px; color: rgba(255,255,255,.85); margin-top: 14px;
                 line-height: 1.5; }
.qs-spot-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600;
                color: #fff; text-decoration: none; }
.qs-spot-link:hover, .qs-spot-link:focus { color: #fff; text-decoration: underline; }
.qs-spot-link i { margin-left: 6px; font-size: 12px; }

@media (max-width: 619px) {
    .qs-spot { display: block; padding: 28px 22px; }
    .qs-spot-book { margin: 26px auto 0; max-width: 168px; }
}

/* ==========================================================================
   The same navy panel, as a carousel — reader reviews on a publisher's page.
   Three panels rather than a list of six rows, because a review that size is
   looked at rather than skimmed past.
   ========================================================================== */
/* The rail is .qs-comm-rail and .qs-comm-track -- the press strip's, moved by
   bin/carousel_nav.php. It used to be a scroll-snap rail of its own with its
   own arrows, which looked like the site's control and behaved differently:
   no dots, no disabled ends. All that is left here is how wide a panel is,
   because that is the only thing about this carousel that is not the other
   one: one panel to a page, and no gap to leave between pages. */
.qs-comm-track.qs-spotrail-track { gap: 0; }
.qs-spotrail-track > .qs-spot { flex: 0 0 100%; }
/* And usually no photograph — 28% of accounts have none. Initials in the same
   56px circle the face uses, centred by line-height so no flex rule can be
   silently overridden. */
.qs-spot-face {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff;
    border: 2px solid rgba(255,255,255,.35);
    font-size: 18px; font-weight: 700; line-height: 56px; text-align: center;
}

@media (max-width: 767px) {
    .qs-spotrail-track > .qs-spot { padding: 32px 24px; gap: 26px; }
}


/* ---- assets/css/qs-offer.css ---- */
/* ==========================================================================
   The offer — author pitch, sits directly above the calculator.
   ========================================================================== */
.qs-offer { padding: 66px 0 58px; background: #fff; }
.qs-offer-head { text-align: center; max-width: 700px; margin: 0 auto 38px; }
.qs-offer-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--qs-blue); margin-bottom: 10px; }
.qs-offer-head h2 { font-size: 34px; font-weight: 800 !important; color: var(--qs-ink);
                    line-height: 1.32; margin: 0 0 18px; }

/* The hand-drawn ring around "book".

   An SVG rather than a border-radius, so it keeps the wobble and the overshoot
   of a word circled with a marker. It redraws on a loop — draw, hold, erase,
   pause — so it keeps working however long the reader sits on the section.

   The extra line-height on the h2 above is what stops the ring colliding with
   the line beneath it. */
.qs-ring { position: relative; display: inline-block; white-space: nowrap; }
.qs-ring > svg {
    /* currentColor in the path resolves here: gold ring, heading-coloured word. */
    color: var(--qs-star);
    position: absolute;
    left: -.30em;
    top: -.22em;
    width: calc(100% + .60em);
    height: calc(100% + .44em);
    overflow: visible;
    pointer-events: none;
}
.qs-ring > svg path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: qs-ring-draw 5s ease-in-out infinite;
}

@keyframes qs-ring-draw {
     0%  { stroke-dashoffset: 300; }
    22%  { stroke-dashoffset: 0; }     /* drawn */
    70%  { stroke-dashoffset: 0; }     /* held  */
    92%  { stroke-dashoffset: -300; }  /* erased, continuing the same direction */
   100%  { stroke-dashoffset: -300; }
}

/* Motion that loops forever is exactly what this setting is for: keep the ring,
   drop the animation. */
@media (prefers-reduced-motion: reduce) {
    .qs-ring > svg path { stroke-dashoffset: 0; animation: none; }
}
.qs-offer-head > p { font-size: 16.5px; color: var(--qs-ink-2); line-height: 1.7; margin: 0 auto;
                     max-width: 560px; }

/* The rating pill is shared now: qs_rating_pill() in bin/stars.php,
   .qs-rating-pill in qissa-ui.css. */

/* ── the alternating feature rows (Figma Frame 139) ──
   1040 wide, 80px between rows; each row is a copy column and an image
   column, flipping side each time. */
.qs-feature-list { display: flex; flex-direction: column; gap: 64px; }

.qs-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.qs-feature--flip .qs-feature-copy { order: 2; }

.qs-feature-copy h3 { font-size: 30px; font-weight: 800 !important; color: var(--qs-navy);
                      line-height: 1.25; margin: 0 0 16px; }
.qs-feature-copy p  { font-size: 15.5px; line-height: 1.75; color: var(--qs-ink-2); margin: 0;
                      max-width: 460px; }

/* What is actually included, as chips rather than described bullets. A chip is
   scanned in a glance; a bullet with a sentence under it has to be read, which
   is what made the earlier version of this section too heavy. */
.qs-chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap;
            gap: 8px; max-width: 480px; }
.qs-chips li { display: inline-flex; align-items: center; gap: 7px;
               background: var(--qs-bg-blue); color: var(--qs-ink-2);
               border-radius: 40px; padding: 7px 14px; font-size: 13px; line-height: 1.35; }
.qs-chips li i { color: var(--qs-blue); font-size: 12px; }

/* The differentiators — the things a competitor cannot claim — carry the navy
   fill so the eye lands on them first. */
.qs-chips li.is-hero { background: var(--qs-navy); color: #fff; font-weight: 600; }
.qs-chips li.is-hero i { color: #8FC2E4; }

/* Same elevation as a book cover in the store (.qs-book-cover in qissa-ui.css):
   a darker hairline outline plus a short drop, deepening and lifting 2px on
   hover. Copied deliberately rather than invented — a photograph on this page
   should sit at the same height off the paper as a cover in the bookstore. */
.qs-feature-img { position: relative; border-radius: 10px; overflow: hidden;
                  background: var(--qs-bg-blue);
                  box-shadow: 0 0 0 1px rgba(14,58,83,.14), 0 3px 8px rgba(14,58,83,.14),
                              0 8px 16px -8px rgba(14,58,83,.30);
                  transition: box-shadow .15s ease, transform .15s ease; }
.qs-feature-img:hover { transform: translateY(-2px);
                  box-shadow: 0 0 0 1px rgba(14,58,83,.18), 0 5px 12px rgba(14,58,83,.18),
                              0 14px 24px -8px rgba(14,58,83,.35); }
.qs-feature-img img { display: block; width: 100%; height: 300px; object-fit: cover;
                      transition: transform .5s cubic-bezier(.2,0,.2,1); }
.qs-feature-img:hover img { transform: scale(1.04); }

@media (max-width: 780px) {
    .qs-feature { grid-template-columns: 1fr; gap: 24px; }
    /* Image above the copy on every row — alternating sides is meaningless in
       one column, and a flipped row would put the picture below its heading
       on some rows and above on others. */
    .qs-feature-copy, .qs-feature--flip .qs-feature-copy { order: 2; }
    .qs-feature-img { order: 1; }
    .qs-feature-copy h3 { font-size: 24px; }
    .qs-feature-copy p { max-width: none; }
    .qs-feature-img img { height: 220px; }
}

/* The two bullet panels are gone — replaced by .qs-feature above. */

/* The three assurance boxes are gone — see the note in bin/home_offer.php for
   where each of them went. */
.qs-offer-cta { text-align: center; margin-top: 56px; }
.qs-offer-cta span { display: block; font-size: 13px; color: var(--qs-muted); margin-top: 11px; }

/* The guarantee, immediately under the button: the last thing read before the
   click is the reason it is safe to click. */
.qs-offer-guarantee { font-size: 14px !important; color: var(--qs-ink-2) !important;
                      font-weight: 600; margin-top: 16px !important; }
.qs-offer-guarantee i { color: var(--qs-blue); margin-right: 7px; }

@media (max-width: 900px) {
  .qs-offer-head h2 { font-size: 26px; }
}


/* ---- assets/css/qs-calculator.css ---- */
/* ==========================================================================
   Publishing cost calculator (home page)
   Loaded only where the calculator renders, so it stays out of every other page.
   ========================================================================== */
.qs-calc-sec { padding: 64px 0; background: var(--qs-bg-blue); }
.qs-calc-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.qs-calc-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--qs-blue); margin-bottom: 10px; }
.qs-calc-head h2 { font-size: 32px; font-weight: 800 !important; color: var(--qs-ink);
                   margin: 0 0 12px; line-height: 1.25; }
.qs-calc-head p { font-size: 16px; color: var(--qs-ink-2); line-height: 1.7; margin: 0; }

.qs-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.qs-calc-inputs, .qs-calc-result { background: #fff; border-radius: var(--qs-radius-card);
                                   padding: 28px; box-shadow: 0 2px 14px rgba(14,58,83,.07); }

.qs-calc-field { margin-bottom: 24px; }
.qs-calc-field:last-child { margin-bottom: 0; }
.qs-calc-field > label { display: flex; justify-content: space-between; align-items: baseline;
                         font-size: 14.5px; font-weight: 700; color: var(--qs-ink); margin-bottom: 10px; }
.qs-calc-field output { font-weight: 800; color: var(--qs-navy); font-size: 15px; }
.qs-calc-hint { display: block; font-size: 12.5px; color: var(--qs-muted); line-height: 1.6; margin-top: 7px; }

/* segmented control */
.qs-calc-seg { display: flex; gap: 6px; background: var(--qs-bg-blue); padding: 5px;
               border-radius: var(--qs-radius); }
.qs-calc-seg button { flex: 1; border: 0; background: none; padding: 11px 8px; border-radius: 6px;
                      font-family: var(--qs-font); font-size: 14px; font-weight: 500;
                      color: var(--qs-pill-text); cursor: pointer; transition: all .15s ease; }
.qs-calc-seg button.is-on { background: var(--qs-navy); color: #fff; font-weight: 600; }

/* sliders */
.qs-calc-field input[type=range] { width: 100%; -webkit-appearance: none; appearance: none;
                                   height: 6px; border-radius: 20px; background: var(--qs-bg-blue); outline: none; }
.qs-calc-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; border-radius: 50%; background: var(--qs-navy); cursor: pointer;
    border: 3px solid #fff; box-shadow: 0 1px 5px rgba(14,58,83,.4); }
.qs-calc-field input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
    background: var(--qs-navy); cursor: pointer; border: 3px solid #fff; }

.qs-calc-check { display: flex !important; align-items: flex-start; gap: 10px; cursor: pointer;
                 font-weight: 500 !important; justify-content: flex-start !important; }
/* The legacy stylesheet hides native checkboxes site-wide so it can draw its own
   replacements. Those replacements do not exist inside this component, so the
   box vanished entirely and the two most important questions on the calculator
   looked like plain headings. Force the real control back. */
.qs-calc-check input[type=checkbox] {
    display: inline-block !important;
    -webkit-appearance: checkbox !important; appearance: checkbox !important;
    position: static !important; opacity: 1 !important;
    margin: 3px 0 0 !important; width: 17px !important; height: 17px !important;
    accent-color: var(--qs-navy); flex: 0 0 auto; }

.qs-calc-more { border: 0; background: none; padding: 0; font-family: var(--qs-font); font-size: 13.5px;
                font-weight: 600; color: var(--qs-blue); cursor: pointer; }
.qs-calc-more i { font-size: 10px; transition: transform .15s ease; }
.qs-calc-more.is-open i { transform: rotate(180deg); }
.qs-calc-morebox { margin-top: 14px; display: grid; gap: 12px; }

/* result panel */
.qs-calc-result { min-height: 320px; }
.qs-calc-loading { color: var(--qs-muted); font-size: 14px; text-align: center; padding: 60px 0; }
.qs-calc-total { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--qs-line); }
.qs-calc-total-lbl { display: block; font-size: 13px; color: var(--qs-muted); margin-bottom: 6px; }
.qs-calc-total-num { display: block; font-size: 42px; font-weight: 800; color: var(--qs-navy); line-height: 1.1; }
.qs-calc-total-sub { display: block; font-size: 13px; color: var(--qs-muted); margin-top: 6px; }

.qs-calc-offer { margin: 16px 0; padding: 13px 16px; background: #FFF6E5; border: 1px solid #F4D9A0;
                 border-radius: var(--qs-radius); text-align: center; }
.qs-calc-offer strong { display: block; font-size: 14.5px; color: #8A5A00; }
.qs-calc-offer span { display: block; font-size: 13px; color: #A87B2E; margin-top: 3px; }

.qs-calc-lines { list-style: none; padding: 0; margin: 18px 0 0; }
.qs-calc-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
                    border-bottom: 1px solid var(--qs-line); font-size: 14px; }
.qs-calc-lines .l { color: var(--qs-ink); font-weight: 500; }
.qs-calc-lines .l em { display: block; font-style: normal; font-size: 12px; color: var(--qs-muted);
                       font-weight: 400; margin-top: 3px; line-height: 1.5; }
.qs-calc-lines .a { color: var(--qs-navy); font-weight: 700; white-space: nowrap; }

.qs-calc-note { font-size: 13px; color: var(--qs-ink-2); line-height: 1.65; margin: 14px 0 0;
                padding: 12px 14px; background: var(--qs-bg-blue); border-radius: var(--qs-radius); }
.qs-calc-qual { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--qs-blue);
                background: #F6FAFD; border-radius: 0 var(--qs-radius) var(--qs-radius) 0; }
.qs-calc-qual strong { display: block; font-size: 14px; color: var(--qs-navy); margin-bottom: 4px; }
.qs-calc-qual span { font-size: 13px; color: var(--qs-ink-2); line-height: 1.65; }

.qs-calc-sugg { margin-top: 20px; }
.qs-calc-sugg h4 { font-size: 14px; font-weight: 700 !important; color: var(--qs-ink); margin: 0 0 10px; }
.qs-calc-sugg-i { padding: 12px 14px; border: 1px solid var(--qs-line); border-radius: var(--qs-radius);
                  margin-bottom: 9px; }
.qs-calc-sugg-i .t { display: block; font-size: 13.5px; font-weight: 600; color: var(--qs-ink); }
.qs-calc-sugg-i .b { display: block; font-size: 12.5px; color: var(--qs-muted); line-height: 1.6; margin: 4px 0 7px; }
.qs-calc-sugg-i .p { font-size: 14px; font-weight: 700; color: var(--qs-navy); }
.qs-calc-sugg-i .p em { font-style: normal; font-size: 12px; font-weight: 500; color: #2E7D32; margin-left: 6px; }

.qs-calc-spec { font-size: 11.5px; color: var(--qs-muted); text-align: center; margin: 18px 0 0; line-height: 1.6; }
.qs-calc-cta { display: grid; gap: 9px; margin-top: 18px; }
.qs-calc-ref { font-size: 11.5px; color: var(--qs-muted); text-align: center; margin: 12px 0 0; }
.qs-calc-foot { text-align: center; font-size: 13px; color: var(--qs-muted); margin: 26px 0 0; }

.qs-calc-custom { text-align: center; padding: 18px 0; }
.qs-calc-custom h3 { font-size: 20px; font-weight: 700 !important; color: var(--qs-ink); margin: 0 0 10px; }
.qs-calc-custom p { font-size: 14px; color: var(--qs-ink-2); line-height: 1.7; }
.qs-calc-custom ul { list-style: none; padding: 0; margin: 14px 0 20px; }
.qs-calc-custom li { font-size: 13.5px; color: var(--qs-pill-text); background: var(--qs-bg-blue);
                     padding: 9px 14px; border-radius: var(--qs-radius); margin-bottom: 7px; }

/* ── print-run comparison: what the package covers vs what they picked ── */
.qs-calc-vol { margin-top: 18px; padding: 16px; background: #F6FAFD;
               border: 1px solid var(--qs-line); border-radius: var(--qs-radius); }
.qs-calc-vol h4 { font-size: 13.5px; font-weight: 700 !important; color: var(--qs-ink); margin: 0 0 12px; }

.qs-calc-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qs-calc-cmp-c { background: #fff; border: 1px solid var(--qs-line); border-radius: var(--qs-radius);
                 padding: 14px; text-align: center; }
.qs-calc-cmp-c.is-sel { border-color: var(--qs-navy); box-shadow: 0 0 0 1px var(--qs-navy); }
.qs-calc-cmp-c .n    { display: block; font-size: 15px; font-weight: 700; color: var(--qs-ink); }
.qs-calc-cmp-c .tag  { display: block; font-size: 11px; color: var(--qs-muted); margin: 2px 0 10px;
                       text-transform: uppercase; letter-spacing: .05em; }
.qs-calc-cmp-c.is-sel .tag { color: var(--qs-blue); font-weight: 600; }
.qs-calc-cmp-c .tot  { display: block; font-size: 20px; font-weight: 800; color: var(--qs-navy); line-height: 1.2; }
.qs-calc-cmp-c .each { display: block; font-size: 12.5px; color: var(--qs-ink-2); margin-top: 5px; }
.qs-calc-cmp-c .meth { display: block; font-size: 11px; color: var(--qs-muted); margin-top: 6px; }

.qs-calc-cmp-win { background: #F1F8F2; border: 1px solid #C8E6C9; border-radius: var(--qs-radius);
                   padding: 12px 14px; margin-top: 10px; text-align: center; }
.qs-calc-cmp-win .save { display: block; font-size: 17px; font-weight: 800; color: #2E7D32; }
.qs-calc-cmp-win .why  { display: block; font-size: 12.5px; color: #3B6E3E; line-height: 1.6; margin-top: 5px; }

/* what "listed on the store" actually includes */
.qs-calc-dist { margin-top: 20px; padding: 18px; background: var(--qs-navy);
                border-radius: var(--qs-radius); }
.qs-calc-dist-claim { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.4; margin: 0 0 7px; }
.qs-calc-dist-sub { font-size: 12.5px; color: #B8CEDC; line-height: 1.6; margin: 0 0 16px;
                    padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.qs-calc-dist h4 { font-size: 12px; font-weight: 700 !important; color: #7FB2D4; margin: 0 0 10px;
                   text-transform: uppercase; letter-spacing: .07em; }
.qs-calc-dist ul { list-style: none; padding: 0; margin: 0; }
/* Scannable, one line each. A paragraph per feature does not get read on a
   pricing panel — the eye is already on the number. */
.qs-calc-dist li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0;
                   font-size: 13px; color: #E2ECF3; line-height: 1.55; }
.qs-calc-dist li i { color: #7FB2D4; font-size: 13px; width: 16px; text-align: center; margin-top: 3px;
                     flex: 0 0 auto; }

/* readership advice */
.qs-calc-advice { margin-top: 12px; padding: 12px 14px; border-radius: var(--qs-radius);
                  font-size: 13px; line-height: 1.65; }
.qs-calc-advice.is-warn { background: #FFF6E5; border: 1px solid #F4D9A0; color: #8A5A00; }
.qs-calc-advice.is-good { background: #F1F8F2; border: 1px solid #C8E6C9; color: #2E7D32; }

/* contact gate */
.qs-calc-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1080;
                 background: rgba(14,58,83,.55); display: flex; align-items: center;
                 justify-content: center; padding: 20px; }
.qs-calc-modal[hidden] { display: none; }
.qs-calc-modal-box { position: relative; background: #fff; border-radius: var(--qs-radius-card);
                     padding: 32px; width: 100%; max-width: 430px; max-height: 92vh; overflow-y: auto; }
.qs-calc-x { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 26px;
             line-height: 1; color: var(--qs-muted); cursor: pointer; }
.qs-calc-modal-box h3 { font-size: 21px; font-weight: 800 !important; color: var(--qs-ink); margin: 0 0 6px; }
.qs-calc-modal-sub { font-size: 14px; color: var(--qs-ink-2); margin: 0 0 20px; line-height: 1.6; }
.qs-calc-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--qs-ink); margin: 0 0 6px; }
.qs-calc-lbl small { font-weight: 400; color: var(--qs-muted); }
.qs-calc-input { width: 100%; padding: 12px 14px; border: 1px solid var(--qs-field-border);
                 border-radius: var(--qs-radius); font-family: var(--qs-font); font-size: 15px;
                 margin-bottom: 14px; }
.qs-calc-input:focus { outline: none; border-color: var(--qs-blue); }
.qs-calc-req { font-size: 12.5px; color: var(--qs-muted); margin: 0 0 16px; }
.qs-calc-err { font-size: 13px; color: #a94442; background: #FCF0F0; padding: 10px 12px;
               border-radius: var(--qs-radius); margin: 0 0 14px; }
.qs-calc-privacy { font-size: 11.5px; color: var(--qs-muted); text-align: center; margin: 12px 0 0; }
.qs-calc-done { text-align: center; padding: 14px 0; }
.qs-calc-done i { font-size: 42px; color: #2E7D32; }
.qs-calc-done h3 { margin: 14px 0 8px; }
.qs-calc-done p { font-size: 14px; color: var(--qs-ink-2); line-height: 1.7; margin-bottom: 20px; }

@media (max-width: 900px) {
  .qs-calc { grid-template-columns: 1fr; }
  .qs-calc-head h2 { font-size: 25px; }
  .qs-calc-total-num { font-size: 34px; }
  .qs-calc-inputs, .qs-calc-result { padding: 22px; }
}
@media (max-width: 520px) {
  .qs-calc-cmp { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Royalty calculator (royalty-calculator.php)

   Reuses the cost calculator's shell — .qs-calc-sec / -inputs / -result /
   -field / -total-* — so the two pages read as one pair. Only the pieces the
   cost calculator has no equivalent for live here.
   ───────────────────────────────────────────────────────────────────────── */

/* The price scale. The floor marker is the argument this page makes: a number
   on its own says nothing, a number sitting above a marked floor says
   everything. Positioned in JS as a % of the slider's max. */
.qs-roy-scale { position: relative; height: 42px; margin: 2px 0 4px; }
.qs-roy-mark  { position: absolute; top: 0; transform: translateX(-50%);
                display: flex; flex-direction: column; align-items: center; gap: 2px;
                font-size: 11px; white-space: nowrap; pointer-events: none; }
.qs-roy-mark i { display: block; width: 2px; height: 9px; border-radius: 1px; }
.qs-roy-mark b { font-weight: 700; letter-spacing: .02em; line-height: 1.2; text-align: center; }
.qs-roy-mark--floor i { background: #C0392B; }
.qs-roy-mark--floor b { color: #C0392B; }
.qs-roy-mark--rec   i { background: #1D9E75; }
.qs-roy-mark--rec   b { color: #1D9E75; }

/* Verdict banner. Three tones, because "below cost" and "thin" are different
   conversations and a single warning colour flattens them. */
.qs-roy-state { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px;
                margin: 16px 0; border-left: 3px solid; }
.qs-roy-state strong { font-size: 14.5px; }
.qs-roy-state span   { font-size: 13.5px; line-height: 1.6; }
.qs-roy-state--good { background: #eef8f3; border-color: #1D9E75; color: #0F6E56; }
.qs-roy-state--warn { background: #fdf6e9; border-color: #EF9F27; color: #854F0B; }
.qs-roy-state--bad  { background: #fdeeec; border-color: #C0392B; color: #8e2b20; }

.qs-roy-rows { display: grid; gap: 1px; background: var(--qs-line); border-radius: 8px; overflow: hidden; }
.qs-roy-row  { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
               background: #fff; padding: 11px 14px; font-size: 14px; }
.qs-roy-row b { font-weight: 700; color: var(--qs-navy); white-space: nowrap; }
.qs-roy-row.is-muted, .qs-roy-row.is-muted b { color: var(--qs-muted); font-weight: 600; }

/* Break-even: the number authors actually came here for. */
.qs-roy-be { display: flex; justify-content: space-between; align-items: center; gap: 14px;
             flex-wrap: wrap; margin-top: 16px; padding: 14px 16px;
             background: var(--qs-navy); border-radius: 10px; }
.qs-roy-be-lbl { color: rgba(255,255,255,.82); font-size: 13px; }
.qs-roy-be-num { color: #fff; font-size: 21px; font-weight: 300; }
.qs-roy-be-num b { font-weight: 700; }
.qs-roy-never { color: #ffb4a8; font-size: 15px; font-weight: 600; }

.qs-roy-ladder { margin-top: 18px; }
.qs-roy-ladder-h { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
                   color: var(--qs-muted); margin-bottom: 8px; font-weight: 700; }
.qs-roy-ladder table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qs-roy-ladder th { text-align: left; font-weight: 600; color: var(--qs-muted); font-size: 12px;
                    padding: 0 8px 6px 0; border-bottom: 1px solid var(--qs-line); }
.qs-roy-ladder th:last-child, .qs-roy-ladder td:last-child { text-align: right; padding-right: 0; }
.qs-roy-ladder td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--qs-line); }
.qs-roy-ladder tr.is-current td { font-weight: 700; color: var(--qs-navy); }

.qs-roy-explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qs-roy-ex { background: #fff; border: 1px solid var(--qs-line); border-radius: var(--qs-radius-card); padding: 22px; }
.qs-roy-ex h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--qs-navy); }
.qs-roy-ex p  { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }
.qs-roy-note  { color: var(--qs-muted); font-size: 13px !important; margin: 0 !important; }

@media (max-width: 900px) { .qs-roy-explain { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .qs-roy-be { flex-direction: column; align-items: flex-start; gap: 4px; }
  .qs-roy-mark b { font-size: 10px; }
}

/* Run-size table. Replaced a single "copies to break even" figure, which
   quietly argued that the 50-copy launch run was a business plan. Losses are
   coloured and signed because a number an author skims past is a number that
   did not do its job. */
.qs-roy-vol { margin-top: 18px; }
.qs-roy-vol-h { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
                color: var(--qs-muted); margin-bottom: 8px; font-weight: 700; }
.qs-roy-vol table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qs-roy-vol th { text-align: left; font-weight: 600; color: var(--qs-muted); font-size: 12px;
                 padding: 0 8px 6px 0; border-bottom: 1px solid var(--qs-line); }
.qs-roy-vol th:last-child, .qs-roy-vol td:last-child { text-align: right; padding-right: 0; }
.qs-roy-vol td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--qs-line); }
.qs-roy-vol .qs-roy-net { font-weight: 700; white-space: nowrap; }
.qs-roy-vol tr.is-up   .qs-roy-net { color: #0F6E56; }
.qs-roy-vol tr.is-down .qs-roy-net { color: #C0392B; }
.qs-roy-runtag { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .04em; color: var(--qs-navy); background: var(--qs-line);
                 border-radius: 4px; padding: 2px 6px; margin-left: 6px; }
.qs-roy-vol-note { font-size: 13px; line-height: 1.65; color: var(--qs-muted); margin: 10px 0 0; }
.qs-roy-vol-note b { color: var(--qs-navy); }
.qs-roy-instock { font-style: normal; font-size: 11px; font-weight: 700; color: #1D9E75;
                  background: #eef8f3; border-radius: 4px; padding: 1px 5px; margin-left: 5px; }

/* Stage name under the copy count in the money table — the same pairing the
   home-page roadmap makes, so a row reading as a loss still reads as a step. */
.qs-roy-ms { display: block; font-size: 11.5px; color: var(--qs-muted); font-weight: 500; margin-top: 1px; }

/* ─────────────────────────────────────────────────────────────────────────
   The author's road (bin/home_roadmap.php)
   Copy counts only — no prices. It sits directly under the pricing calculator
   and must not read as a second pricing table.
   ───────────────────────────────────────────────────────────────────────── */
.qs-road-sec { padding: 56px 0 8px; }
.qs-road { list-style: none; margin: 34px 0 0; padding: 0;
           display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.qs-road-step { position: relative; padding: 0 14px; text-align: center; }

/* The rail runs BEHIND the numbers and stops at the first step, so the line
   reads as a road travelled rather than a border around each box. */
.qs-road-rail { position: absolute; top: 27px; left: -50%; width: 100%; height: 2px;
                background: var(--qs-line); z-index: 0; }
.qs-road-step.is-first .qs-road-rail { display: none; }

.qs-road-num { position: relative; z-index: 1; display: inline-flex; align-items: center;
               justify-content: center; min-width: 56px; height: 56px; padding: 0 12px;
               border-radius: 999px; background: var(--qs-navy); color: #fff;
               font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.qs-road-step:last-child .qs-road-num { background: #2F6FA6; }

.qs-road-body h3 { font-size: 15.5px; font-weight: 700; color: var(--qs-navy);
                   margin: 16px 0 7px; line-height: 1.35; }
.qs-road-body p  { font-size: 13.5px; line-height: 1.65; color: var(--qs-muted); margin: 0; }

.qs-road-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px;
               flex-wrap: wrap; margin-top: 44px; padding: 26px 30px;
               background: #fff; border: 1px solid var(--qs-line); border-radius: var(--qs-radius-card); }
.qs-road-cta h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--qs-navy); }
.qs-road-cta p  { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--qs-muted); max-width: 620px; }
.qs-road-cta .qs-btn { flex: 0 0 auto; }

@media (max-width: 980px) {
  /* Vertical below the fold width: five columns squeeze the copy into slivers
     long before the numbers stop fitting. */
  .qs-road { grid-template-columns: 1fr; gap: 22px; }
  .qs-road-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px;
                  text-align: left; padding: 0; align-items: start; }
  .qs-road-rail { top: 56px; left: 27px; width: 2px; height: calc(100% + 22px); }
  .qs-road-step.is-first .qs-road-rail { display: block; }
  .qs-road-step:last-child .qs-road-rail { display: none; }
  .qs-road-body h3 { margin: 4px 0 6px; }
}
@media (max-width: 520px) {
  .qs-road-cta { padding: 22px; }
  .qs-road-cta .qs-btn { width: 100%; text-align: center; }
}

/* Recovery mixer: ratio-locked counters + the headline equation. */
.qs-roy-ratiotag { float: right; font-size: 11px; font-weight: 600; color: var(--qs-muted);
                   background: var(--qs-line); border-radius: 4px; padding: 2px 7px; }
.qs-roy-mixrow { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center;
                 gap: 10px; margin-bottom: 8px; }
.qs-roy-mixrow input[type=range] { margin: 0; }
.qs-roy-mixlbl { font-size: 13px; color: var(--qs-muted); }
.qs-roy-mixrow output { font-size: 14px; font-weight: 700; color: var(--qs-navy); text-align: right; }

.qs-roy-mix { margin-bottom: 18px; }
.qs-roy-eq { background: var(--qs-navy); color: #fff; border-radius: 10px;
             padding: 14px 16px; font-size: 15px; line-height: 1.6; }
.qs-roy-eq b { font-weight: 700; font-size: 19px; }
.qs-roy-eq.is-bad { background: #C0392B; }

.qs-roy-bar { height: 8px; border-radius: 99px; background: var(--qs-line); overflow: hidden; margin: 12px 0 7px; }
.qs-roy-bar i { display: block; height: 100%; background: #2F6FA6; transition: width .18s ease; }
.qs-roy-bar i.is-done { background: #1D9E75; }
.qs-roy-mixsum { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--qs-muted); }
.qs-roy-mixsum b.is-up   { color: #0F6E56; }
.qs-roy-mixsum b.is-down { color: #C0392B; }

@media (max-width: 520px) { .qs-roy-mixrow { grid-template-columns: 80px 1fr 46px; } }

/* Recommendation card. Amber until the counter reaches it, green once it does —
   the state change is the reward for moving the slider to the target. */
.qs-roy-eq-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                 opacity: .75; margin-bottom: 5px; font-weight: 700; }
.qs-roy-eq.is-ok  { background: #0F6E56; }
.qs-roy-snap { margin-top: 11px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
               color: #fff; font-family: var(--qs-font); font-size: 13px; font-weight: 600;
               padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.qs-roy-snap:hover { background: rgba(255,255,255,.24); }

/* Scoreboard: earnings against package cost, directly under the sold counter.
   The conclusion sits with the control that changes it; the result panel holds
   the working. */
.qs-roy-scoreboard { display: flex; align-items: stretch; gap: 10px; margin: 16px 0 6px; }
.qs-roy-score { flex: 1; background: #f4f7f9; border-radius: 10px; padding: 12px 14px;
                display: grid; gap: 3px; align-content: center; }
.qs-roy-score-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
                    color: var(--qs-muted); font-weight: 700; }
.qs-roy-score b { font-size: 21px; font-weight: 700; color: var(--qs-navy); line-height: 1.15; }
.qs-roy-score-vs { align-self: center; font-size: 12px; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .05em; color: var(--qs-muted); }
.qs-roy-scoreboard.is-up   .qs-roy-score:first-child { background: #eef8f3; }
.qs-roy-scoreboard.is-up   .qs-roy-score:first-child b { color: #0F6E56; }
.qs-roy-scoreboard.is-down .qs-roy-score:first-child { background: #fdeeec; }
.qs-roy-scoreboard.is-down .qs-roy-score:first-child b { color: #C0392B; }
.qs-roy-score-verdict { font-size: 13px; color: var(--qs-muted); margin: 0; }
@media (max-width: 520px) {
  .qs-roy-scoreboard { flex-direction: column; gap: 6px; }
  .qs-roy-score-vs { align-self: flex-start; }
}


/* ---- assets/css/qs-process.css ---- */
/* ==========================================================================
   "How to Get Published" — four-step panel, following the Figma component.
   Dark Blue #094977, active step expanded above, four step cards below.
   ========================================================================== */
.qs-gp { padding: 60px 0; background: #fff; }
.qs-gp-panel { background: #094977; border-radius: var(--qs-radius-card); padding: 40px 44px 34px; }

.qs-gp-top { display: flex; align-items: center; justify-content: space-between; gap: 20px;
             margin-bottom: 26px; }
.qs-gp-top h2 { font-size: 27px; font-weight: 800 !important; color: #fff; margin: 0; line-height: 1.25; }
.qs-gp-link { font-size: 14px; font-weight: 600; color: #A9CBE3; text-decoration: none;
              white-space: nowrap; }
.qs-gp-link:hover { color: #fff; text-decoration: none; }
.qs-gp-link i { font-size: 12px; margin-left: 5px; }

/* the expanded step */
.qs-gp-detail { display: none; gap: 20px; align-items: flex-start; margin-bottom: 30px;
                min-height: 118px; }
.qs-gp-detail.is-on { display: flex; }
.qs-gp-num { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: #fff;
             color: #094977; font-size: 22px; font-weight: 800; display: flex; align-items: center;
             justify-content: center; }
.qs-gp-detail h3 { font-size: 21px; font-weight: 700 !important; color: #fff; margin: 0 0 8px; }
.qs-gp-detail p { font-size: 15px; color: #C7DCEA; line-height: 1.7; margin: 0; max-width: 720px; }

/* the four step cards */
.qs-gp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.qs-gp-card { position: relative; text-align: left; border: 0; cursor: pointer;
              background: rgba(255,255,255,.16); border-radius: var(--qs-radius);
              padding: 17px 18px 40px; font-family: var(--qs-font);
              transition: background .18s ease, transform .18s ease; }
.qs-gp-card:hover { background: rgba(255,255,255,.26); }
.qs-gp-card.is-on { background: #fff; transform: translateY(-2px); }
.qs-gp-card strong { display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.qs-gp-card span { display: block; font-size: 12.5px; color: #C7DCEA; line-height: 1.55; }
.qs-gp-card.is-on strong { color: #0E3A53; }
.qs-gp-card.is-on span { color: var(--qs-ink-2); }

.qs-gp-badge { position: absolute; right: 14px; bottom: 13px; width: 25px; height: 25px;
               border-radius: 50%; background: #0E3A53; color: #fff; font-style: normal;
               font-size: 12px; font-weight: 700; display: flex; align-items: center;
               justify-content: center; }
.qs-gp-card.is-on .qs-gp-badge { background: #094977; }

@media (max-width: 900px) {
  .qs-gp-panel { padding: 28px 22px 24px; }
  .qs-gp-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .qs-gp-top h2 { font-size: 23px; }
  .qs-gp-cards { grid-template-columns: repeat(2, 1fr); }
  .qs-gp-detail { min-height: 0; }
}
@media (max-width: 520px) {
  .qs-gp-cards { grid-template-columns: 1fr; }
  .qs-gp-card { padding-bottom: 17px; }
  .qs-gp-badge { top: 15px; bottom: auto; }
}


/* ---- assets/css/qs-sections.css ---- */
/* ==========================================================================
   Home page: reviews, events, team, FAQ.
   ========================================================================== */
/* display:block is not the default here — a legacy rule turns this into a flex
   row, which lays the eyebrow, heading and blurb out side by side. */
.qs-sec-head { display: block; text-align: center; max-width: 660px; margin: 0 auto 34px; }
.qs-sec-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--qs-blue); margin-bottom: 10px; }
.qs-sec-head h2 { font-size: 31px; font-weight: 800 !important; color: var(--qs-ink);
                  line-height: 1.25; margin: 0 0 12px; }
.qs-sec-head p { font-size: 15.5px; color: var(--qs-ink-2); line-height: 1.7; margin: 0; }

/* ── reviews ── */
.qs-revs { padding: 62px 0; background: var(--qs-bg-blue); }


/* ── filter pills ── */
.qs-revs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.qs-revs-tab { border: 1px solid #BFD5E4; background: #fff; color: var(--qs-blue); border-radius: 40px;
               padding: 9px 20px; font-size: 13.5px; font-weight: 600; cursor: pointer;
               transition: background .2s, color .2s, border-color .2s; }
.qs-revs-tab:hover { border-color: var(--qs-blue); }
.qs-revs-tab.is-on { background: var(--qs-navy); border-color: var(--qs-navy); color: #fff; }

/* ── the review cards ── */
.qs-revs-rail { overflow: hidden; }
.qs-revs-track { display: flex; gap: 18px; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.qs-rev { flex: 0 0 calc((100% - 36px) / 3); background: #fff; border-radius: var(--qs-radius-card);
          padding: 22px; margin: 0; box-shadow: 0 2px 12px rgba(14,58,83,.06);
          display: flex; flex-direction: column; }
.qs-rev blockquote { flex: 1 1 auto; }
.qs-rev-src { display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 600;
              color: var(--qs-blue); text-decoration: none; }
.qs-rev-src:hover, .qs-rev-src:focus { color: var(--qs-blue); text-decoration: underline; }
.qs-rev-src i { font-size: 10px; margin-left: 4px; }
.qs-rev.is-hidden { display: none; }
/* Legacy style.css puts a 2px black border-top on every <header>. */
.qs-rev-who { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; border: 0; padding: 0; }
/* Centred by line-height rather than flex: a legacy rule forces display:block
   on this span, so flex centring silently does nothing. */
.qs-rev-face { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
               background: var(--qs-bg-blue); color: var(--qs-blue);
               font-size: 13px; font-weight: 700; line-height: 38px; text-align: center; }
.qs-rev-face--img { object-fit: cover; padding: 0; }
.qs-rev-who strong { display: block; font-size: 14px; font-weight: 700; color: var(--qs-ink); }
.qs-rev-who span { display: block; font-size: 12.5px; color: var(--qs-muted); margin-top: 1px;
                   font-style: italic; }
.qs-rev blockquote { border: 0; padding: 0; margin: 0; font-size: 14px; color: var(--qs-ink-2);
                     line-height: 1.7; }
.qs-rev-mark { float: left; font-family: Georgia, serif; font-size: 30px; line-height: .9;
               color: var(--qs-blue); margin: 2px 8px 0 0; }

/* ── arrows and dots ── */
.qs-revs-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.qs-revs-arrow { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--qs-navy);
                 color: #fff; font-size: 13px; cursor: pointer; transition: opacity .2s; }
.qs-revs-arrow:disabled { opacity: .28; cursor: default; }
.qs-revs-dots { display: inline-flex; align-items: center; gap: 7px; }
.qs-revs-dot { width: 8px; height: 8px; border-radius: 50%; background: #BFD5E4; cursor: pointer;
               transition: width .25s, background .25s; }
.qs-revs-dot.is-on { width: 26px; border-radius: 5px; background: var(--qs-navy); }

.qs-revs-more { text-align: center; margin: 22px 0 0; }
.qs-revs-more a { font-size: 14px; font-weight: 600; color: var(--qs-blue); text-decoration: none; }
.qs-revs-more a:hover { text-decoration: underline; }
.qs-revs-more i { font-size: 11px; margin-left: 4px; }

/* ── as seen in ── */
.qs-press { padding: 40px 0 44px; background: #fff; border-bottom: 1px solid var(--qs-line); }
.qs-press-lead { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--qs-muted); margin: 0 0 26px; }
.qs-press-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
                align-items: center; justify-content: center; gap: 44px; }
/* Every logo file is a padded 200x150 canvas, so size the box and let the
   artwork sit inside it rather than sizing the images themselves. */
.qs-press-row li { margin: 0; width: 132px; }
.qs-press-row img { display: block; width: 100%; height: 62px; object-fit: contain;
                    opacity: .55; filter: grayscale(100%);
                    transition: opacity .25s, filter .25s; }
.qs-press-row a:hover img { opacity: 1; filter: grayscale(0); }

/* ── events ──
   The Figma's Event Template: a vertical list of 834x96 rows, each with an
   accent bar, a MAR/08/TUE date block, a square thumbnail, the copy, and a
   Learn more button pushed to the right. */
.qs-evt { padding: 62px 0 68px; background: #fff; }

.qs-evt-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 28px; }
.qs-evt-tab { border: 1px solid #BFD5E4; background: #fff; color: var(--qs-blue); border-radius: 40px;
              padding: 10px 26px; font-size: 14px; font-weight: 600; cursor: pointer;
              transition: background .2s, color .2s, border-color .2s; }
.qs-evt-tab:hover { border-color: var(--qs-blue); }
.qs-evt-tab.is-on { background: var(--qs-navy); border-color: var(--qs-navy); color: #fff; }

.qs-evt-list { max-width: 834px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.qs-evt-row { display: flex; align-items: stretch; gap: 20px; min-height: 96px;
              border: 1px solid var(--qs-line); border-left: 4px solid var(--qs-navy);
              border-radius: 6px; overflow: hidden; background: #fff; }
.qs-evt-row[hidden] { display: none; }

.qs-evt-when { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center;
               justify-content: center; padding: 12px 0; text-align: center; }
.qs-evt-mon, .qs-evt-dow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
                           text-transform: uppercase; color: var(--qs-muted); }
.qs-evt-when strong { display: block; font-size: 27px; font-weight: 800; line-height: 1.15;
                      color: var(--qs-navy); }
.qs-evt-when strong.qs-evt-tba { font-size: 19px; letter-spacing: .02em; }
.qs-evt-dow { margin-top: 2px; }

.qs-evt-thumb { flex: 0 0 96px; align-self: stretch; background: var(--qs-bg-blue); }
.qs-evt-thumb img { width: 96px; height: 100%; object-fit: cover; display: block; }

.qs-evt-copy { flex: 1 1 auto; min-width: 0; padding: 16px 0; }
.qs-evt-copy h3 { font-size: 17px; font-weight: 700 !important; color: var(--qs-ink); margin: 0 0 5px; }
.qs-evt-copy p { font-size: 13.5px; color: var(--qs-ink-2); line-height: 1.6; margin: 0; }

/* The Figma's Learn more is an outlined pill; there is no ghost variant in the
   design system, so it is defined here rather than added globally for one use. */
.qs-evt-act { flex: 0 0 auto; display: flex; align-items: center; padding: 0 20px 0 8px; }
.qs-evt-act .qs-btn--ghost { background: #fff; color: var(--qs-blue);
                             border: 1px solid #BFD5E4; white-space: nowrap; }
.qs-evt-act .qs-btn--ghost:hover, .qs-evt-act .qs-btn--ghost:focus {
                             background: var(--qs-bg-blue); color: var(--qs-navy);
                             border-color: var(--qs-blue); }

.qs-evt-empty { text-align: center; font-size: 14px; color: var(--qs-muted); margin: 22px 0 0; }

/* ── team ── */
.qs-team { padding: 62px 0; background: var(--qs-bg-blue); }
.qs-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 900px;
                margin: 0 auto; }
.qs-team-c { text-align: center; }
.qs-team-c img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
                 border: 4px solid #fff; box-shadow: 0 3px 14px rgba(14,58,83,.12); }
.qs-team-c h3 { font-size: 19px; font-weight: 700 !important; color: var(--qs-ink); margin: 16px 0 3px; }
.qs-team-role { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
                text-transform: uppercase; color: var(--qs-blue); }
.qs-team-c p { font-size: 13.5px; color: var(--qs-ink-2); line-height: 1.7; margin: 11px auto 0;
               max-width: 260px; }

/* ── faq ── */
.qs-faq { padding: 62px 0 70px; background: #fff; }
.qs-faq-list { max-width: 780px; margin: 0 auto; }
.qs-faq-list details { border: 1px solid var(--qs-line); border-radius: var(--qs-radius);
                       margin-bottom: 10px; background: #fff; }
.qs-faq-list details[open] { border-color: #CBDCE8; background: #F8FBFD; }
.qs-faq-list summary { cursor: pointer; padding: 16px 20px; font-size: 15px; font-weight: 600;
                       color: var(--qs-ink); list-style: none; position: relative;
                       padding-right: 46px; }
.qs-faq-list summary::-webkit-details-marker { display: none; }
.qs-faq-list summary::after { content: '+'; position: absolute; right: 20px; top: 14px;
                              font-size: 20px; font-weight: 400; color: var(--qs-blue); }
.qs-faq-list details[open] summary::after { content: '\2013'; }
.qs-faq-list p { font-size: 14px; color: var(--qs-ink-2); line-height: 1.75; margin: 0;
                 padding: 0 20px 18px; }

.qs-faq-cta { text-align: center; margin-top: 34px; }
.qs-faq-cta p { font-size: 15px; color: var(--qs-ink-2); margin-bottom: 16px; }

/* Card counts here must match perPage() in the carousel script. */
@media (max-width: 939px) {
  .qs-rev { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 619px) {
  .qs-rev { flex: 0 0 100%; }
}

/* The event row is a 4-column strip on desktop; below ~700px there is no room
   for all four, so the thumbnail sits beside the date and the copy and button
   drop underneath. */
@media (max-width: 700px) {
  .qs-evt-row { flex-wrap: wrap; padding-bottom: 14px; }
  .qs-evt-when { flex: 0 0 74px; }
  .qs-evt-thumb { flex: 0 0 76px; align-self: center; height: 76px; border-radius: 4px;
                  overflow: hidden; margin: 12px 0; }
  .qs-evt-thumb img { width: 76px; height: 76px; }
  .qs-evt-copy { flex: 1 1 100%; padding: 0 16px; order: 3; }
  .qs-evt-act { flex: 1 1 100%; padding: 14px 16px 0; order: 4; }
  .qs-evt-act .qs-btn { width: 100%; text-align: center; }
}

@media (max-width: 900px) {
  .qs-team-grid { grid-template-columns: 1fr; }
  .qs-sec-head h2 { font-size: 25px; }
  .qs-press-row { gap: 26px; }
  .qs-press-row img { max-height: 26px; }
}


/* ---- assets/css/qs-press.css ---- */
/* ==========================================================================
   Press, interviews and coverage — on book pages and author profiles.
   ========================================================================== */
.qs-presslinks { margin: 34px 0 0; }

.qs-pl-head { font-size: 20px; font-weight: 700 !important; color: var(--qs-ink);
              margin: 0 0 16px; }
.qs-pl-count { display: inline-block; min-width: 22px; padding: 2px 8px; margin-left: 8px;
               border-radius: 20px; background: var(--qs-bg-blue); color: var(--qs-blue);
               font-size: 12px; font-weight: 700; vertical-align: middle; }

/* Everything past the first few folds away. All of it stays in the HTML — the
   links are the point of this section, so they are crawlable and present with
   JavaScript off; <details> only hides them visually. */
.qs-pl-more { margin-top: 14px; }
.qs-pl-more > summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    padding: 9px 20px;
    border: 1px solid #BFD5E4;
    border-radius: 40px;
    background: #fff;
    color: var(--qs-blue);
    font-size: 13.5px;
    font-weight: 600;
    transition: background .2s, border-color .2s;
}
.qs-pl-more > summary::-webkit-details-marker { display: none; }
.qs-pl-more > summary:hover { background: var(--qs-bg-blue); border-color: var(--qs-blue); }
.qs-pl-more > summary::after { content: ' \25BE'; }
.qs-pl-more[open] > summary::after { content: ' \25B4'; }
.qs-pl-more .qs-pl-grid { margin-top: 14px; }

/* One label swaps for the other on open. */
.qs-pl-more .qs-pl-more-shut,
.qs-pl-more[open] .qs-pl-more-open { display: none; }
.qs-pl-more[open] .qs-pl-more-shut { display: inline; }

.qs-pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

/* Same elevation as a book cover in the store, so a press card sits at the
   same height off the paper as everything else on these pages. */
.qs-pl-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 0 1px rgba(14,58,83,.14), 0 3px 8px rgba(14,58,83,.14),
                0 8px 16px -8px rgba(14,58,83,.30);
    transition: box-shadow .15s ease, transform .15s ease;
}
.qs-pl-card:hover, .qs-pl-card:focus {
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 0 1px rgba(14,58,83,.18), 0 5px 12px rgba(14,58,83,.18),
                0 14px 24px -8px rgba(14,58,83,.35);
}

.qs-pl-thumb { display: block; background: var(--qs-bg-blue); }
.qs-pl-thumb img { display: block; width: 100%; height: 150px; object-fit: cover;
                   transition: transform .5s cubic-bezier(.2,0,.2,1); }
.qs-pl-card:hover .qs-pl-thumb img { transform: scale(1.04); }

.qs-pl-body { display: block; padding: 14px 16px 16px; }

.qs-pl-kind { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
              text-transform: uppercase; color: var(--qs-blue); background: var(--qs-bg-blue);
              padding: 3px 10px; border-radius: 20px; margin-bottom: 9px; }

.qs-pl-body strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.4;
                     color: var(--qs-ink); margin-bottom: 6px; }

.qs-pl-ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
            overflow: hidden; font-size: 13px; line-height: 1.6; color: var(--qs-ink-2);
            margin-bottom: 10px; }

.qs-pl-meta { display: block; font-size: 12px; color: var(--qs-muted); }
.qs-pl-meta i { margin-left: 5px; font-size: 10px; }

@media (max-width: 560px) {
    .qs-pl-grid { grid-template-columns: 1fr; }
    .qs-pl-thumb img { height: 170px; }
}

/* ==========================================================================
   Daastan Community — the same links, shuffled across every book and author,
   on the store and the home page.
   ========================================================================== */
/* Bottom padding matters: on the quotes page this is the last thing before the
   footer, and 8px let the cards run straight into it. */
.qs-community { padding: 54px 0 58px; }
/* On the home page the press logos follow immediately and bring their own
   40px, so the strip stays tight there. */
.qs-community-wrap .qs-community { padding-bottom: 10px; }
.qs-comm-head { text-align: center; max-width: 660px; margin: 0 auto 28px; }
.qs-comm-head h2 { font-size: 28px; font-weight: 800 !important; color: var(--qs-ink);
                   margin: 0 0 10px; }
.qs-comm-head p  { font-size: 15px; line-height: 1.7; color: var(--qs-ink-2); margin: 0; }

.qs-comm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* A div, not an <a>: each card holds two links — out to the article and in to
   the book or author — and nesting anchors is invalid. The outbound link is
   stretched over the card by the ::after below. */
.qs-comm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(14,58,83,.14), 0 3px 8px rgba(14,58,83,.14),
                0 8px 16px -8px rgba(14,58,83,.30);
    transition: box-shadow .15s ease, transform .15s ease;
}
.qs-comm-card:hover { transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(14,58,83,.18), 0 5px 12px rgba(14,58,83,.18),
                0 14px 24px -8px rgba(14,58,83,.35); }

.qs-comm-thumb { display: block; background: var(--qs-bg-blue); }
.qs-comm-thumb--none { height: 170px; display: flex; flex-direction: column; gap: 8px;
                       align-items: center; justify-content: center; color: var(--qs-blue); }
.qs-comm-thumb--none i { font-size: 26px; opacity: .6; }
.qs-comm-thumb--none b { font-size: 13px; font-weight: 600; color: var(--qs-pill-text); }
.qs-comm-thumb img { display: block; width: 100%; height: 170px; object-fit: cover;
                     transition: transform .5s cubic-bezier(.2,0,.2,1); }
.qs-comm-card:hover .qs-comm-thumb img { transform: scale(1.04); }

.qs-comm-body { padding: 15px 17px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.qs-comm-body h3 { font-size: 16px; font-weight: 700 !important; line-height: 1.4;
                   margin: 0 0 8px; }
.qs-comm-body p  { font-size: 13px; line-height: 1.6; color: var(--qs-ink-2); margin: 0 0 12px;
                   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                   overflow: hidden; flex: 1 1 auto; }

.qs-comm-out { color: var(--qs-ink); text-decoration: none; }
.qs-comm-out:hover, .qs-comm-out:focus { color: var(--qs-blue); text-decoration: none; }
/* Stretches the article link across the whole card, so the card is clickable
   without wrapping it in an anchor. */
.qs-comm-out::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.qs-comm-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                border-top: 1px solid var(--qs-line); padding-top: 11px;
                font-size: 12.5px; color: var(--qs-muted); }
.qs-comm-meta > span { flex: 0 0 auto; }
/* Above the stretched overlay, so this link stays clickable in its own right.
   Book titles here run long — "The Night She Drowned - Velvet Vista Case
   (Part I)" — so it gets one line and an ellipsis rather than wrapping the
   whole footer. */
.qs-comm-in { position: relative; z-index: 2; color: var(--qs-blue); font-weight: 600;
              text-decoration: none; text-align: right;
              min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-comm-in:hover { text-decoration: underline; color: var(--qs-blue); }

/* ── carousel variant (home, store, quotes — not genre pages) ── */
/* Vertical padding so the cards' drop shadow has room: overflow:hidden was
   clipping it flush with the card edge, which read as the row being cut off at
   the bottom. Negative margin cancels the padding so nothing else moves.
   Vertical only — horizontal padding would change rail.clientWidth, which the
   carousel uses to work out how far one page is. */
.qs-comm-rail { overflow: hidden; padding: 8px 0 18px; margin: -8px 0 -18px; }
.qs-comm-track { display: flex !important; gap: 18px;
                 transition: transform .45s cubic-bezier(.4,0,.2,1); }
/* In the rail the cards are flex items, not grid children, so they need their
   own width — a third of the rail, less the two gaps between three cards. */
.qs-comm-track > .qs-comm-card { flex: 0 0 calc((100% - 36px) / 3); }

.qs-comm-nav { display: flex; align-items: center; justify-content: center; gap: 18px;
               margin-top: 22px; }
.qs-comm-arrow { width: 36px; height: 36px; border-radius: 50%; border: 0;
                 background: var(--qs-navy); color: #fff; font-size: 20px; line-height: 1;
                 cursor: pointer; transition: opacity .2s; }
.qs-comm-arrow:disabled { opacity: .28; cursor: default; }
.qs-comm-dots { display: inline-flex; align-items: center; gap: 7px; }
.qs-comm-dot { width: 8px; height: 8px; border-radius: 50%; background: #BFD5E4; cursor: pointer;
               transition: width .25s, background .25s; }
.qs-comm-dot.is-on { width: 26px; border-radius: 5px; background: var(--qs-navy); }

@media (max-width: 900px) {
    .qs-comm-grid { grid-template-columns: repeat(2, 1fr); }
    .qs-comm-track > .qs-comm-card { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 600px) {
    .qs-comm-grid { grid-template-columns: 1fr; }
    .qs-comm-track > .qs-comm-card { flex: 0 0 100%; }
}


/* ---- assets/css/qs-gallery.css ---- */
/* ==========================================================================
   Home page: the "Memorable moments" photo wall, above the footer.
   ========================================================================== */
.qs-moments { padding: 62px 0 72px; background: var(--qs-bg-blue); }

.qs-moments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 168px;
    gap: 14px;
}

.qs-moment {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #d9e4ec;
}
/* One focal tile so the wall does not read as a contact sheet. */
.qs-moment--big { grid-column: span 2; grid-row: span 2; }

.qs-moment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2,0,.2,1);
}
.qs-moment:hover img { transform: scale(1.06); }

.qs-moment figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 14px 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #fff;
    background: linear-gradient(to top, rgba(6,32,50,.88) 0%, rgba(6,32,50,.6) 55%, rgba(6,32,50,0) 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s;
}
.qs-moment:hover figcaption,
.qs-moment:focus-within figcaption { opacity: 1; transform: translateY(0); }

.qs-moment--big figcaption { font-size: 14.5px; padding: 34px 18px 16px; }

/* Touch devices get no hover, so the captions simply stay on. */
@media (hover: none) {
    .qs-moment figcaption { opacity: 1; transform: none; }
}

/* ── instagram strip ── */
.qs-ig { padding: 62px 0 70px; background: #fff; }
.qs-ig .qs-sec-head p a { color: var(--qs-blue); font-weight: 600; text-decoration: none; }
.qs-ig .qs-sec-head p a:hover { text-decoration: underline; }

.qs-ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.qs-ig-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
              border-radius: 8px; background: var(--qs-bg-blue); text-decoration: none; }
.qs-ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block;
                  transition: transform .5s cubic-bezier(.2,0,.2,1); }
.qs-ig-tile:hover img { transform: scale(1.06); }

.qs-ig-play { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
              border-radius: 50%; background: rgba(6,32,50,.65); color: #fff; font-size: 10px;
              line-height: 26px; text-align: center; }
.qs-ig-play i { margin-left: 2px; }

.qs-ig-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 11px;
             font-size: 12px; line-height: 1.45; color: #fff;
             background: linear-gradient(to top, rgba(6,32,50,.9), rgba(6,32,50,0));
             opacity: 0; transition: opacity .3s;
             display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
             overflow: hidden; }
.qs-ig-tile:hover .qs-ig-cap, .qs-ig-tile:focus .qs-ig-cap { opacity: 1; }

.qs-ig-more { text-align: center; margin: 30px 0 0; }
.qs-ig-more i { margin-right: 7px; }

@media (hover: none) { .qs-ig-cap { display: none; } }

@media (max-width: 900px) {
    .qs-moments-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .qs-ig-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .qs-moments-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .qs-moment--big { grid-column: span 1; grid-row: span 1; }
    .qs-moment figcaption { opacity: 1; transform: none; }
}


/* ---- assets/css/qs-genre-tile.css ---- */
/* ==========================================================================
   Genre tile -- the photo band in "Explore other genres".

   Lifted out of qissa-ui.css so the ADMIN can load the same rules when it
   previews a tile. The preview has to be the real component, not a mock-up
   drawn in admin CSS: two copies would drift the first time either changed,
   and the whole point of showing it is that an editor sees what a reader
   will get -- including the white gradient that covers most of the picture.

   Loaded by layout/wm_head.php (bundled) and admin/layout/panel_head.php.
   ========================================================================== */

.qs-genre-banner { position: relative; display: flex; align-items: center; justify-content: space-between;
                   height: 64px; border-radius: 8px; overflow: hidden; text-decoration: none;
                   background: #fff; border: 1px solid var(--qs-line);
                   transition: border-color .15s ease, box-shadow .15s ease; }
.qs-genre-bg { position: absolute; inset: 0; display: block; background-size: cover;
               background-position: center; z-index: 0; }
.qs-genre-banner::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.5) 100%); }
.qs-genre-label { position: relative; z-index: 2; padding: 0 14px 0 22px; font-family: var(--qs-font);
                  font-size: 16px; font-weight: 700; color: var(--qs-navy); line-height: 1.25; }
.qs-genre-count { position: relative; z-index: 2; flex-shrink: 0; background: var(--qs-navy); color: #fff;
                  font-family: var(--qs-font); font-size: 12.5px; font-weight: 600; line-height: 1;
                  padding: 8px 16px 8px 20px;
                  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
                  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
.qs-genre-banner:hover { border-color: var(--qs-navy); box-shadow: 0 5px 14px rgba(14,58,83,.12); }
.qs-genre-banner:hover .qs-genre-label { color: var(--qs-blue); }
.qs-genre-hidden { display: none; }