.hero{padding-top:50px;padding-bottom:40px;background:#F5F8FA;}
.hero__subtitle{margin-bottom:0;font-size:16px}
.hero__heading{margin-top:0;margin-bottom:0;font-size:40px}
.hero__author{font-style:italic;font-size:12px}
.hero__image { display: none;}
.sidebar { background: #F5F8FA; transition: all 0.3s; }
.sidebar a,
.sidebar a:hover,
.sidebar a:focus { color: inherit; }
.sidebar.active { margin-left: 0; }
.sidebar .sidebar-header { padding: 20px; background: #6d7fcc; }
.sidebar ul.components { padding: 10px 0 0; margin-bottom: 0; }
.sidebar ul p { color: #333; padding: 0px 10px 0px 30px; }
.sidebar ul li a { padding: 10px 45px 10px 30px; font-weight: 500; display: block; text-decoration: none; }
.sidebar ul li a:hover { color: #333; background: #daecf6; }
.sidebar ul li ul li a:hover { color: #333; background: #ebf5fc; }
.sidebar ul li.active > a,
a[aria-expanded="true"] { color: #333; background: #daecf6; }
.sidebar a[data-toggle="collapse"] { position: relative; }
.sidebar a[aria-expanded="false"]::before,
.sidebar a[aria-expanded="true"]::before { content: '\e259'; display: block; position: absolute; right: 20px; font-family: 'Glyphicons Halflings'; font-size: 0.8em; }
.sidebar a[aria-expanded="true"]::before { content: '\e260'; }
.sidebar ul ul a { font-weight: normal; padding-left: 30px !important; background: #fcfdfd; }
.btn-info{min-width:100%;margin-top:15px;margin-bottom:0;border:0}
.italic{font-style:italic}
iframe{max-width:100%;height:auto;aspect-ratio:16/9}
.sidebar-wrapper { display: none; }
.sec-block{padding:0 0 30px}
.chapter-content{padding-top:15px}
.chapter-content h1 { font-size: 40px; margin-bottom: 30px; }
.chapter-content h2 { font-size: 24px; margin: 30px 0 0; font-weight: 500; }
.chapter-content h3 { font-size: 18px; margin: 30px 0 0; font-weight: 500; }
.chapter-content h4 { font-size: 16px; margin: 30px 0 0; font-weight: 600; }
.chapter-content ul { margin: 1em 0;}

.quote { position: relative; display: block; margin-top: 40px; margin-bottom: 40px; padding: 40px; background-color: #F8F8F8; border-radius: 15px;}
.quote::before, .quote::after { content: ""; display: inline-block; margin-bottom: 4px; width: 36px; height: 32px; background: no-repeat center / contain; background-image: url(/static/cdgs/images/blog/quote-left-corel.svg); }
.quote::after { position: absolute; right: 40px; bottom: 25px; transform: rotate(180deg); }
.quote .description { font-size: 20px; margin: 0 0 30px; }
.quote .name { font-weight: 700; margin-bottom: 0; padding-right: 40px;}
.quote .position { color: #616161; margin-bottom: 0; padding-right: 40px;}

.brand-assets_wrapper {margin: 0; padding: 0;}
.brand-assets_wrapper .title{margin:30px 0 26px;padding:0;}
.brand-assets_wrapper .title:after{margin:0;padding:0;content:"";display:block;width:24px;height:3px;margin-top:12px;background-color:#000}
.brand-assets {margin: 0; padding: 0;display: flex; flex-wrap: wrap;}
.brand-assets > div {margin-bottom: 40px;}
.brand-assets h3{font-size:18px;line-height:1.5;font-weight:700;margin:16px 0}
.brand-assets ul { padding-left: 20px; padding-top: 16px; margin-bottom: 0; display: block; }
.brand-assets ul li + li { margin-top: 8px; }
.brand-assets li a {color: #000; text-decoration: underline; text-underline-position: under;}
.brand-assets li a:hover {color: #424242; text-decoration: none;}
.brand-assets img {border-radius: 10px;}

.link-download {position: relative; display: inline-block; font-weight: 500; padding-right: 24px; color: #000; text-decoration: none; text-underline-position: under;background: none;}
.link-download::after { content: ""; display: block; position: absolute; top: 5px; right: 0; width: 14px; height: 14px; background: no-repeat center / contain; background-image: url(/static/cdgs/images/blog/arrow-down-black.svg) }
.link-download:hover {color: #000; text-decoration: underline;}
.link-download[aria-expanded="true"] {text-decoration: underline;background: none;color: #000;}
.link-download[aria-expanded="true"]:after { transform: rotate(-180deg); }

@media (min-width: 768px) {
    .vertical-align{display:flex;align-items:center}
    .btn-info{display:none}
    .hero__image,.sidebar-wrapper{display:block}
    .hero{padding-top:0;padding-bottom:0}
    .sec-block{padding:40px 0}
    .toc{position:sticky;top:15px}
    .chapter-content{padding-top:0}
}