* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }


body {overflow-x: hidden; }
body::-webkit-scrollbar { width: 8px; height: 5px; background-color: #f5f5f5;}
body::-webkit-scrollbar-track {background-color: #fafafa;}
body::-webkit-scrollbar-thumb {background-color: #f96332;}


a, button {color:initial; transition: 0.5s all; text-decoration-color: transparent;}
a:hover, button:hover {text-decoration-color: inherit; opacity:0.8 }
  
.loadingPage { height: 100dvh!important;display:flex; justify-content: center; align-items: center;  height: 100%; color: #ffffff;
               font-family: 'Baloo 2', sans-serif;  letter-spacing: -1px; font-weight: 100; background: #3A4558;
               margin: 0; padding: 0;}
  
.loadingPage p {font-size: 2em;}

.blog-header-logo { font-family: "Roboto", sans-serif; font-size: 2.25rem;letter-spacing: -3px;
    font-weight: 200;}

.blog-header-logo:hover { text-decoration: none;}

h1, h2, h3, h4, h5, h6, p, ol li, ul li { font-family: "Roboto", sans-serif;
  font-optical-sizing: auto; font-style: normal; }

ol li, ul li {font-size: 17px;}


h2 {font-size: 22px; letter-spacing: -1px; margin-top: 0.92em; line-height: 28px; font-weight: 300;}
h3 { letter-spacing: -1.5px;}
h4 { font-weight: 500;}
p, ul li { letter-spacing: -0.5px;}
.lead {font-size: 1.1rem;}

section {margin-bottom: 10px;} 

div.featured div h3 { font-weight: 500;}

.flex-auto {flex: 0 0 auto;}

.h-250 { height: 250px; }


/* Pagination */
.blog-pagination { margin-bottom: 4rem;}

/*
 * Blog posts
 */
.blog-post {margin-bottom: 4rem;}
.blog-post-meta { margin-bottom: 1.25rem; color: #727272;}


.bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none;
    -moz-user-select: none; user-select: none; }

.mainPost img {width: 100%; height:100%;  padding:  0; border: 1px solid #e6dede; }

blockquote { margin: 0 0 1rem 2rem!important; background-color: #fafafa; padding: 10px; }

.font-monospace { font-family: var(--bs-font-monospace) !important;}

figure { position: relative; }

figcaption {font-size: 11px; margin-top: 5px; position: absolute; bottom: 0; left: 0px; background: #000; 
            color: #fff; padding: 5px 10px; text-transform: uppercase;}


.bd-mode-toggle { z-index: 1500; }
.bd-mode-toggle .dropdown-menu .active .bi { display: block !important; }

footer p {margin-bottom: 0; font-size: 13px; }




div.category { margin-top: 20px;  }
div.category span { letter-spacing: -0.5px; font-size: 11px; background-color: #F86333;
                                       padding: 1px 5px; text-transform:uppercase; font-weight: 500; 
}

#landing div.bannerImg {background-size: cover; height:100%;min-height:140px;background-position:center;  }

#landing h2 {margin-top: 0;}

#post .mainImage { width: 100%; min-height: 500px;}
#post h1 {font-size: 42px;  line-height: 52px; margin-bottom: -0.27em; letter-spacing: -2px; font-weight: 600; }
#post h2 {font-size: 22px; letter-spacing: -1px; margin-top: 0.92em; line-height: 28px; font-weight: 300;}
#post h3 {font-size: 22px; letter-spacing: -1px; margin-top: 0.92em; line-height: 28px; font-weight: 600;margin-bottom:30px}
#post p {font-size: 18px;  font-weight: 400;margin-bottom:20px;line-height:30px;}

#post .headerTitle p {font-size: 14px;  font-weight: 200; line-height:22px; }  


#post div.authorBlock img {width: 44px; display: block; background-color: #F2F2F2; height: 44px; border-radius: 50%;
                               box-sizing: border-box; }
#post div.authorBlock  p {margin-bottom: 0; font-weight: 200; letter-spacing: -0.5px; line-height:22px;}
#post .btn {margin-right:10px;}

svg.sidbar {vertical-align: sub;}

.video-background {display: flex;height:220px;}
figure.video-background {margin: 0;}
.video-background iframe {flex: 1;}

@media (min-width: 576px) {
    .video-background {height:295px;}
}

@media screen and (max-width: 768px) {
    .bd-placeholder-img-lg {font-size: 3.5rem;}
    #landing div.banner {min-width:initial;}  
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {font-size: 3.5rem;}
    .h-md-250 { height: 250px; }
    h1 { font-size: 36px; line-height: 38px; }
    .video-background {height:330px;}
}

@media (min-width: 992px) {
    #landing div.banner {height: 100%; }
    h1 {font-size: 42px;  line-height: 50px; margin-bottom: -0.27em; letter-spacing: -2px; font-weight: 600; }
    h2 {font-size: 30px;  line-height: 35px; margin-bottom: -0.27em; letter-spacing: -2px; font-weight: 600; margin-top: 0;  }
    .video-background {height:442px;}

}

@media (min-width: 1200px) {
    .video-background {height:525px;}
}

@media (min-width: 1400px) {
    .video-background {height:612px;}
}