:root {
--title-hover-color: #c0a0c4;
}
.screen-reader-text {
position: absolute;
left: -1000em;
} .aligncenter {
display: block;
margin-left: auto;
}
.alignleft {
float: left;
margin: 7px 7px 0 0;
}
.alignright {
float: right;
margin: 7px 0 0 7px;
} h2.coming-soon {
text-align: center;
}
main {
ol  {
counter-reset: my-counter; padding: 0;
margin: 10px 0;
overflow: visible; position: relative;
text-align: left;
li {
counter-increment: my-counter; display: block;
list-style: none;
margin: 0;
padding: 0 0 15px 0;
position: relative;
&:before {
content: counter(my-counter) ". "; color: #c39750;
font-size: 18px;
font-weight: 800;
padding: 0 2px 0 0;
}
}
}
} body.blog {
main {
padding: 0;
margin: 0 auto;
background-color: #e7f2f7;
max-width: 100%;
}
.internal {
#interior-banner {
.contain {
#page-title {
h1 {
text-align: center;
padding: 0;
margin: 0 auto;
color: #fff;
max-width: 1500px;
text-transform: capitalize;
}
}
}
}
}
.content-container {
padding: 50px 20px;
.post {
margin: 50px auto;
padding: 20px;
max-width: 1200px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: left;
position: relative;
&:first-of-type {
margin: 0 auto 50px;
}
&:last-of-type {
margin: 0 auto;
}
.storytitle {
text-align: left;
margin: 0;
a {
width: 100%;
display: block;
text-decoration: none;
&:hover {
color: var(--title-hover-color);
}
&.is-hover {
color: var(--title-hover-color);
}
}
&:hover {
& + .date {
& + .storycontent { figure {
img {
transform: scale(1.035);
transition: all 0.3s;
}
} .wp-block-image {
img {
transform: scale(1.035);
transition: all 0.3s;
}
} .western {
img {
transform: scale(1.035);
transition: all 0.3s;
}
} .featured-image {
img {
transform: scale(1.035);
transition: all 0.3s;
}
}
}
}
}
}
.date {
font-size: 18px;
font-weight: 700;
margin: 10px 0 15px;
}
.storycontent {
figure {
max-width: max-content;
margin: 0.5em 1em 0.5em 0;
float: left;
a {
max-width: 100%;
display: block;
img {
transition: all 0.3s;
&:hover {
transform: scale(1.035);
transition: all 0.3s;
}
}
}
}
.featured-image {
float: left;
display: block;
margin: 0 10px 10px 0;
transition: all 0.3s;
&:hover {
img {
transform: scale(1.035);
transition: all 0.3s;
}
}
img {
height: auto;
transition: all 0.3s;
}
}
}
}
}
} body.single-post {
main {
padding: 0;
margin: 0 auto;
background-color: #e7f2f7;
max-width: 100%;
}
.internal {
#interior-banner {
.contain {
#page-title {
h1 {
text-align: center;
padding: 0;
margin: 0 auto;
color: #fff;
max-width: 1500px;
text-transform: capitalize;
}
}
}
}
}
.content-container {
padding: 50px 20px;
.post {
margin: 0 auto;
padding: 20px;
max-width: 1200px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: left;
position: relative;
.featured-image + h2 {
margin: 0;
padding: 0;
}
.wp-block-heading {
text-align: left;
}
h2 {
margin: 0;
padding: 30px 0 0;
&:first-child {
padding: 0;
}
}
.featured-image + h3 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 30px 0 0;
&:first-child {
padding: 0;
}
}
.storytitle {
margin: 0;
a {
text-decoration: none;
}
}
.date {
font-size: 18px;
font-weight: 700;
margin: 0 0 15px;
}
.storycontent {
.featured-image {
float: left;
display: block;
margin: 0 20px 10px 0;
img {
height: auto;
}
}
}
}
}
} .navigation {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 15px 0;
background-color: #fff;
font-size: 18px;
text-align: center;
a {
text-decoration: none;
padding: 10px;
transition: color 0.3s ease;
&:hover {
text-decoration: underline;
}
}
.nav-previous {
margin: 0 10px;
}
.nav-next {
margin: 0 10px;
}
}
@media screen and (max-width: 1024px) { body.single-post {
} body.blog {
}
}
@media screen and (max-width: 1000px) { body.single-post {
.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
text-align: center !important;
}
.date {
text-align: center !important;
}
.content-container {
.post {
.storytitle {
text-align: center !important;
}
.wp-block-heading {
text-align: center !important;
}
.storycontent {
.wp-block-image {
figure {
float: none;
margin: 0 auto 20px;
display: block;
img {
display: block;
margin: 0 auto;
width: 100% !important;
}
}
}
.featured-image {
float: none;
margin: 0 auto 20px;
a {
display: block;
max-width: max-content;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
width: 100% !important;
}
}
}
}
}
}
}
@media screen and (max-width: 850px) { body.blog {
.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
text-align: center !important;
}
.date {
text-align: center !important;
}
.content-container {
.post {
.storytitle {
text-align: center !important;
}
.storycontent {
figure {
max-width: 100%;
margin: 0 auto 20px;
display: block;
float: none;
a {
display: block;
max-width: 100%;
margin: 0 auto;
img {
display: block;
margin: 0 auto;
width: 100% !important;
}
}
}
.featured-image {
float: none;
margin: 0 0 20px;
a {
display: block;
max-width: 100%;
}
margin: 0 auto;
img {
display: block;
margin: 0 auto;
width: 100% !important;
}
}
}
}
}
}
}