/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font-family: "Merriweather", serif; font-size: 16px; line-height: 1.5; font-weight: 300; color: #404040; background-color: #efeae4; -webkit-text-size-adjust: 100%; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; text-align: center; padding-bottom: 10px; font-style: italic; }

/** Lists */
ul { margin: 0; padding-bottom: 10px; list-style: none; text-transform: capitalize; }

li > ul, li > ol { margin-bottom: 3px; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: "Scope One", sans-serif; color: #b6904a; }

/** Links */
a { color: #f0541e; text-decoration: none; transition: color 1s; }
a:hover { color: #000; }

/** Blockquotes */
blockquote { background: #c9b8a4; color: white; padding: 15px; border-radius: 5px; font-size: 18px; letter-spacing: 1px; }
blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border-radius: 3px; background-color: #d3c5b4; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: scroll; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(1000px - (30px * 2)); max-width: calc(1000px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
@media screen and (max-width: 850px) { .wrapper { max-width: -webkit-calc(1000px - (30px)); max-width: calc(1000px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
.icon > svg path { fill: #92733b; }

::selection { background: #a9ddba; }

::-moz-selection { background: #a9ddba; }

img::selection { background: transparent; }

img::-moz-selection { background: transparent; }

body { -webkit-tap-highlight-color: #a9ddba; }

.page-header { background: #e9e3da; margin-bottom: 60px; }
.page-header h1 { padding: 12px 0; font-size: 1.6em; margin: 0; text-transform: capitalize; color: #c9b8a4; }

.two-column { display: -webkit-box; display: -ms-flexbox; display: flex; }

.col-left { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; }

.col-right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; line-height: 1.3; font-size: 14px; }
.col-right .clearfix { border-left: 1px dashed brown; padding-left: 15px; margin-left: 15px; }

.page-content { padding-left: 9em; }

.page-heading { font-size: 20px; }

.post-list > li { margin-bottom: 30px; }
.post-list > li h2 { margin: 0; padding: 0; }

.post-meta { color: #92733b; margin: 0; }

.post-link { display: block; font-size: 24px; }

/** Posts */
.post-header { margin-bottom: 30px; }
.post-header h1 { margin: 0; line-height: 1.05; }

img.image-left { float: left; margin-right: 15px; border: 2px solid #333; }
img.image-left + em { float: left; width: 100%; margin-bottom: 10px; color: #666; font-size: 14px; }

img.image-right { float: right; margin-left: 15px; border: 2px solid #333; }
img.image-right + em { float: right; text-align: right; width: 60%; color: #666; font-size: 14px; margin-bottom: 10px; }

.image-center { align-self: center; }

.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }
@media screen and (max-width: 850px) { .post-title { font-size: 36px; } }

.post-content { margin-bottom: 30px; }
.post-content h2 { font-size: 32px; }
@media screen and (max-width: 850px) { .post-content h2 { font-size: 28px; } }
.post-content h3 { font-size: 26px; }
@media screen and (max-width: 850px) { .post-content h3 { font-size: 22px; } }
.post-content h4 { font-size: 20px; }
@media screen and (max-width: 850px) { .post-content h4 { font-size: 18px; } }

.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }

.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.button { background: #d3c5b4; padding: 3px 5px; box-shadow: 0 0 5px #666; color: #FFF; }
.button:hover { box-shadow: 0 0 10px #666; }

.audio-box { margin-top: 50px; margin-bottom: 20px; background: #e0d6ca; border-radius: 5px; padding: 10px; font-size: 0.75em; font-family: Arial, sans-serif; line-height: 1.5; }
.audio-box p { margin: 10px 0; }

audio { width: 100%; }

/** Site header */
header { background: whitesmoke; width: 9em; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: space-between; position: fixed; box-shadow: 1px 0 5px #666; }
header h1 { letter-spacing: -1px; font-size: 1.8em; text-align: center; }
header .icon:hover > svg path { fill: #f0541e; }

.title-wrap { padding: 5px; }

.site-title { line-height: 1; }
.site-title, .site-title:visited { color: #e0d6ca; }
.site-title:hover { color: #cdbdaa; text-decoration: none; }

.site-description { font-size: 65%; text-align: center; color: #e0d6ca; text-transform: uppercase; padding: 0; font-weight: 400; }

.site-nav { text-align: right; }
.site-nav ul { list-style: none; padding: 0 10px 0 0; margin: 0; }
.site-nav ul li { font-size: 75%; margin-bottom: 4px; font-family: Arial, sans-serif; }
.site-nav ul li a { color: #b4a227; -moz-transition: color 1s; /*Firefox*/ -webkit-transition: color 1s; /* Safari */ transition: color 1s; }
.site-nav ul li a:hover { color: #000; text-decoration: none; }
.site-nav .menu-icon { display: none; }
.site-nav .page-link { line-height: 1; font-family: Trebuchet, sans-serif; }
.site-nav .page-link a { color: #b4a227; }
.site-nav .page-link:hover { color: #f0541e; text-decoration: none; }
.site-nav .page-link:not(:first-child) { margin-left: 10px; }
@media screen and (max-width: 650px) { .site-nav { position: absolute; top: 8px; right: 30px; background-color: #efeae4; border: 1px solid #b4a227; border-radius: 5px; text-align: right; }
  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
  .site-nav .menu-icon > svg { width: 18px; height: 15px; }
  .site-nav .menu-icon > svg path { fill: #f0541e; }
  .site-nav .trigger { clear: both; display: none; }
  .site-nav:hover .trigger { display: block; padding-bottom: 5px; }
  .site-nav .page-link { display: block; padding: 5px 10px; } }

.header-email { margin: 0 10px 20px; text-align: center; font-size: 0.7em; }

.section-1 { border-bottom: 1px solid #dcd1c4; margin-bottom: 30px; }

.section { margin-bottom: 30px; }

.sub-section { padding-bottom: 30px; border-bottom: 1px solid #dcd1c4; }

.section-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.section-flex img { width: 100%; margin-bottom: 15px; }
.section-flex p { font-size: 14px; }

.section-1 { background: url("https://sama66.github.io/q3/asset/img/nasiruddin-ziauddin-01.jpg") #CCC; background-size: cover; background-position: center top; }

.lead-box { padding: 280px 20px 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.splash-text { background: rgba(245, 245, 245, 0.8); padding: 3px 0; color: #000; display: block; line-height: 1; width: 60%; text-align: center; }
.splash-text h1 { color: #000; letter-spacing: -5; font-size: 1.5em; margin: 0; }
.splash-text p { font-size: 1.2em; margin-bottom: 0; }

.three-boxes { flex: 5; }

.three-boxes.box-2 { flex: 7; background: #e6ded4; padding: 15px; }

.gutter { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.box-2 p { font-size: 1em; }

.concerts li { font-size: 0.75em; display: inline-block; }

.row { margin-bottom: 30px; }

.video-box { -webkit-box-flex: 7; -ms-flex: 7; flex: 7; height: 160px; background: black; }

.cd-box { width: 100%; display: flex; align-items: center; }
.cd-box a { background: #dcd1c4; color: black; transition: all .5s ease-in-out; }
.cd-box a img { transform: scale(1); transition: all 1s ease-in-out; }
.cd-box a:hover { box-shadow: 0 0 8px #333; }
.cd-box a:hover img { transform: scale(1.2); }

.cd-label { flex: 2; }
.cd-label h4 { line-height: 1; padding: 0; margin: 0; font-size: 1.5em; }

.cd { flex: 5; margin-left: 10px; display: flex; justify-content: space-between; box-shadow: 0 0 3px #888; }
.cd h2, .cd p { margin: 0; line-height: 0.9; }
.cd .cd-img { width: 80px; height: 80px; padding: 7px; }
.cd .cd-text { padding: 10px 10px 0; }
.cd .cd-text h2 { font-size: 1.85em; font-weight: 100; }
.cd .cd-text p { font-size: .85em; margin-bottom: 3px; }

.text-column { -webkit-box-flex: 11; -ms-flex: 11; flex: 11; }

.video-section { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.video-section li { background: #e0d6ca; font-size: 0.8em; line-height: 1.1; -webkit-box-flex: 0; -ms-flex: 0 1 200px; flex: 0 1 200px; padding: 3px; margin-bottom: 15px; box-shadow: 0 0 0; -webkit-transition: color .3s, background 2s, box-shadow 2s; transition: color 2s, background 2s, box-shadow 2s ease-in-out; }
.video-section li p { margin: 8px 0; }
.video-section li img { width: 100%; opacity: 0.7; -webkit-transition: opacity 1s; transition: transform 150ms, opacity 1s; }
.video-section li:hover { background: #251e16; color: white; box-shadow: 0 0 10px #666; }
.video-section li:hover img { opacity: 1; transform: scale(0.9); }

.maestro-list { margin-bottom: 100px; }
.maestro-list figure { position: relative; display: block; width: 150px; height: 225px; margin: 0 1% 1% 0; float: left; overflow: hidden; border: 4px solid white; }
.maestro-list figure img { width: 100%; }
.maestro-list figure figcaption { position: relative; text-align: left; top: -66px; padding: 5px; font-size: 1.2em; font-style: normal; line-height: 1; font-weight: bold; color: #df8b27; -webkit-transition: opacity 1s; transition: opacity 1s; background: rgba(0, 0, 0, 0.5); }
.maestro-list figure a figcaption { opacity: 0; }
.maestro-list figure a:hover figcaption { opacity: 1; }

.three-column { display: -webkit-box; display: -ms-flexbox; display: flex; }

.three-col-1 { -webkit-box-flex: 4; -ms-flex: 4; flex: 4; }

.three-col-2 { -webkit-box-flex: 7; -ms-flex: 7; flex: 7; margin: 0 15px; }

.three-col-3 { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; line-height: 1.3; font-size: 0.8em; }
.three-col-3 li { margin-bottom: 5px; }

footer { border-top: 1px solid white; padding: 30px 0; color: #b69f84; margin-top: 200px; }

.footer-heading { font-size: 18px; margin-bottom: 15px; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 20%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

.social-media-buttons a { height: 35px; width: 35px; font-size: 0; display: inline-block; background: url("/q3/asset/img/buttons-small.png"); transition: background .2s; }
.social-media-buttons .fb { background-position: -1px -76px; }
.social-media-buttons .fb:hover { background-position: -1px -1px; }
.social-media-buttons .google { background-position: -115px -76px; }
.social-media-buttons .google:hover { background-position: -115px -1px; }

.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); float: left; }

.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); float: left; }

.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); float: right; }

span.dnd { text-align: center; display: block; font-size: 0.69em; }

@media screen and (max-width: 850px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); float: none; }
  .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); float: none; } }
@media screen and (max-width: 650px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
@media screen and (max-width: 850px) { .three-column { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .three-col-1 { -webkit-box-flex: 0; -ms-flex: 0 1rem; flex: 0 1rem; }
  .three-col-2 { -webkit-box-flex: 1; -ms-flex: 1 20rem; flex: 1 20rem; }
  .three-col-3 { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; }
  .cd-box { flex-direction: column; max-width: 400px; }
  .cd { margin-top: 10px; } }
@media screen and (max-width: 650px) { body { background: snow; line-height: 1.3; }
  header { background: rgba(189, 157, 157, 0.15); position: fixed; width: 100%; margin-top: 0; padding-bottom: 0; height: auto; z-index: 20; }
  .site-title, .site-title:visited { color: #a78b6a; }
  .title-wrap { margin: 0; }
  .title-wrap h1 { margin: 0; font-size: 2em; float: left; }
  .header-email, .site-description { display: none; }
  .site-nav ul { margin: 0 10px; }
  .trigger { padding: 5px 0; }
  .page-content { padding-top: 53px; padding-left: 0; }
  .page-header { margin-bottom: 15px; }
  .page-header h1 { padding: 2px 0; font-size: 1.2em; }
  .section-1 { background-position: -90px; }
  .section-flex { display: block; }
  .lead-box .splash-text { margin: 0; padding: 3px; }
  .lead-box .splash-text h1 { font-size: 1.5em; }
  .image-overlay { margin: 0; }
  .two-column { display: block; }
  .col-right .clearfix { border: 0; padding: 15px; margin-left: 0; background: #dcd1c4; }
  .maestro-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: center; }
  .maestro-list figure { margin: 0 5px 5px; max-width: none; flex: 0 1 135px; height: 200px; border: 1px; }
  .maestro-list figure a figcaption { opacity: 1; }
  .three-column { display: block; }
  .three-col-2 { margin: 0; }
  .three-col-3 { background: #efeae4; padding: 5px; text-align: left; }
  .image-left, .image-right { display: block; float: none; width: 100%; margin: 5px 0; }
  .video-section li { flex: 0 1 137px; }
  .video-section li p { font-size: 0.8em; }
  .three-boxes.box-2 { margin: auto -15px; }
  .col-right { margin: auto -15px; }
  footer { border-top: 1px solid #efeae4; } }
/** Syntax highlighting styles */
.highlight { background: #fff; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }