@charset "UTF-8";
/* autoprefixed 050922 */

#blogContent {
   grid-area: body;
}

.blogStoryIntro {
   margin: 0 0 2rem 0;
   background-color: #e4e9ea;
   border: 1px solid #f7f9f9;
   border-radius: 0 0 12px 12px;
}

.blogStoryIntro h1,
.blogStoryIntro h1 a {
   background-color: #0a4044;
   color: #f7f9f9;
   padding: 0.5rem;
   line-height: 3rem;
   text-align: center;
   text-decoration: none;
   font-family: belarius-poster-wide, sans-serif;
}

.blogStoryIntro a:hover {
   text-decoration: underline;
}

.blogPad {
   margin: 0.5rem 1rem;
}

.blogPadEnd {
   margin: 0 1rem 2rem 1rem;
}

h2.blogPad,
h3.blogPad {
   margin: 1rem;
}

.blogStoryFull {
   padding: 12px;
}

.blogBar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 2rem;
   background-color: #f7f9f9;
   border-radius: 0 0 12px 12px;
   font-size: 0.9rem;
   width: 100%;
   margin: 1rem 0 0 0;
}

.blogPages {
   display: flex;
   justify-content: center;
   align-items: center;
}

.blogCopyImg {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 0;
}

.thumbnail {
   width: 50px;
   height: auto;
   margin: 0.5rem;
   border: 1px solid #f7f9f9;
   -o-object-fit: contain;
   object-fit: contain;
}

.img100 {
   width: 100px;
   height: auto;
   padding: 0.5rem 0 0 0;
   border: 1px solid #f7f9f9;
   -o-object-fit: contain;
   object-fit: contain;
}

.img200 {
   width: 200px;
   height: auto;
   margin: 1rem;
   border: 1px solid #f7f9f9;
   -o-object-fit: contain;
   object-fit: contain;
}

.img300 {
   width: 300px;
   height: auto;
   margin: 1rem;
   border: 1px solid #f7f9f9;
   -o-object-fit: contain;
   object-fit: contain;
}

.img200home {
   width: 200px;
   height: auto;
   margin: 1rem;
   border: 1px solid #f7f9f9;
   -o-object-fit: contain;
   object-fit: contain;
   display: none;
}

.img300item {
   width: 300px;
   height: auto;
   margin: 1rem;
   border: 1px solid #f7f9f9;
   -o-object-fit: contain;
   object-fit: contain;
   display: none;
}

.img400 {
   width: 400px;
   height: auto;
   margin: 1rem;
   border: 1px solid #f7f9f9;
   -o-object-fit: contain;
   object-fit: contain;
}

/* for blog links on home page */
.blogLinks {
   font-size: 0.9rem;
}

.blogPad a,
.blogBar a,
.blogPages a,
.blogLinks a {
   color: #42a7c6;
   text-decoration: none;
}

.blogPad a:hover,
.blogBar a:hover,
.blogPages a:hover,
.blogLinks a:hover {
   text-decoration: underline;
}

.titleLinks a,
.titleLinks a:hover,
.titleLinks a:visited {
   color: #0a4044;
}

.keepReading {
   display: flex;
   justify-content: left;
   font-size: 0.9rem;
   padding: 0.7rem 0;
}

/* Blog section on homepage – develop here */
.homeBlogBox {
   margin: 1rem 0;
   padding: 0.5rem 0 0.5rem 1rem;
   background-color: #f7f9f9;
}

/* for blog box on homepage */
#box2.contentLight {
   padding: 0;
}

#box2.contentLight h1 {
   padding: 3rem 3rem 0 3rem;
}

.homeBlogBox details {
   border-top: 1px dotted #0a4044;
   margin: 0.6rem 0 0 0;
   padding: 0.3rem 0 0 0;
}

.homeBlogFlex {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

summary {
   color: #42a7c6;
   font-size: 0.9rem;
}

.homeBlogBox p {
   padding: 0;
}

#homeBlog1 {
   display: none;
   /* transition: all 0.6s ease; */
}

#homeBlog2 {
   display: block;
   /* transition: all 0.6s ease; */
}

@media only screen and (max-width: 1024px) {
   #box2.contentLight h1 {
      padding: 2.5rem 2.5rem 0 2.5rem;
   }

   #homeBlog1 {
      display: block;
   }

   #homeBlog2 {
      display: none;
   }

   .homeBlogFlex {
      flex-direction: column;
   }

   .img100 {
      display: none;
   }

   .img200home {
      display: block;
      border-radius: 0 0 1rem 1rem;
   }

   .img300item {
      display: block;
   }

   .img400 {
      display: none;
   }

   .homeBlogBox {
      padding: 0.5rem 1rem;
   }
}

@media only screen and (max-width: 768px) {
   #box2.contentLight h1 {
      padding: 1rem 1rem 0 1rem;
   }

   .blogCopyImg {
      flex-direction: column;
      align-items: center;
   }

   .img200 {
      border-radius: 0 0 0.6rem 0.6rem;
   }

   #homeBlog1 {
      display: none;
   }

   #homeBlog2 {
      display: block;
   }
}

@media only screen and (max-width: 600px) {
   /* contentLight on allStyle */
   #blogContent.contentLight {
      padding: 0 0 2rem 0;
   }

   .blogStoryIntro {
      border-radius: 0;
   }

   .blogBar {
      border: 0;
      border-radius: 0;
   }
}