.text-center {
text-align: center;
} body {
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Playfair Display", serif;
}
h1,
.h1 {
font-size: min(max(1.5rem, calc(1.5rem + ((1vw - 0.359375rem) * 0.8922))), 2.25rem);
line-height: 110%;
margin-bottom: 20px;
font-weight: 700;
}
h2,
.h2 {
font-size: min(max(1.25rem, calc(1.25rem + ((1vw - 0.359375rem) * 0.8922))), 2rem);
line-height: 110%;
margin-bottom: 20px;
font-weight: 700;
}
h3,
.h3 {
font-size: min(max(1.2rem, calc(1.2rem + ((1vw - 0.359375rem) * 0.6543))), 1.75rem);
line-height: 120%;
margin-bottom: 15px;
font-weight: 700;
}
h4,
.h4 {
font-size: min(max(1rem, calc(1rem + ((1vw - 0.359375rem) * 0.5948))), 1.5rem);
line-height: 120%;
margin-bottom: 15px;
font-weight: 600;
}
h5,
.h5 {
font-size: min(max(1rem, calc(1rem + ((1vw - 0.359375rem) * 0.2974))), 1.25rem);
line-height: 120%;
margin-bottom: 10px;
font-weight: 600;
}
h6,
.h6 {
font-size: 1rem;
line-height: 120%;
margin-bottom: 10px;
font-weight: 600;
}
p {
font-size: min(max(1rem, calc(0.75rem + ((1vw - 0.359375rem) * 0.2974))), 1.25rem);
font-weight: 500;
}
a,
a * {
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
} #page {
padding-bottom: 50px;
}
body {
padding-top: 100px;
display: flex;
flex-direction: column;
min-height: 100vh;
@media (min-width: 991.8px) {
padding-top: 140px;
}
}
section {
position: relative;
padding-block: 25px;
@media (min-width: 767.8px) {
padding-block: 50px;
}
}
.button {
display: inline-block;
font-size: 1rem;
line-height: 130%;
padding: 10px 30px;
border-radius: 10px;
margin-block: 10px;
text-decoration: none;
font-weight: 600;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.green-button {
background-color: var(--green);
color: var(--white);
&:hover {
text-decoration: none;
background-color: var(--red);
}
}
.a-center {
align-items: center;
} header {
position: fixed;
box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .17);
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: rgba(255, 255, 255, 1);
webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
@media (min-width: 991.8px) {
background: rgba(255, 255, 255, .5);
backdrop-filter: blur(25px);
&.hidden {
transform: translateY(-150%);
}
}
#logo-wrapper {
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 99;
img {
height: auto;
width: 100px;
max-width: 100%;
@media (min-width: 991.8px) {
width: 140px;
}
}
}
.menuToggle {
display: block;
position: absolute;
top: -10px;
right: 30px;
-webkit-user-select: none;
user-select: none;
z-index: 99;
@media (min-width: 991.8px) {
display: none;
}
input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; z-index: 2; -webkit-touch-callout: none; }
span {
display: block;
width: 30px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: var(--green);
border-radius: 5px;
z-index: 1;
transform-origin: 4px 0;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
&:first-child {
transform-origin: 0 0;
}
&:nth-last-child(2) {
transform-origin: 0 100%;
}
} &.checked span {
opacity: 1;
transform: rotate(45deg) translate(-7px, -18px);
background: var(--red);
} &.checked span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
} &.checked span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, 12px);
}
}
nav {
&.visible {
transform: translate(0, 0);
}
right: auto;
position: relative;
height: auto;
transform: none;
padding: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0);
backdrop-filter: none;
padding-inline: 0;
@media (max-width: 991.8px) {
position: fixed;
right: 0;
width: 400px;
top: 0;
padding-top: 20px;
padding-bottom: 20px;
margin-top: 70px;
max-width: 100%;
height: 100vh;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(150%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
z-index: 1;
background-color: rgba(255, 255, 255, 1);
display: block;
overflow-y: auto;
padding-inline: 30px;
}
}
nav ul {
list-style-type: none;
padding: 0;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
@media (min-width: 991.8px) {
list-style-type: none;
padding: 0;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.sub-menu {
padding: 0;
box-shadow: none;
position: relative;
width: 100%;
background: rgba(255, 255, 255, 0);
top: 0;
left: 0;
opacity: 1;
display: none;
border-radius: 0;
margin-left: 20px;
&.visible {
display: block;
}
@media (min-width: 991.8px) {
li {
padding: 10px 0;
}
}
li a {
font-size: 1.25rem;
@media (min-width: 991.9px) {
font-size: 1rem;
}
}
@media (min-width: 991.8px) {
margin-left: 0;
position: absolute;
top: 80px;
left: 0;
width: 220px;
padding: 10px;
z-index: 999;
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(25px);
border-radius: 10px;
box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .17);
}
}
li {
width: 100%;
margin: 10px auto;
position: relative;
@media (min-width: 991.9px) {
padding: 30px 5px; width: auto;
margin: 0;
}
@media (min-width: 991.8px) {
&:hover {
.sub-menu {
display: block;
}
}
}
a {
display: block;
text-decoration: none;
color: var(--black);
font-weight: 600;
text-transform: none;
font-size: 1.5rem;
@media (min-width: 991.8px) {
font-size: 1rem;
}
&:hover {
color: var(--red);
}
}
&.current-menu-item a {
color: var(--green);
}
&.current-menu-parent > a,
&.current-post-parent > a {
color: var(--green);
}
&.menu-item-has-children {
padding-right: 15px;
}
&.menu-item-has-children {
&::before {
content: "\f078";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
top: 5px;
right: 5px;
width: 5px;
height: 5px;
position: absolute;
font-size: 10px;
}
}
@media (min-width: 991.8px) {
&.menu-item-has-children {
&::before {
content: "\f078";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
top: calc(50% - 7px);
right: 0;
width: 10px;
height: 10px;
position: absolute;
font-size: 10px;
}
}
}
}
}
} footer {
position: relative;
margin-top: auto;
box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, .17);
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, .9);
padding-block: 10px;
#logo-wrapper-footer {
img {
height: auto;
width: 110px;
max-width: 100%;
margin: 0 auto;
}
}
#footer-text p {
font-size: 0.75rem;
color: var(--white);
text-align: center;
margin-bottom: 10px;
a {
color: var(--green);
}
}
#social-menu {
list-style-type: none;
padding: 0;
margin: 5px auto 10px auto;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
li {
a {
font-size: 30px;
text-decoration-line: none;
color: var(--green);
&:hover {
color: var(--red);
}
}
}
}
} .section-title {
margin-bottom: 30px;
}
.post-loop-main {
margin-bottom: 30px;
a {
text-decoration: none;
&:hover {
text-decoration: none;
img {
transform: scale(1.05);
}
h5 {
color: var(--green);
}
}
.date {
color: var(--grey);
}
}
.post-main-inner {
position: relative;
.post-image-holder {
position: relative;
height: 200px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: .4s all;
}
}
.post-bottom-wrapper {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
line-height: 100%;
margin-top: 10px;
font-size: .75rem;
}
.date {
color: var(--red);
}
.date {
padding-right: 5px;
}
.category {
position: relative;
padding-left: 5px;
border-left: 1px solid var(--grey);
color: var(--grey);
}
}
}
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-block: 20px;
.pagination-numbers-container {
order: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 0;
width: 300px;
}
.prev {
order: 1;
}
.next {
order: 3;
}
a,
span {
color: var(--green);
text-decoration: none;
padding: 0 10px;
&:hover,
&.current {
color: var(--red);
}
}
} #site-aside {
position: relative;
margin-top: 30px;
@media (min-width: 991.8px) {
margin-top: 0;
}
.aside-widget-wrap {
margin-bottom: 30px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 10px;
padding: 20px;
&:first-of-type {
padding: 0;
border: none;
}
&:last-of-type {
margin-bottom: 0;
}
}
h2,
h3 {
color: var(--black);
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
li {
font-size: 0.875rem;
line-height: 130%;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
padding: 5px;
margin-bottom: 5px;
width: 100%;
flex-basis: 100%;
@media (min-width: 575.8px) and (max-width: 991.8px) {
width: calc(50% - 10px);
flex-basis: calc(50% - 10px);
margin: 5px;
}
a {
text-decoration: none;
color: var(--black);
font-weight: 700;
&:hover {
color: var(--green);
}
img {
border-radius: 5px;
width: 60px;
height: 60px;
object-fit: cover;
}
}
&.current a {
color: var(--red);
}
}
}
ul.menu { border: none;
list-style-type: circle; border-radius: 10px;
padding: 0 30px;
li {
margin-bottom: 5px;
border: none;
width: 100%;
&::marker {
color: var(--green);
}
&:last-of-type {
margin-bottom: 0;
}
&.current_page_item a,
&.current-menu-item a,
&.current-menu-parent a,
&.current-post-parent a {
color: var(--red);
}
}
}
.wp-block-archives-dropdown {
width: 100%;
select {
width: 100%;
padding: 10px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 10px;
color: var(--black);
-moz-appearance: none; -webkit-appearance: none; appearance: none;
}
}
} .post-location-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 5px;
padding: 5px;
margin-bottom: 30px;
width: 100%;
flex-basis: 100%;
.post-location-image {
width: 100%;
height: 200px;
position: relative;
border-radius: 5px;
overflow: hidden;
margin-bottom: 15px;
@media (min-width: 575px) {
width: 200px;
height: 200px;
margin-bottom: 0;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: .4s all;
}
}
.text-wrapper {
width: 100%;
flex-basis: 100%;
padding-inline: 15px;
padding-bottom: 15px;
@media (min-width: 575px) {
width: calc(100% - 200px);
flex-basis: calc(100% - 200px);
padding-left: 15px;
padding-right: 0;
padding-bottom: 0;
}
.post-title {
font-weight: 700;
}
p {
color: var(--black);
}
a {
color: var(--green);
text-decoration-line: underline;
}
}
a.location-link {
display: flex;
flex-wrap: wrap;
width: 100%;
@media (min-width: 575px) {
width: 200px;
}
&:hover {
img {
transform: scale(1.05);
}
}
}
}
.single-mec-events #comments {
display: none;
}
.mec-month-side {
.mec-event-image {
img {
height: auto;
}
}
}
.single-mec-events img {
height: auto;
}
@media only screen and (max-width: 479px) {
.mec-container {
width: 100%;
}
}
.aside-widget-wrap .date {
color: var(--black);
text-align: left;
b {
color: var(--green);
}
} .page-content {
h2, h3, h4, h5, h6, p, figure, ul, ol {
margin-bottom: 15px;
}
a {
color: var(--green);
&:hover {
color: var(--red);
}
}
}
.wp-block-image img {
border-radius: 10px;
}
iframe {
width: 100%;
height: 400px;
@media (min-width: 991.8px) {
height: 600px;
}
}