@font-face {
  font-family:'Manrope';
  src: url('Manrope-VariableFont_wght.ttf') format('truetype');}

@font-face {
  font-family:'Inter';
  src: url('Inter-VariableFont_opsz,wght.ttf') format('truetype');}

@font-face {
  font-family:'Cantarell';
  src: url('Cantarell-Regular.ttf') format('truetype');}
  
@font-face {
  font-family:'Anton';
  src: url('Anton-Regular.ttf') format('truetype');}  

@font-face {
  font-family:'Momo Trust Display';
  src: url('MomoTrustDisplay-Regular.ttf') format('truetype');}    

* {box-sizing:border-box;}

body {margin:0; background-color:#FFF;}

html, body {font-family:'Manrope'; font-size:16px; line-height:1.5; color:#333;}

div, p, ul, h1, h2 {margin:0px;}

h1, h2 {font-family:'Inter'; color:#000; font-weight:bolder;}

h1 {font-size:32px;}

h2 {font-size:24px;}

a {color:#000; text-decoration:none; font-weight:bold;}

a:hover {color:#1E90FF; text-decoration:none;}

strong, b {text-decoration:none; font-weight:bolder;}

strong {color:#000;}

b {color:#888BA3;}

.page {width:100%; padding:10px 5%;}

.page-content {display:block; max-width:800px; margin-left:auto; margin-right:auto;}

.header {border:none;}

.logo-black {color:#000; font-family:'Cantarell'; font-size:32px; font-weight:bold;}

.logo-blue {color:#1E90FF; font-family:'Momo Trust Display'; font-size:34px; font-weight:bolder;}

.navbar {display:flex; justify-content:space-between; align-items:center; padding:10px 10px;}

.hamburger {display:none;}

.bar {display:block; width:25px; height:3px; margin:5px auto; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; background-color:#444BA3;}

.nav-menu {display:flex; justify-content:space-between; align-items:center;}

.nav-item {margin-left:10px;}

.nav-link {font-size:15px; color:#000;}

.nav-link:hover {color:#1E90FF; text-decoration:none;}

.container {position:relative; display:table; width:100%; height:auto; padding:10px;}

.post, .section {margin-left:auto; margin:0em 0em 1em 0em;}

.post {position:relative; background-color:#FFF; padding:10px; border:1px solid #EEE; border-radius:10px;}

.pinned, .spacer {position:relative; display:table-cell; /*width:33.33%;*/ background-color:#FFF; border:1px solid #EEE; border-radius:10px; padding:10px;}

.overlay {position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; z-index:10; background-color:rgba(255, 255, 255, 0.02); border-radius:10px;}

.overlay:hover {background-color:rgba(255, 255, 255, 0.09); box-shadow:0 7px 7px rgba(0, 0, 0, 0.09);}

.page-title, .section-title, .post-title, .post-title-sm {font-family:'Inter'; color:#000; font-weight:bolder;}

.page-title {font-size:32px; text-decoration:none;}

.post-title, .section-title {font-size:24px; text-decoration:none; text-align:left;}

.post-title-sm {font-size:18px; text-decoration:none;}

.post-date, .post-date-sm, .description {font-style:italic; color:#444BA3; margin:0px 0px 10px 10px;}

.post-date, .description {font-size:14px; text-decoration:none; margin-bottom:10px;}

.post-date-sm {font-size:12px; text-decoration:none;}

.post-read-all {text-align:left; font-size:15px; color:#444BA3; margin:10px 0px 0px 10px;}

.metric-container {display:table; width:100%; padding:0px; margin-top:0px;}

.metric, .metric-spacer {display:table-cell; margin:5px; padding:10px; text-align:left;}

.metric {width:50%; /*border:1px solid #EEE; border-radius:10px;*/ background-color:#FFF;}

.metric-spacer {width:50%; border:none; background-color:transparent;}

p.data {font-size:24px; text-decoration:none; text-align:left; margin:0px 0px 10px 10px;}

.icon {max-width:40px; height:auto; padding:5px;}

.icon:hover {animation:shake 0.1s; animation-iteration-count:infinite;}
@keyframes shake {
  0% { transform: translate(3px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -1px) rotate(-3deg); }
  20% { transform: translate(-1px, 0px) rotate(4deg); }
  30% { transform: translate(1px, 2px) rotate(1deg); }
  40% { transform: translate(2px, -1px) rotate(0deg); }
  50% { transform: translate(-3px, 3px) rotate(-1deg); }
  60% { transform: translate(-3px, 2px) rotate(0deg); }
  70% { transform: translate(4px, 3px) rotate(-1deg); }
  80% { transform: translate(-0px, -2px) rotate(7deg); }
  90% { transform: translate(2px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -4px) rotate(-1deg); }
}

.social-icons {text-align:center; margin-bottom:30px;}

.profile-img {display:block; margin-left:auto; margin-right:auto; max-width:150px; height:auto; border-radius:50%; padding:15px;}

.yt-video {aspect-ratio:16 / 9; width:100%;}

.prevent-select, img {-webkit-user-select:none; -ms-user-select:none; user-select:none;}

hr {width:100%; border:1px solid #888BA3;}

li {list-style:none;}

.accordion {background-color:transparent; color:#333; cursor:pointer; padding:5px; width:100%; border:none; text-align:left; outline:none; font-family:'Inter'; font-size:20px; font-weight:bold; border-bottom:1px solid #EEE; transition:0.4s;}

.active, .accordion:hover {background-color:rgba(255, 255, 255, 0.09);}

.accordion:after {content:'\002B'; color:#444BA3; font-weight:bold; float:right; margin-left:5px;}

.active:after {content:"\2212";}

.panel {padding:0px 0px; background-color:transparent; max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; border:none;}

.col-container {display:table; width:100%;}

.col {display:table-cell; padding:5px; vertical-align:top;}

.col p {padding:0px; margin:0px;}

.col img {padding:20px 0px 20px 0px;}

.data {color:#000; font-size:24px; text-decoration:none; font-weight:bolder; text-align:center;}

div.album, div.gallery {display:flex; flex-wrap:wrap; justify-content:flex-start;}

div.album-item, div.gallery-item {margin:5px; width:calc(25% - 20px); background-color:rgba(255, 255, 255, 0.02); box-shadow:0 7px 7px rgba(255, 255, 255, 0.09); border-radius:10px;}

div.album-item:hover, div.gallery-item:hover {background-color:rgba(255, 255, 255, 0.09); box-shadow:0 7px 7px rgba(0, 0, 0, 0.09);}

div.album-item img, div.gallery-item img  {max-width:100%; height:auto;}

div.album-item div.desc, div.gallery-item div.desc {padding:15px; text-align:center; font-weight:bold;}


div.stat {display:flex; flex-wrap:wrap; justify-content:flex-start;}

div.stat-item {margin:5px; padding:15px; width:calc(25% - 20px); background-color:transparent;}

div.stat-item img  {max-width:100%; height:auto;}

div.stat-item div.title {padding:0px; text-align:center; font-weight:bold;}

div.stat-item div.desc {padding:0px; text-align:center; font-size:12px; color:#888; font-style:italic;}

div.stat-item div.metric {padding:0px; text-align:center; font-size:36px; color:#000; font-weight:bolder;}

@media only screen and (max-width: 768px) {div.stat-item {width:calc(50% - 20px);}}

@media only screen and (max-width: 480px) {div.stat-item {width:calc(100% - 20px);}}


@media only screen and (max-width: 768px) {
  div.album-item, div.gallery-item {width:calc(50% - 20px);}
}

@media only screen and (max-width: 480px) {
  div.album-item, div.gallery-item {width:calc(100% - 20px);}
}

@media only screen and (max-width:900px) {
    .nav-menu {position:fixed; left:-100%; top:0px; flex-direction:column; background-color:#000; width:100%; border-radius:10px; text-align:center; transition:0.3s; box-shadow:0 10px 27px rgba(0, 0, 0, 0.05); z-index:20;}
    .nav-link {color:#777BA3; font-size:22px;}
    .nav-link:hover {color:#FFF;}
    .nav-menu.active {left:0;}
    .nav-item {margin:10px 10px;}
    .hamburger {display:block; cursor:pointer; z-index:30;}
    .hamburger.active .bar:nth-child(2) {opacity:0;}
    .hamburger.active .bar:nth-child(1) {transform:translateY(8px) rotate(45deg);}
    .hamburger.active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
}

@media only screen and (max-width:800px) {
    .pinned {display:block; width:100%; text-align:left;}
    .spacer, .metric-spacer {display:none;}
    .metric {display:block; min-width:100%; max-width:100%; text-align:left;}
    .col {display:block; width:100%;}
    .col img {padding:0px;}
    .album-date-sm, .album-title-sm {text-align:left;}
    .album img {justify-content:left;}
}

@media screen and (max-width: 600px) {
    .page {padding:10px 2%;}
    h1, .post-title, .page-title, .logo-black {font-size:22px;}
    h2, .section-title, .data {font-size:20px;}
    .logo-blue {font-size:26px;}
}

@media screen and (min-width:601px) {
    .page {padding:10px 5%;}
}