/*
====================================================
* [Master Stylesheet]

  Theme : Privado - Minimal Responsive Ghost Theme
  Version    :  1.0 
  Author     :  Codetic
  Author URI :  http://themeforest.net/user/Codetic
====================================================

   TOC:
  =======
  0. Webfonts and Icon fonts Import

  1. Primary Styles
      a. Footer Styles
      a. Navigation Menu Styles

  2. Preloader Styles

  3. Main Components

  4. Blog Styles
    a. Blog Listing
    b. 

  5. Custom Error Page Styles


===================================================== */

/* --------------------------------- */
/* Color choices
   Muted: #7c83ca
   Bright: #4776b3
   AltBright: #7a85f1
 ----------------------------------- */

/* --------------------------------- */
/* 0. Webfonts and Icon fonts
 ----------------------------------- */

@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700|Merriweather:400italic,400");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");


/* -------------------------------- 
1. Primary style
-------------------------------- */

*,::after,::before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}

html {
  font-size:62.5%;
}

body {
  background:#101524;
  font-size:1.6rem;
  font-family:"PT Sans",sans-serif;
  color:#fff;
  overflow-x: hidden;
}

a {
  color:#7c83ca;
  text-decoration:none
}


a:hover, a:active, a:focus {
  outline: none!important;
  text-decoration: none;
}


h1,h2,h3,h4,h5,h6 {
  font-family:"Merriweather",serif
}

h1 {
  font-size:2em;
  margin:.67em 0
}

h2 {
  font-size:1.5em;
  margin:.75em 0
}

h3 {
  font-size:1.17em;
  margin:.83em 0
}

h5 {
  font-size:.83em;
  margin:1.5em 0
}

h6 {
  font-size:.75em;
  margin:1.67em 0
}

ul li {
  list-style: none;
}

audio, canvas, video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden] {
    display: none;
}

address {
    font-style: italic;
    margin: 0 0 24px;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
mark {
    background: none repeat scroll 0 0 #ff0;
    color: #000;
}
p {
    margin: 0 0 24px;
}
code, kbd, pre, samp {
    -moz-hyphens: none;
    font-family: monospace,serif;
    font-size: 14px;
}

blockquote, q {
    -moz-hyphens: none;
    quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
    content: none;
}
blockquote {
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
    margin: 24px 40px;
}
blockquote blockquote {
    margin-right: 0;
}
blockquote cite, blockquote small {
  font-size: 13px;
  font-weight: normal;
  padding-left: 15px;
}
blockquote em, blockquote i {
    font-style: normal;
    font-weight: 300;
}
blockquote strong, blockquote b {
    font-weight: 400;
}
small {
    font-size: smaller;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
dl {
    margin: 0 20px;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 0 20px;
}
menu, ol, ul {
    margin: 16px 0;
    padding: 0 0 0 40px;
}
ul {
    list-style-type: square;
}
nav ul, nav ol {
    list-style: outside none none;
}
li > ul, li > ol {
    margin: 0;
}


code, tt {
    background: none repeat scroll 0 0 #444;
    border: 1px solid #2b2d26;
    border-radius: 2px;
    color: #fff;
    font-size: 15px;
    padding: 3px 5px;
}

pre {
    background-color: #272822;
    background: -moz-repeating-linear-gradient(center top , #272822 0px, #272822 32px, #2b2d26 32px, #2b2d26 64px);
    border: 20px solid #272822;
    border-radius: 3px;
    box-sizing: border-box;
    color: #fff;
    font-size: 15px;
    line-height: 32px;
    margin: 1.6em 0;
    overflow: auto;
    padding: 0 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
}
pre code {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    font-size: inherit;
    padding: 0;
    white-space: pre-wrap;
}

table {
    background-color: transparent;
    box-sizing: border-box;
    margin: 1.6em 0;
    max-width: 100%;
    width: 100%;
}
table th, table td {
    border-top: 1px solid #efefef;
    font-size: 16px;
    line-height: 20px;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
table th {
    color: #000;
}
table caption + thead tr:first-child th, table caption + thead tr:first-child td, table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td {
    border-top: 0 none;
}
table tbody + tbody {
    border-top: 2px solid #efefef;
}
table table table {
    background-color: #fff;
}
table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th {
    background-color: #f6f6f6;
}

input, textarea{
  padding: 5px 10px; 
}

button, .btn {
  background: none repeat scroll 0 0 #f2f2f2;
  border: 1px solid #3f3f46;
  border-radius: 0;
  color: #3f3f46;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 10px auto;
  padding: 10px 20px;
  text-transform: uppercase;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s
}

button:hover, .btn:hover {
  background:#3f3f46;
  color:#fff;
}


.menu-desc {
  opacity:0!important;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s
}

.page-title span {
  display:block
}

.page-title span i {
  background:none repeat scroll 0 0 rgba(255,255,255,0.1);
  border-radius:50%;
  box-shadow:0 0 0 30px transparent;
  display:inline-block;
  font-size:2.5em;
  padding:.5em;
  height:2em;
  line-height:1em;
  text-align:center;
  width:2em;
  margin:15px auto;
  display:block;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.single-page:hover .page-title span i {
  box-shadow:0 0 0 0 rgba(255,255,255,0.1);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out
}


/* -------------------------------- 
    1.a. Footer Styles
-------------------------------- */

.footer {
  background:none repeat scroll 0 0 #ebebeb;
  display:block;
  min-height:60px;
  padding:20px 50px;
}

.footer a {
  color:#3f3f46;
  font-size:13px;
  font-weight:700;
  padding-right:40px;
  position:relative;
  text-decoration:none;
  text-transform: uppercase
}

.footer a:after {
  background:none repeat scroll 0 0 #3f3f46;
  content:"";
  height:10px;
  margin:-5px 0 0;
  position:absolute;
  right:0;
  top:50%;
  width:1px
}

.footer span {
  color:#b1b1b1;
  font-size:12px;
  font-weight:400;
  margin-left:40px
}


/* ------------------------------------------- */
/* 1.b. Navigation Menu Styles           */ 
/* ------------------------------------------- */

/* Off canvas Navigation */

a.nav-expander {
  background: none repeat scroll 0 0 rgba(44, 47, 53, 0.6);
  color: #ffffff;
  display: block;
  font-size: 15px;
  font-weight: 400;
  height: 50px;
  margin-right: 0;
  position: absolute;
  right: 40px;
  text-decoration: none;
  text-transform: uppercase;
  top: 38px;
  width: 60px;
  z-index: 999;

  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}

a.nav-expander:hover {
  cursor: pointer;
}

a.nav-expander.fixed {
  position: fixed;
}

.nav-expanded a.nav-expander.fixed {
    right: 20em;
}


nav.primary-menu {
  background: #2C2F35;
  display: block;
  height: 100%;
  overflow: auto;
  position: fixed;
  right: -20em;
  font-size: 15px;
  top: 0;
  width: 20em;
  z-index: 2000;

  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}
.nav-expanded nav {
  right: 0;
}

body.nav-expanded {
  margin-left: 0em;
  transition: right 0.4s ease-in-out 0s;
  -webkit-transition: right 0.4s ease-in-out 0s;
  -moz-transition: right 0.4s ease-in-out 0s;
  -o-transition: right 0.4s ease-in-out 0s;
}

.nav-header h2 {
  border-bottom: 3px solid #54585b;
  font-size: 18px;
  line-height: 1.5;
  margin: 20px;
  padding: 50px 20px 20px;
  text-align: center;
  text-transform: uppercase;
}

.main-menu {
  padding-top: 12px;
}

.main-menu {
  padding-left: 12px;
  padding-top: 12px;
}

.main-menu ul {
  padding-left: 0;
}

.main-menu li {
  border-bottom: 1px solid rgba(90, 90, 90, 0.2);
  font-size: 16px;
  font-weight: 700;
  margin: 0 20px;
  padding: 15px;
  text-transform: uppercase;
}

.main-menu li a {
  color: #898989;
  text-decoration: none;
}

.main-menu li.active a {
  color: #C5C4BF;
}


.main-menu li a:hover {
  color: #C5C4BF;
  text-decoration: none;
}

ul.children, ul.sub-menu {
  margin-top: 5px;
}

ul.children li, ul.sub-menu li {
  border-bottom: 0 none;
  font-size: 15px;
  padding: 8px 4px;
}

.main-menu li.menu-item-has-children > a::after,
.main-menu li.page_item_has_children > a::after {
  content: "\f0d7";
  font-family: "FontAwesome";
  margin-left: 7px;
}


.menu-expander {
  position: relative;
}

.nav-expander {
  position: relative;
  display: block;
  width: 55px;
  height: 55px;
}
.nav-expander:after, .nav-expander:before {
  content: "";
}
.nav-expander span, .nav-expander::after, .nav-expander::before {
  backface-visibility: hidden;
  position: absolute;
  left: 15px;
  right: 15px;
  border-top: 3px solid #fff;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.nav-expander::before {
  top: 14px;
}
.nav-expander span {
  top: 24px;
}
.nav-expander::after {
  top: 34px;
}
.nav-expander.active::before, .nav-expander.active::after {
  top: 24px;
  backface-visibility: hidden;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.nav-expander.active::before {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-expander.active span {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.nav-expander.active::after {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


.blog-logo img {
  max-height: 300px;
  max-width: 90%;
}

/* ------------------------------------------- */
/* 2. Preloader CSS */ 
/* ------------------------------------------- */

#preloader{
  background-color:#101524; 
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:9999;  
}

.loader {
  background: url("../img/svg-loaders/puff.svg") no-repeat scroll center center rgba(0, 0, 0, 0);
  height: 50px;
  width: 50px;
  position: absolute;
  left: calc(50% - 25px);
  top: calc(50% - 25px);

}



/* -------------------------------- 
/*   3. Main Components 
-------------------------------- */


.page-title {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 12.5vh;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}


.page-title > * {
  text-shadow:0 1px 4px rgba(0,0,0,0.2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.page-title h2 {
  font-family: "PT Sans",sans-serif;
  font-size: 2.25em;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5em;
  margin: 20px auto 5px;
  text-transform: uppercase;
}

.page-title p {
  font-size:1.4rem;
  font-family:"Merriweather",serif;
  font-style:italic;
  line-height:1.2;
  padding:.5em 2em;
  display:block;
  opacity:.6
}

.scroll-down {
  background: url("../img/icons/icon-arrow-desktop.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  bottom: 50px;
  display: block;
  height: 44px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  width: 44px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);

  -webkit-animation:cd-translate 1.2s .4s;
  -moz-animation:cd-translate 1.2s .4s;
  animation:cd-translate 1.2s .4s;
  -webkit-animation-iteration-count:5;
  -moz-animation-iteration-count:5;
  animation-iteration-count:5;
}

/* ----------------------------------------------------
/* 4.  Blog Styles
/* ---------------------------------------------------- */


/* Blog Listing Page */


.blog-header {
  /* background: url("../img/blog-bg.jpg") no-repeat fixed center center / cover  rgba(0, 0, 0, 0); */
  height: 100vh;
  position: relative;
  width: 100%;
  background-size: cover;
}

.header-inner{
  background: rgba(0,0,0, .5);
  width: 100%;
  height: 100%;
  display: table;
}

.single-blog-header {
  /* background-attachment: fixed; */
  background-color: #28292e;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  position: relative;
  width: 100%;
}

.single-page-header {
  background-color: #28292e;
  height: 275px;
  position: relative;
  width: 100%;
}

.blog-header h2{
  font-size: 24px;
}

.back-to-home {
  background: none repeat scroll 0 0 transparent;
  border: 1px solid #fff;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  left: 40px;
  line-height: 24px;
  opacity: 0.8;
  padding: 10px 30px;
  position: absolute;
  text-transform: uppercase;
  top: 40px;
  z-index: 99;
}

.back-to-home:hover {
  background: rgba(0,0,0, .2);
  padding: 10px 30px;
}

.back-to-home i {
  font-size: 14px;
  margin-right: 3px;
}

.blog-desc{
  display: block;
  font-family: "Merriweather",serif;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.2;
  opacity: 0.6;
  padding: 2em !important;
}

.header-content {
  display: table-cell;
  padding-bottom: 20px;
  text-align: center;
  vertical-align: middle;
}

.single-page-header .header-content {
  padding-bottom:  0;
}

.header-content h2 {
  font-family: "PT Sans",sans-serif;
  font-size: 3em;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5em;
  margin: 20px auto 5px;
  text-transform: uppercase;
}

.single-blog-header .header-content h2, .single-page-header .header-content h2 {
  font-size: 2em;
  line-height: 1.5em;
  margin: 70px auto 5px;
}

.header-content p {
  display: block;
  font-family: "Merriweather",serif;
  font-size: 2rem;
  font-style: italic;
  line-height: 1.2;
  opacity: 0.9;
  padding: 0.5em 2em;
}

.single-blog-header .header-content p, .single-page-header .header-content p {
  font-size: 1.5rem;
}

.header-content span i {
  background:none repeat scroll 0 0 rgba(255,255,255,0.1);
  border-radius:50%;
  box-shadow:0 0 0 30px transparent;
  display:inline-block;
  font-size:2.5em;
  padding:.5em;
  height:2em;
  line-height:1em;
  text-align:center;
  width:2em;
  margin:15px auto;
  display:block;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s
}

.blog-header:hover .header-content span i {
  box-shadow:0 0 0 0 rgba(255,255,255,0.1);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out
}

.author-container {
  margin-top: 20px;
}

.author-container .author-bio {
  font-size: 20px;
  padding: 0 10px;
}

.author-container .author-avatar img {
  border-radius: 50%;
  display: block;
  height: auto;
  margin: 25px auto;
  max-width: 96px;
}


.author-container .author-meta .blog-desc {
  font-size: 14px;
}

.author-container span {
  line-height: 1.5;
}

.author-container span i {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: inline;
  font-size: 14px;
  font-style: italic;
  line-height: 1.2;
}

.author-container span a {
  color: #fff;
}

.blog-container {
  background: none repeat scroll 0 0 #f2f2f2;
  display: block;
  width: 100%;
  position: absolute;
}

.blog-list-container {
  background: none repeat scroll 0 0 #f2f2f2;
  padding: 30px 50px 150px;
}

.blog-list-container article {
  padding: 50px 0 10px;
}

.single-blog-container {
  background: none repeat scroll 0 0 #f2f2f2;
  margin-top: 100px;
  padding: 50px 100px 50px;
}


.single-page-container {
  background: none repeat scroll 0 0 #f2f2f2;
  padding: 50px 100px 120px;
}

.screen-reader-text {
  display: none;
}

.page-header {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
  color: #343434;
  margin: 20px 0;
  padding-bottom: 10px;
}


/* Next/previous Post Navigation */

.nav-previous, .nav-next {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #e9e9ea;
  font-size: 14px;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  position: fixed;
  text-overflow: ellipsis;
  text-transform: uppercase;
  top: calc(50% - 25px);
  white-space: nowrap;
  width: 220px;
  z-index: 999;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.nav-previous {
  left: -170px;
  padding-left: 10px;
}

.nav-previous a{
  padding-right: 50px;
  transition: all .3s;
  -webkit-transition: all .3s;
}

.nav-previous:after {
  background: #fff;
  color: #e9e9ea;
  content: "\f104";
  font-family: "FontAwesome";
  font-size: 36px;
  height: 60px;
  width: 50px;
  padding-left:20px; 
  position: absolute;
  right: 5px;
  top: 0;
}


.nav-next {
  right: -170px;
  padding-left: 50px;
}

.nav-next a{
  padding-left: 50px;
  transition: all .3s;
  -webkit-transition: all .3s;
}


.nav-next:before {
  background: #fff;
  color: #e9e9ea;
  content: "\f105";
  font-family: "FontAwesome";
  font-size: 36px;
  height: 60px;
  width: 30px;
  padding-left: 15px;
  position: absolute;
  left: 0;
  top: 0;
}


.nav-previous:hover {
  left: 0;
}

.nav-next:hover {
  right: 0;
}

.comments-headline {
  color: #202021;
  font-family: "PT Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin: 50px auto;
  text-align: center;
  text-transform: uppercase;
}

.comments-container {
  padding: 0 100px 100px;
}

/* Featured Post Style */

.featured {
  position: relative;
}
.featured:before {
  font: normal normal normal 15px/1 FontAwesome;
  font-size: 15px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  content: "\f08d";
  top: 25px;
  right: 20px;
  width: 28px;
  height: 28px;
  background: #7a85f1;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  transition: all .5s ease-in 0.1s;
}

.featured:hover:before {
  -webkit-transform: rotate(400deg);
  -moz-transform: rotate(400deg);
  -ms-transform: rotate(400deg);
  -o-transform: rotate(400deg);
  transform: rotate(400deg);
}

.post-template .featured:before {
  display: none;
}

/* Pagination */

.pagination-container {
  margin: 20px auto;
}

.pagination > li {
  display: inline-block;
  margin-right: 5px;
}

.pagination > li > a, .pagination > li > span {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #7c83ca;
  color: white;
  outline: 0;
  text-decoration: none;
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}

.pagination > li > a:hover {
  background: #E65A50;
  border: 1px solid #E65A50;
  color: #fff;
}

.next, .prev {
  padding: 6px 20px !important;
}

.pagination > .active > a, 
.pagination > .active > a:focus, 
.pagination > .active > a:hover, 
.pagination > .active > span, 
.pagination > .active > span:focus, 
.pagination > .active > span:hover {
  background: #3f3f46;
  border-color: #3f3f46;
  color: #fff;
  cursor: default;
  z-index: 2;
}

/* Sidebar/Widget Style */

.sidebar-container {
  background: none repeat scroll 0 0 #f2f2f2;
  color: #000;
  padding: 50px 50px 110px;
}

.widget {
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  color: #797979;
  display: block;
  font-family: "PT Sans",sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8em;
  margin: 20px auto;
  padding: 15px 20px;
  position: relative;
  text-align: left;
  word-wrap: break-word;
}

.widget a {
  color: #202021;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

.widget img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  display: block;
  margin: 10px auto;
}

.widget a:hover {
  color: #7c83ca;
}

.widget-title {
  color: #202021;
  font-family: "PT Sans",sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.widget-subtitle {
  font-family: "PT Sans",sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 15px;
}


.widget ul > li:before {
  content: "\f0da";
  font-family: "FontAwesome";
  padding-right: 10px;
}

.widget.widget_recent_entries ul > li:before {
  content: "\f044";
}

.widget.widget_recent_comments ul > li:before {
  content: "\f0e6";
}

.widget.widget_archive ul > li:before {
  content: "\f133";
}

.widget.widget_categories ul > li:before {
  content: "\f114";
}

.widget.widget_pages ul > li:before {
  content: "\f016";
}

.widget_tag_cloud .tagcloud a:before {
  content: "\f02b";
  font-family: "FontAwesome";
  padding-right: 5px;
  opacity: .8;
}

.widget li a {
  font-size: 16px;
}


.widget form {
  max-width: 100%;
}

.widget select{
  padding: 5px;
  width: 100%;
  height: 40px;
}

.widget select:focus {
  box-shadow: none;
}

.widget select option {
  padding: 5px;
  width: 100%;
}

.widget input, .widget select, .widget textarea {
  max-width: 100%;
  background: #f1f1f1;
  border: 1px solid #f1f1f1;
}

.widget input:focus, .widget textarea:focus {
  -webkit-appearance: none;
  outline: none;
}

.widget ul {
  padding-left: 0px;
}

.widget ul li {
  font-size: 16px;
}

/* Text Widget */
.widget .textwidget {
  font-size: 14px;
  line-height: 28px;
  padding-bottom: 10px;
}

.widget .textwidget img {
  height: auto;
  margin-top: 10px;
  max-width: 100%;
}

.widget .textwidget .wp-caption img {
  margin-top: 0;
}


/* RSS widget*/

.widget.widget_rss .rssSummary {
  font-size: 14px;
  line-height: 24px;
  padding-bottom: 10px;
}

.widget.widget_rss .rss-date {
  display: block;
  font-size: 14px;
  font-style: italic;
  line-height: 24px;
  margin-bottom: 5px;
}

/* Tagcloud widget*/

.widget .tagcloud a {
  background: none repeat scroll 0 0 #ebebeb;
  color: #3f3f46;
  display: inline-block;
  font-size: 12px !important;
  line-height: 20px;
  margin: 3px;
  padding: 8px 15px;
  text-transform: uppercase;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.widget .tagcloud a:hover {
  background: #3f3f46;
  color: #fff;
}


/* Recent Post widget */

.latest-post .media {
  margin-bottom: 30px;
}

.latest-post .media-heading a {
  font-family: PT Sans,sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  text-decoration: none;
  text-transform: uppercase;
}

.media-body {
  font-size: 13px;
  line-height: 20px;
}

.latest-post img {
  height: 80px;
  width: 80px;
}

.blog-search, .blog-search:focus {
  background: none repeat scroll 0 0 #f1f1f1;
  border: medium none !important;
  box-shadow: none;
  float: left;
  height: 35px;
  margin-right: 10px;
  padding-left: 10px !important;
  width: calc(100% - 55px);
  border-radius: 0;
}

.btn-search {
  background-color: #7c83ca;
  border: 0 none !important;
  color: #fff !important;
  float: right;
  height: 33px;
  padding: 0;
  width: 42px;
  border-radius: 0;
}

.btn-search:hover {
  background-color: #e65a50;
  border: 0 none !important;
  color: #fff !important;
  float: right;
  height: 33px;
  padding: 0;
  width: 42px;
}

.latest-post .media {
  margin-bottom: 30px;
}

.latest-post .media-heading a {
  font-family: PT Sans,sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
  text-decoration: none;
  text-transform: uppercase;
}


.media-body {
  font-size: 13px;
  line-height: 20px;
}

.latest-post img {
  height: 80px;
  width: 80px;
}

/* Social Widget */

.widget_social ul > li::before {
  display: none;
}

.widget_social ul > li {
  border: 1px solid #ebebeb;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin-bottom: 5px;
  margin-right: 5px;
  text-align: center;
  width: 50px;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.widget_social ul > li a {
  color: #3f3f46;
  display: block;
}

.widget_social ul > li a i {
  font-size: 21px;
}

.widget_social ul > li:hover {
  background: #3f3f46;
}

.widget_social ul > li:hover > a {
  color: #fff;
}

/* Newsletter Widget */

.widget_newsletter p {
  margin-bottom: 10px; 
}

.widget_newsletter input {
  margin: 8px auto;
  padding: 8px 10px;
  width: 100%;
}

.widget_newsletter input[type="submit"] {
  background: none repeat scroll 0 0 #7c83ca;
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Instagram Widget */

#instafeed img {
  display: inline-block;
  margin: 0;
  padding: 3px;
  width: 25%;
  -webkit-transition: all .2s;
  transition: all .2s;
}

#instafeed img:hover {
  padding: 0;
}


/* Facebook Widget */

.fb-page, .fb-page > span, .fb-page iframe  {
  min-width: 100%;
  max-width: 100%;
  max-height: 300px;
}

.fb_iframe_widget span {
  display: block!important;
  margin: 0 auto!important;
}

/* Blog meta */

.blog-meta {
  background: none repeat scroll 0 0 #fff;
  color: #888;
  font-size: 13px;
  font-style: italic;
  margin: 0 auto;
  padding: 8px 8px 13px;
  text-align: center;
  width: 100%;
}

.blog-meta time {
  margin-right: 20px;
}


.single-blog-meta {
  color: #bbbbbb;
  font-family: "Merriweather",serif;
  font-size: 13px;
  padding: 0;
  text-align: center;
}

.blog-list-container .single-blog-meta {
  text-align: left;
}

.meta-date i, .meta-comments i, .meta-cat i{
  color: #7c83ca;
  font-size: 20px;
}

.single-blog-meta .meta-date, .single-blog-meta .meta-comments, 
.single-blog-meta .meta-cat {
  border-bottom: 1px solid #e2e2e2;
  padding: 30px 0;
}

.single-blog-meta .meta-date{
  border-right: 1px solid #e2e2e2;
}
.single-blog-meta .meta-comments {
  border-right: 1px solid #e2e2e2;
}


.single-blog-meta a {
  color: #bbb;
  text-decoration: none;
}

.single-blog-meta a:hover {
  color: #50626c;
}

.single-blog-meta time {
  margin-right: 20px;
}
.meta-date  time {
  margin-right: 0;
}

.blog-title {
  color: #202021;
  font-family: "PT Sans",sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 48px;
  margin: 10px auto;
  padding-bottom: 50px;
  position: relative;
  text-align: left;
  text-transform: uppercase;
}

.single-blog-header .blog-title, .single-page-header .blog-title {
  color: #fff;
  padding-bottom: 0;
  text-align: center;
}

.single-blog-header .blog-title:after, .single-page-header .blog-title:after{
  display: none;
}

.blog-title a {
  text-decoration: none;
  color: #202021;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.blog-title a:hover {
  color: #50626c;
}

.blog-title:after {
  background: none repeat scroll 0 0 #ebebeb;
  bottom: 20px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 80px;
}

.blog-author {
  display: block;
  margin: 10px auto;
  max-width: 350px;
  text-align: left;
}

.blog-author img {
  max-width: 64px!important;
}

.blog-author .media-heading {
  color: #fff;
  font-family: "PT Sans",sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 10px;
  text-transform: uppercase;
  text-align: center;
}

.blog-author h5 {
  margin: 10px auto;
}

.post-content {
  color: #4d4d4d;
  display: block;
  font-size: 18px;
  font-weight: 300;
  line-height: 2em;
  padding-bottom: 5px;
  position: relative;
  text-align: left;
}

.post-content a {
  -webkit-transition : all .3s;
  transition : all .3s;
}

.post-content figure, .post-content img {
  height: auto;
  margin-bottom: 15px;
  max-width: 100%;
}

.post-content blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  font-style: italic;
}

.post-content blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

.post-content blockquote p {
  display: inline;
  font-size: 15px;
  font-family: "Merriweather", serif;
}

.post-content cite {
  font-style: italic;
}

.post-content ul li {
  list-style-type: square;
}

.post-content ul li ul li{
  list-style-type: disc;
}

.post-content ul li ul li ul li{
  list-style-type: circle;
}

.post-content ol li ol li{
  list-style-type: lower-latin;
}

.post-content ol li ol li ol li{
  list-style-type: lower-roman;
}

.post-player {
  margin: 0px 0px 20px 0px;
  width: 70%;
  min-width: 320px;
}
 
.post-player iframe {
  height: 90px;
  width: 100%; 
  padding-top: 5px;
  border: none;
}

.btn-read-more {
  background: none repeat scroll 0 0 #f2f2f2;
  border: 1px solid #3f3f46;
  border-radius: 0;
  color: #3f3f46;
  font-size: 12px;
  letter-spacing: 2px;
  margin: 15px auto;
  padding: 10px 50px;
  text-transform: uppercase;
}

.btn-read-more:hover {
  background: #3f3f46;
  padding: 10px 50px;
  color: #fff;
  border: 1px solid #3f3f46;
  border-radius: 0;

}

.post-author {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #797979;
  margin: 30px auto;
  padding: 20px;
}

.author-avatar img {
  border-radius: 50%;
  margin: 10px auto;
  display: block;
  max-width: 96px;
  height: auto;
}

.post-author h4 {
  font-family: "PT Sans",sans-serif;
  font-size: 24px;
  font-weight: bold;
  margin: 10px auto;
  text-transform: uppercase;
}

.post-author h4 a{
  color: #202021;
  transition: all .3s;
}

.post-author h4 a:hover{
  color: #50626c;
}

.post-author h5 {
  font-size: 14px;
  margin: 10px auto;
  text-transform: uppercase;
}
.post-author p {
  color: #202021;
}

.post-author span {
  font-size: 12px;
  font-style: italic;
  font-family: "Merriweather", serif;
}

.post-tags{
  display: inline-table;
  margin: 0 auto;
  text-align: center;
}

.post-tags ul{
  display: inline-block;
  margin: 15px auto;
}

.post-tags ul li{
  display: inline-block;
  list-style: none;
  padding: 0 30px 0 25px;
  position: relative;
  line-height: 50px;
}

.post-tags ul li::before {
  color: #b8b8b8;
  content: "\f10c";
  font-family: "FontAwesome";
  font-size: 8px;
  line-height: 50px;
  position: absolute;
  left: -5px;
  top: 0;
  width: 10px;
}

.post-tags ul li:first-child::before {
  display: none;
}


.post-tags ul li a {
  color: #7a85f1;
  font-family: "Merriweather";
  font-size: 13px;
  font-weight: lighter;
  text-transform: uppercase;
}

.social-share {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #949494;
  font-size: 14px;
  font-weight: 400;
  line-height: 72px;
  text-transform: uppercase;
  padding-bottom: 15px;
}

.social-share h5 {
  font-size: 14px;
  line-height: 100%;
  margin: 20px auto 0;
}

ul.social-share-links {
  float: right;
  margin-bottom: 20px;
}


ul.social-share-links li {
  float: left;
  height: 100%;
  line-height: 100%;
  padding: 0 15px;
}

ul.social-share-links li a {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

ul.social-share-links li a i {
  font-size: 24px;
}


.comments-area {
  background: rgba(255, 255, 255, 0.8);
  color: #797979;
  font-size: 17px;
  margin: 10px auto;
  padding: 50px;
}

.comments-area a {
  -webkit-transition: all .3s;
  transition: all .3s;
}

ol.comment-list li {
  list-style: none;
}

.comments-area .comments-title, .comments-area .comment-reply-title {
  font-family: "PT Sans",sans-serif;
  font-size: 24px;
  margin: 0 0 60px;
  text-align: center;
  text-transform: uppercase;
}

.comments-area footer {
    margin-top: 0;
    text-align: left;
}
.comment-respond .comment-reply-title {
    margin-top: 50px;
}
.comments-area .comment-list {
    padding-left: 0;
}
.comments-area .comment-list, .comments-area .comment-list .children {
    list-style-type: none;
}
.comments-area .comment-metadata {
    margin-bottom: 15px;
}
.comments-area .comment-metadata a {
    color: #8e8e8e;
    font-size: 13px;
}
.comments-area .comment-author img {
    float: left;
    height: 60px;
    margin-right: 20px;
    width: 60px;
}
.comments-area .comment-author a {
    color: #35353c;
    text-decoration: none;
}
.comments-area .comment-author .says {
    display: none;
}
.comments-area .comment-metadata {
    font-size: 12px;
}
.comments-area .comment-content {
    color: #323232;
    font-size: 14px;
    line-height: 30px;
    margin-top: 10px;
}
.comment-body {
    border-top: 1px dashed #e8e8e8;
    padding-top: 30px;
}
.comments-area .comment-content, .comments-area .comment-awaiting-moderation, .comments-area .reply {
    padding-left: 80px;
}
.comments-area .comment-awaiting-moderation {
    font-size: 12px;
}
.comments-area .reply {
    margin-bottom: 20px;
}
.comments-area .reply .comment-reply-link {
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
}
.comments-area .reply .comment-reply-link:hover {
    color: #3c3c3c;
}
.comments-area .comment-respond {
    border-top: 1px dashed #e8e8e8;
    margin-bottom: 70px;
    outline: 0 none;
}
.comments-area .comment-form-comment label, .comments-area .comment-form-comment textarea {
    width: 100%;
}
.comments-area .comment-form-comment textarea, .comments-area .comment-respond .comment-form-author input, .comments-area .comment-respond .comment-form-email input, .comments-area .comment-respond .comment-form-url input {
    border: 1px solid #e8e8e8;
    box-shadow: none;
    color: #808086;
    font-size: 13px;
    font-weight: 300;
    outline: 0 none;
    padding: 8px 10px;
}
.comments-area .comment-respond .form-submit input {
    background: none repeat scroll 0 0 #3c3c3c;
    border: medium none;
    color: #fff;
    display: inline-block;
    font-weight: 300;
    margin-top: 20px;
    outline: 0 none;
    padding: 12px 35px;
    text-decoration: none;
}
.comments-area .comment-respond .form-submit input, .comments-area .comment-respond .form-submit input:hover {
    transition: all 0.2s ease-out 0s;
}
.comments-area .comment-respond .comment-form-author label, .comments-area .comment-respond .comment-form-email label, .comments-area .comment-respond .comment-form-url label {
    width: 100px;
}
.comments-area .comment-notes {
    font-weight: 300;
    margin-bottom: 30px;
}
.comments-area .comment-form label {
    color: #323232;
    font-size: 13px;
}
.blog-post .media, .media-body {
    color: #a1a1a1;
    font-family: open sans;
    font-size: 13px;
}
.comments-area .blog-img-wide.blogdetails img {
    height: auto;
    padding: 20px;
    width: 100%;
}
.post-edit-link {
    font-size: 13px;
    font-weight: normal;
}


.page-footer {
  background: none repeat scroll 0 0 #ebebeb;
  bottom: 0;
  display: block;
  min-height: 60px;
  padding: 20px 50px;
  position: absolute;
  width: 100%;
}



/* ----------------------------------------------------
/* 5.  Custom Error Page Style
/* ---------------------------------------------------- */


.error-image img {
  display: block;
  font-size: 72px;
  font-weight: bold;
  height: 150px;
  margin: 10px auto 40px;
}

.error-container {
  background-color: #101524;
  display: table;
  height: 100vh;
  overflow-x: hidden;
  width: 100%;
}

.error404 .anonymous {
  margin: 0 auto 20px;
  display: block;
}

.error-404 {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
  display: table-cell;
  vertical-align: middle;
}
.error-404 .page-content p {
  color: #c8c8c8;
}

.error-title {
  color: #fff;
  font-family: "PT Sans", sans-serif;
  font-size: 42px;
  font-weight: bold;
  text-transform: uppercase;
}

.search-title {
  font-size: 48px;
  color: #3f3f46;
}

.page-content, .page-content p {
  color: #797979;
  font-size: 18px;
}

.about-portrait {
  border-radius: 50%;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
  float: left;
  clear: both;
  margin-right: 30px;
}

.clear-both {
  clear: both;
}





/* 7.5. Koenig Styles -- Required for Ghost 3.0
/* ---------------------------------------------------------- */

.post-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-full-content .kg-image {
  margin: 0 auto;
  max-width: 100%;
}

/* Preventing full-width image overlap with post image.  */
.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
  width: 100%;
}

.post-full-content .kg-width-wide .kg-image {
  max-width: 1040px;
}

.post-full-content .kg-width-full .kg-image {
  max-width: 100vw;
}

.post-full-content figure {
  margin: 0.8em 0 2.3em;
}

.post-full-content h1 + figure,
.post-full-content h2 + figure,
.post-full-content h3 + figure,
.post-full-content h4 + figure {
  margin-top: 2em;
}

.post-full-content figure img {
  margin: 0;
}

.post-full-content figcaption {
  margin: 1.0em auto 0;
  color: color(var(--midgrey) l(-10%));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 75%;
  line-height: 1.5em;
  text-align: center;
  max-width: 1040px;
}

.kg-width-full figcaption {
  padding: 0 1.5em;
}

.kg-embed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.kg-embed-card .fluid-width-video-wrapper {
  margin: 0;
}


@media (max-width: 1040px) {
  .post-full-content .kg-width-full .kg-image {
      width: 100vw;
  }
}

.kg-gallery-container {
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  width: 100vw;
}

.kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
  margin: 0.75em 0 0 0;
}

.kg-gallery-image:not(:first-of-type) {
  margin: 0 0 0 0.75em;
}

.kg-gallery-card + .kg-image-card.kg-width-wide,
.kg-gallery-card + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
  margin: -2.25em 0 3em;
}

/* keep existing <pre> styles for code cards with captions */
.kg-code-card {
  width: 100%;
}

.kg-code-card pre {
  margin: 0;
}

.kg-bookmark-card {
  width: 100%;
}

.kg-card + .kg-bookmark-card {
  margin-top: 0;
}

.post-full-content .kg-bookmark-container {
  display: flex;
  min-height: 148px;
  color: var(--darkgrey);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
}

.post-full-content .kg-bookmark-container:hover {
  color: var(--darkgrey);
  text-decoration: none;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
}

.kg-bookmark-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.kg-bookmark-title {
  color: color(var(--midgrey) l(-30%));
  font-size: 1.6rem;
  line-height: 1.5em;
  font-weight: 600;
  transition: color 0.2s ease-in-out;
}

.post-full-content .kg-bookmark-container:hover .kg-bookmark-title {
  color: var(--blue);
}

.kg-bookmark-description {
  display: -webkit-box;
  overflow-y: hidden;
  margin-top: 12px;
  max-height: 48px;
  color: color(var(--midgrey) l(-10%));
  font-size: 1.5rem;
  line-height: 1.5em;
  font-weight: 400;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kg-bookmark-thumbnail {
  position: relative;
  min-width: 33%;
  max-height: 100%;
}

.kg-bookmark-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 3px 3px 0;

  object-fit: cover;
}

.kg-bookmark-metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  color: color(var(--midgrey) l(-10%));
  font-size: 1.5rem;
  font-weight: 400;
}

.post-full-content .kg-bookmark-icon {
  margin-right: 8px;
  width: 22px;
  height: 22px;
}

.kg-bookmark-author {
  line-height: 1.5em;
}

.kg-bookmark-author:after {
  content: "•";
  margin: 0 6px;
}

.kg-bookmark-publisher {
  overflow: hidden;
  max-width: 240px;
  line-height: 1.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .post-full-content figure {
      margin: 0.2em 0 1.3em;
  }

  .post-full-content h1 + figure,
  .post-full-content h2 + figure,
  .post-full-content h3 + figure,
  .post-full-content h4 + figure {
      margin-top: 0.9em;
  }
}

@media (max-width: 500px) {
  .post-full-content .kg-width-wide,
  .post-full-content .kg-width-full {
      margin-right: -5vw;
      margin-left: -5vw;
  }

  .post-full-content figcaption {
      margin-bottom: 0.4em;
  }

  .post-full-content .kg-bookmark-container {
      flex-direction: column;
  }

  .kg-bookmark-title,
  .kg-bookmark-description,
  .kg-bookmark-metadata {
      font-size: 1.4rem;
      line-height: 1.5em;
  }

  .post-full-content .kg-bookmark-icon {
      width: 18px;
      height: 18px;
  }

  .kg-bookmark-thumbnail {
      order: 1;
      min-height: 160px;
      width: 100%;
  }

  .kg-bookmark-thumbnail img {
      border-radius: 3px 3px 0 0;
  }

  .kg-bookmark-content {
      order: 2;
  }

  .post-full-content .kg-bookmark-container,
  .post-full-content .kg-bookmark-container:hover {
      color: rgba(255, 255, 255, 0.75);
      box-shadow: 0 0 1px rgba(255,255,255,0.9);
  }

  .kg-bookmark-title {
      color: #fff;
  }

  .kg-bookmark-description {
      color: rgba(255, 255, 255, 0.75);
  }

  .kg-bookmark-metadata {
      color: rgba(255, 255, 255, 0.75);
  }

}