:root {
--scrollbar: 0px;
}
@media only screen and (min-width: 1440px) {
:root {
--scrollbar: 16px;
}
}
@supports (-moz-appearance: none) {
:root {
--scrollbar: 0px;
}
}
@supports (-webkit-scrollbar: none) {
:root {
--scrollbar: -1px;
}
} @media only screen and (min-width: 1440px) and (-webkit-device-pixel-ratio: 2) {
:root {
--scrollbar: 0px;
}
}
@supports (-webkit-touch-callout: none) {
:root {
--scrollbar: 0px;
}
}
html {
overflow-x: hidden;
}
section.full-wide {
position: relative;
width: calc(100vw - var(--scrollbar)) !important;
max-width: calc(100vw - var(--scrollbar)) !important;
margin-left: calc(-50vw + var(--scrollbar)/2) !important;
margin-right: calc(-50vw + var(--scrollbar)/2) !important;
left: 50%;
right: 50%;
}
section.full-wide > .content-box {
max-width: 1440px;
padding: 0 1rem;
margin: 0 auto;
}
.auto-padding {
padding-top: 8vw;
padding-bottom: 8vw;
}
.bg-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.bg-mask ~ * {
position: relative;
z-index: 0
}
.bg-fixed {
background-attachment: fixed;
}
.left-center {
background-position: left center;
}
.left-bottom {
background-position: left bottom;
}
.right-top {
background-position: right top;
}
.right-center {
background-position: right center;
}
.right-bottom {
background-position: right bottom;
}
.center-top {
background-position: center top;
}
.center-center {
background-position: center center;
}
.center-bottom {
background-position: center bottom;
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}:root {
--gallerygap: 1rem;
}
@media screen and (max-width: 768px) {
:root {
--gallerygap: 0.5rem;
}
}
[data-gap="no"] {
--gallerygap: 0px;
}
div.my_gallery *,
div.my_masonry *,
div.my_carousel * {
box-sizing: border-box;
}
div.my_gallery figure,
div.my_masonry figure,
div.my_carousel figure,
div.my_gallery figcaption,
div.my_masonry figcaption,
div.my_carousel figcaption {
display: block;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
}
div.my_gallery figure a,
div.my_masonry figure a,
div.my_carousel figure a {
display: block;
margin: 0;
padding: 0;
}
div.my_gallery figcaption,
div.my_masonry figcaption,
div.my_carousel figcaption {
background: linear-gradient(0deg, rgba(25, 25, 25, .75), rgba(0, 0, 0, .3) 50%, transparent);
bottom: 0;
color: #fff;
font-size: smaller;
font-family: inherit;
left: 0;
max-height: 50%;
padding: 20px 8px 10px 8px;
position: absolute;
text-align: center;
width: 100%;
pointer-events: none;
text-overflow: ellipsis;
margin-bottom: 0;
}
div.my_gallery figcaption a,
div.my_masonry figcaption a,
div.my_carousel figcaption a {
pointer-events: visible;
display: block;
margin: 0;
padding: 0;
text-decoration: none;
}
div.my_gallery figcaption a:after,
div.my_masonry figcaption a:after,
div.my_carousel figcaption a:after {
content: " >";
}
div.my_gallery img,
div.my_masonry img,
div.my_carousel img {
max-width: 100%;
}
div.my_gallery {
display: flex;
flex-wrap: wrap;
gap: var(--gallerygap);
clear: both;
justify-content: left;
}
div.my_masonry {
-webkit-column-gap: var(--gallerygap);
-moz-column-gap: var(--gallerygap);
column-gap: var(--gallerygap);
}
div.my_masonry figure {
width: 100% !important;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
margin-bottom: var(--gallerygap);
}
[data-fullwidth="1"] {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
}:root {
--gallerygap: 1rem;
}
@media screen and (max-width: 768px) {
:root {
--gallerygap: 0.5rem;
}
}
[data-gap="no"],
[data-gap="0"] {
--gallerygap: 0px;
--gap: 0px;
}
.transition {
transition: 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}
div.my_carousel {
position: relative;
}
div.my_carousel .overflow {
position: relative;
overflow: hidden;
}
div.my_carousel .item-parent {
position: relative;
margin: 0 calc(var(--gallerygap) * (-1))
}
div.my_carousel .item-list {
display: flex;
flex-wrap: nowrap;
position: relative;
padding: 0;
margin: 0;
left: 0;
overflow: initial;
}
div.my_carousel .item-list > div {
max-width: 100%;
}
div.my_carousel:not([data-fade="1"]) .item-list > div {
display: block;
position: relative;
flex-shrink: 0;
padding: 0 var(--gallerygap);
transition: all 0.6s ease;
}
[data-overflow="1"] .item-list > div:not(.focus) {
opacity: 0.2;
}
div.my_carousel .item-list .item > div {
padding: 1rem;
height: 100%;
}
div.my_carousel .item-list img {
display: block;
width: 100%;
height: auto;
}
div.my_carousel[data-fade="1"] .item {
position: absolute;
width: auto;
opacity: 0;
transition: opacity 1s, transform 1s;
}
div.my_carousel[data-fade="1"] .item.active {
position: relative;
opacity: 1;
z-index: 1;
transform: translateX(0%);
}
div.my_carousel .nav {
display: flex;
justify-content: center;
width: 100%;
z-index: 2;
padding: 15px 0;
}
div.my_carousel .nav div {
background: rgba(102, 102, 102, 0.4);
width: 8px;
height: 8px;
border-radius: 8px;
margin: 0 1vw;
display: inline-block;
cursor: pointer;
transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}
div.my_carousel .nav div:hover {
background: #000;
}
div.my_carousel .nav .active {
width: 36px;
}
div.my_carousel .prev,
div.my_carousel .next {
position: absolute;
display: flex;
justify-content: center;
cursor: pointer;
top: 50%;
margin-top: -38px;
width: 38px;
height: 38px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 50%;
z-index: 2;
transition: all 0.3s ease-in-out;
}
div.my_carousel .next {
right: -19px;
}
div.my_carousel .prev {
left: -19px;
}
div.my_carousel .prev svg,
div.my_carousel .next svg {
width: 20px;
height: auto;
}
div.my_carousel .prev svg path,
div.my_carousel .next svg path {
fill: #333;
width: 3rem;
height: auto;
}
div.my_carousel .prev:hover:before,
div.my_carousel .next:hover:before,
div.my_carousel .prev:hover:after,
div.my_carousel .next:hover:after {
border-color: #000;
}
@media screen and (max-width: 768px) {
div.my_carousel .next {
right: -16px;
}
div.my_carousel .prev {
left: -16px;
}
}
[data-round] figure {
overflow: hidden;
}
[data-round="4"] figure {
border-radius: 4px;
}
[data-round="8"] figure {
border-radius: 8px;
}
[data-round="12"] figure {
border-radius: 12px;
}
[data-round="16"] figure {
border-radius: 16px;
}
[data-round="20"] figure {
border-radius: 20px;
}
[data-round="24"] figure {
border-radius: 24px;
}
[data-round="28"] figure {
border-radius: 28px;
}
[data-round="32"] figure {
border-radius: 32px;
}
[data-round="36"] figure {
border-radius: 36px;
}
[data-round="40"] figure {
border-radius: 40px;
}
[data-round="44"] figure {
border-radius: 44px;
}
[data-round="48"] figure {
border-radius: 48px;
}
[data-round="52"] figure {
border-radius: 52px;
}
[data-round="56"] figure {
border-radius: 56px;
}
[data-round="60"] figure {
border-radius: 60px;
}
[data-round="64"] figure {
border-radius: 64px;
}.lightbox-popup,
.lightbox-popup * {
box-sizing: border-box;
}
[data-lightbox="1"] figure,
[data-lightbox="1"] figcaption,
[data-lightbox="1"] figure img {
display: block;
margin: 0;
padding: 0;
}
[data-lightbox="1"] figure {
cursor: pointer;
position: relative;
}
[data-lightbox="1"] figure:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: all 0.3s ease-in-out;
z-index: 1;
}
[data-lightbox="1"] figure:after {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(0.0390625,0,0,0.0390625,0,-0.000117187)"> <path d="M505.749,475.587L360.149,329.987C388.352,295.15 405.333,250.883 405.333,202.67C405.333,90.926 314.41,0.003 202.666,0.003C90.922,0.003 0,90.925 0,202.669C0,314.413 90.923,405.336 202.667,405.336C250.88,405.336 295.147,388.355 329.984,360.152L475.584,505.752C479.744,509.912 485.205,512.003 490.667,512.003C496.129,512.003 501.59,509.912 505.75,505.752C514.091,497.411 514.091,483.928 505.749,475.587ZM202.667,362.669C114.432,362.669 42.667,290.904 42.667,202.669C42.667,114.434 114.432,42.669 202.667,42.669C290.902,42.669 362.667,114.434 362.667,202.669C362.667,290.904 290.901,362.669 202.667,362.669Z" style="fill-rule:nonzero;"/> </g></svg>');
position: absolute;
font-weight: bold;
text-align: center;
left: 50%;
top: 50%;
width: 38px;
height: 38px;
padding: 0 10px;
line-height: 38px;
margin-top: -16px;
margin-left: -16px;
display: block;
background: #fff;
border-radius: 50%;
opacity: 0;
z-index: 2;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
[data-lightbox="1"] figure:hover:before,
[data-lightbox="1"] figure:hover:after {
opacity: 1;
}
[data-lightbox="1"] figcaption {
position: absolute;
bottom: 0;
z-index: 3;
}
.lightbox-popup {
background: rgba(30, 30, 30, 0.9);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 40px
}
.lightbox-popup .lightbox-img {
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.2));
}
.lightbox-popup .lightbox-img img {
display: block;
max-width: 100%;
max-height: calc(100vh - 80px);
margin: 0 auto;
}
.lightbox-popup .close,
.lightbox-popup .prev,
.lightbox-popup .next {
width: 38px;
height: 38px;
border-radius: 50%;
background: #000;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.lightbox-popup .close {
top: 0.5rem;
right: 0.5rem;
}
.lightbox-popup .prev {
top: 50%;
margin-top: -16px;
left: 0.5rem;
}
.lightbox-popup .next {
top: 50%;
margin-top: -16px;
right: 0.5rem;
}
.lightbox-popup .close svg,
.lightbox-popup .prev svg,
.lightbox-popup .next svg {
width: 20px;
height: 20px;
}
.lightbox-popup .close path,
.lightbox-popup .prev path,
.lightbox-popup .next path {
fill: #fff;
}
.lightbox-popup .capation,
.lightbox-popup .nav {
color: #fff;
text-align: center;
padding: 10px;
font-size: 14px;
line-height: 1;
}
.lightbox-popup .thumbs {
position: absolute;
bottom: 0;
display: flex;
}
.lightbox-popup .thumbs > div {
width: 60px;
padding: 5px;
}
.lightbox-popup .thumbs img {
width: auto;
height: 100%;
object-fit: cover;
}
.cropped figure {
height: 100%;
}
.cropped figure a,
.cropped figure img {
display: block;
width: 100%;
height: 100% !important;
flex: 1;
-o-object-fit: cover !important;
object-fit: cover !important;
}@media screen and (min-width: 1024px) {
div.my_gallery[data-desktop="2"] > div {
width: calc((100% - (1 * var(--gallerygap))) / 2);
}
div.my_gallery[data-desktop="3"] > div {
width: calc((100% - (2 * var(--gallerygap))) / 3);
}
div.my_gallery[data-desktop="4"] > div {
width: calc((100% - (3 * var(--gallerygap))) / 4);
}
div.my_gallery[data-desktop="5"] > div {
width: calc((100% - (4 * var(--gallerygap))) / 5);
}
div.my_gallery[data-desktop="6"] > div {
width: calc((100% - (5 * var(--gallerygap))) / 6);
}
div.my_gallery[data-desktop="7"] > div {
width: calc((100% - (6 * var(--gallerygap))) / 7);
}
div.my_gallery[data-desktop="8"] > div {
width: calc((100% - (7 * var(--gallerygap))) / 8);
}
div.my_gallery[data-desktop="9"] > div {
width: calc((100% - (8 * var(--gallerygap))) / 9);
}
div.my_masonry[data-desktop="2"] {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div.my_masonry[data-desktop="3"] {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
div.my_masonry[data-desktop="4"] {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
div.my_masonry[data-desktop="5"] {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
div.my_masonry[data-desktop="6"] {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
div.my_masonry[data-desktop="7"] {
-moz-column-count: 7;
-webkit-column-count: 7;
column-count: 7;
}
div.my_masonry[data-desktop="8"] {
-moz-column-count: 8;
-webkit-column-count: 8;
column-count: 8;
}
div.my_masonry[data-desktop="9"] {
-moz-column-count: 9;
-webkit-column-count: 9;
column-count: 9;
}
}
@media screen and (min-width: 481px) and (max-width: 1023px) {
div.my_gallery[data-tablet="2"] > div {
width: calc((100% - (1 * var(--gallerygap))) / 2);
}
div.my_gallery[data-tablet="3"] > div {
width: calc((100% - (2 * var(--gallerygap))) / 3);
}
div.my_gallery[data-tablet="4"] > div {
width: calc((100% - (3 * var(--gallerygap))) / 4);
}
div.my_gallery[data-tablet="5"] > div {
width: calc((100% - (4 * var(--gallerygap))) / 5);
}
div.my_gallery[data-tablet="6"] > div {
width: calc((100% - (5 * var(--gallerygap))) / 6);
}
div.my_gallery[data-tablet="7"] > div {
width: calc((100% - (6 * var(--gallerygap))) / 7);
}
div.my_gallery[data-tablet="8"] > div {
width: calc((100% - (7 * var(--gallerygap))) / 8);
}
div.my_gallery[data-tablet="9"] > div {
width: calc((100% - (8 * var(--gallerygap))) / 9);
}
div.my_masonry[data-tablet="2"] {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div.my_masonry[data-tablet="3"] {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
div.my_masonry[data-tablet="4"] {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
div.my_masonry[data-tablet="5"] {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
div.my_masonry[data-tablet="6"] {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
div.my_masonry[data-tablet="7"] {
-moz-column-count: 7;
-webkit-column-count: 7;
column-count: 7;
}
div.my_masonry[data-tablet="8"] {
-moz-column-count: 8;
-webkit-column-count: 8;
column-count: 8;
}
div.my_masonry[data-tablet="9"] {
-moz-column-count: 9;
-webkit-column-count: 9;
column-count: 9;
}
}
@media screen and (max-width: 480px) {
div.my_gallery[data-mobile="2"] > div {
width: calc((100% - (1 * var(--gallerygap))) / 2);
}
div.my_gallery[data-mobile="3"] > div {
width: calc((100% - (2 * var(--gallerygap))) / 3);
}
div.my_gallery[data-mobile="4"] > div {
width: calc((100% - (3 * var(--gallerygap))) / 4);
}
div.my_gallery[data-mobile="5"] > div {
width: calc((100% - (4 * var(--gallerygap))) / 5);
}
div.my_gallery[data-mobile="6"] > div {
width: calc((100% - (5 * var(--gallerygap))) / 6);
}
div.my_gallery[data-mobile="7"] > div {
width: calc((100% - (6 * var(--gallerygap))) / 7);
}
div.my_gallery[data-mobile="8"] > div {
width: calc((100% - (7 * var(--gallerygap))) / 8);
}
div.my_gallery[data-mobile="9"] > div {
width: calc((100% - (8 * var(--gallerygap))) / 9);
}
div.my_masonry[data-mobile="2"] {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div.my_masonry[data-mobile="3"] {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
div.my_masonry[data-mobile="4"] {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
div.my_masonry[data-mobile="5"] {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
div.my_masonry[data-mobile="6"] {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
div.my_masonry[data-mobile="7"] {
-moz-column-count: 7;
-webkit-column-count: 7;
column-count: 7;
}
div.my_masonry[data-mobile="8"] {
-moz-column-count: 8;
-webkit-column-count: 8;
column-count: 8;
}
div.my_masonry[data-mobile="9"] {
-moz-column-count: 9;
-webkit-column-count: 9;
column-count: 9;
}
}:root {
--gap: 1rem;
}
.content-box {
max-width: 1440px;
padding: 0 1rem;
margin: 0 auto;
}
.wide {
margin-left: calc(((100vw - 1400px + 1rem) / 2) * -1);
margin-right: calc(((100vw - 1400px + 1rem) / 2) * -1);
padding-left: calc((100vw - 1400px) / 2);
padding-right: calc((100vw - 1400px) / 2);
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
@media screen and (max-width: 1400px) {
.wide {
margin-left: calc(((100vw + 1rem) / 2) * -1);
margin-right: calc(((100vw + 1rem) / 2) * -1);
padding-left: calc((100vw + 1rem) / 2);
padding-right: calc((100vw + 1rem) / 2);
}
}
.vertical-center {
align-items: center;
}
.row {
width: calc(100% + var(--gap));
}
.offset-left {
padding-left: calc((100% - (1440px - 2rem)) / 2);
padding-right: 3rem;
}
.offset-right {
padding-right: calc((100% - (1440px - 2rem)) / 2);
padding-left: 3rem;
}
.object-fit {
object-fit: cover;
height: 100%;
}
.narrow {
max-width: 56rem;
margin: 0 auto;
}
.round {
border-radius: 50%;
}
@media screen and (max-width: 1440px) {
.offset-left {
padding-left: 1rem;
}
.offset-right {
padding-right: 1rem;
}
}
.row,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9 {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
clear: both;
}
.no-gap,
.no-gap.row {
gap: 0;
}
.no-gap.row {
width: 100%;
}
.col-1-2 {
width: calc(50% - var(--gap))
}
.col-1-3 {
width: calc(33.3333% - var(--gap))
}
.col-2-3 {
width: calc(66.6666% - var(--gap))
}
.col-1-4 {
width: calc(25% - var(--gap))
}
.col-3-4 {
width: calc(75% - var(--gap))
}
.col-1-5 {
width: calc(20% - var(--gap))
}
.col-2-5 {
width: calc(40% - var(--gap))
}
.col-3-5 {
width: calc(60% - var(--gap))
}
.col-4-5 {
width: calc(80% - var(--gap))
}
.col-1-6 {
width: calc(16.6667% - var(--gap))
}
.col-5-6 {
width: calc(83.3335% - var(--gap))
}
.no-gap .col-1-2 {
width: 50%
}
.no-gap .col-1-3 {
width: 33.3333%
}
.no-gap .col-2-3 {
width: 66.6666%
}
.no-gap .col-1-4 {
width: 25%
}
.no-gap .col-3-4 {
width: 75%
}
.no-gap .col-1-5 {
width: 20%
}
.no-gap .col-2-5 {
width: 40%
}
.no-gap .col-3-5 {
width: 60%
}
.no-gap .col-4-5 {
width: 80%
}
.no-gap .col-1-6 {
width: 16.6667%
}
.no-gap .col-5-6 {
width: 83.3335%
}
.column-2 > div,
.column-2 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-3 > div,
.column-3 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-4 > div,
.column-4 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.column-5 > div,
.column-5 article {
width: calc((100% - (4 * var(--gap))) / 5)
}
.column-6 > div,
.column-6 article {
width: calc((100% - (5 * var(--gap))) / 6)
}
.column-7 > div,
.column-7 article {
width: calc((100% - (6 * var(--gap))) / 7)
}
.column-8 > div,
.column-8 article {
width: calc((100% - (7 * var(--gap))) / 8)
}
.column-9 > div,
.column-9 article {
width: calc((100% - (8 * var(--gap))) / 9)
}
.no-gap.column-2 > div,
.no-gap.column-2 article {
width: calc(100% / 2)
}
.no-gap.column-3 > div,
.no-gap.column-3 article {
width: calc(100% / 3)
}
.no-gap.column-4 > div,
.no-gap.column-4 article {
width: calc(100% / 4)
}
.no-gap.column-5 > div,
.no-gap.column-5 article {
width: calc(100% / 5)
}
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 6)
}
.no-gap.column-7 > div,
.no-gap.column-7 article {
width: calc(100% / 7)
}
.no-gap.column-8 > div,
.no-gap.column-8 article {
width: calc(100% / 8)
}
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 9)
} .mansory-2,
.mansory-3,
.mansory-4,
.mansory-5,
.mansory-6 {
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
}
.mansory-2 > div,
.mansory-3 > div,
.mansory-4 > div,
.mansory-5 > div,
.mansory-6 > div,
.mansory-2 > article,
.mansory-3 > article,
.mansory-4 > article,
.mansory-5 > article,
.mansory-6 > article {
display: block;
width: 100%;
margin: 0px; padding: 0;
position: relative;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.mansory-2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.mansory-3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.mansory-5 {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
.mansory-6 {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
@media screen and (min-width: 768px) and (max-width:1024px) {
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article,
.column-6 > div,
.column-6 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-7 > div,
.column-7 article,
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article,
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 3)
}
.no-gap.column-7 > div,
.no-gap.column-7 article,
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 4)
}
.mansory-4 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-5 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.mansory-6 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (min-width: 480px) and (max-width:767px) {
.column-3 > div,
.column-3 article,
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-6 > div,
.column-6 article,
.column-7 > div,
.column-7 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (3 * var(--gap))) / 4)
}
.no-gap.column-3 > div,
.no-gap.column-3 article,
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article {
width: calc(100% / 2)
}
.no-gap.column-6 > div,
.no-gap.column-6 article,
.no-gap.column-7 > div,
.no-gap.column-7 article {
width: calc(100% / 3)
}
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 4)
}
.mansory-4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.mansory-5 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.mansory-6 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media screen and (max-width: 479px) {
.column-2 > div,
.column-2 article,
.column-3 > div,
.column-3 article {
width: 100%
}
.column-4 > div,
.column-4 article,
.column-5 > div,
.column-5 article,
.column-6 > div,
.column-6 article {
width: calc((100% - (1 * var(--gap))) / 2)
}
.column-7 > div,
.column-7 article,
.column-8 > div,
.column-8 article,
.column-9 > div,
.column-9 article {
width: calc((100% - (2 * var(--gap))) / 3)
}
.no-gap.column-2 > div,
.no-gap.column-2 article,
.no-gap.column-3 > div,
.no-gap.column-3 article {
width: 100%
}
.no-gap.column-4 > div,
.no-gap.column-4 article,
.no-gap.column-5 > div,
.no-gap.column-5 article,
.no-gap.column-6 > div,
.no-gap.column-6 article {
width: calc(100% / 2)
}
.no-gap.column-7 > div,
.no-gap.column-7 article,
.no-gap.column-8 > div,
.no-gap.column-8 article,
.no-gap.column-9 > div,
.no-gap.column-9 article {
width: calc(100% / 3)
}
.mansory-6,
.mansory-5,
.mansory-4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media screen and (max-width: 768px) {
.row {
width: 100%;
}
.col-1-2,
.col-1-3,
.col-2-3,
.col-1-4,
.col-3-4,
.col-1-5,
.col-2-5,
.col-3-5,
.col-4-5,
.col-1-6,
.col-5-6,
.no-gap .col-1-2,
.no-gap .col-1-3,
.no-gap .col-2-3,
.no-gap .col-1-4,
.no-gap .col-3-4,
.no-gap .col-1-5,
.no-gap .col-2-5,
.no-gap .col-3-5,
.no-gap .col-4-5,
.no-gap .col-1-6,
.no-gap .col-5-6 {
width: 100%
}
.mansory-3 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.offset-left {
padding-right: 1rem;
padding-left: 1rem;
}
.offset-right {
padding-right: 1rem;
padding-left: 1rem;
}
}
@media only screen and (min-width: 600px) and (max-width: 850px) and (orientation: landscape) {
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 360px) and (max-width: 599px) {
.mansory-4-column,
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-width: 360px) {
.mansory-2-column,
.mansory-3-column,
.mansory-4-column,
.mansory-5-column,
.mansory-6-column {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}:root {
--form-ui-color:#96E0D0;
--form-ui-bg: #ffffff;
--form-size: 2rem;
--form-border-radius: 25px;
--form-border: solid 1px #1e2f401f;
--form-box-shadow: none;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="file"],
select {
padding:0.75rem;
color: inherit;
font-size: smaller;
line-height: 1;
margin: 0;
font-family: inherit;
border-radius: var(--form-border-radius);
-webkit-border-radius: var(--form-border-radius);
-moz-border-radius: var(--form-border-radius);
background-color: var(--form-ui-bg);
box-shadow: var(--form-box-shadow);
border: var(--form-border);
margin-bottom: 0.75rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
min-width: 250px;
max-width: 100%;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
.select {
position: relative;
display: inline-block;
}
.select:after {
border-style: solid;
border-width: 0.2rem 0.2rem 0 0;
content: "";
border-color: var(--form-ui-color);
display: inline-block;
height: calc(var(--form-size) * 0.2);
width: calc(var(--form-size) * 0.2);
background: transparent;
position: absolute;
top: 50%;
right: 0.75rem;
margin-top: -0.75rem;
transform: rotate(135deg);
pointer-events: none;
}
textarea {
background: rgba(255, 255, 255, 0.8);
padding: 0.75rem;
display: block;
color: inherit;
font-size: inherit;
height: auto;
margin: 0;
font-family: inherit;
height: 8rem;
border-radius: var(--form-border-radius);
-webkit-border-radius: var(--form-border-radius);
-moz-border-radius: var(--form-border-radius);
background-color: var(--form-ui-bg);
box-shadow: var(--form-box-shadow);
border: var(--form-border);
margin-bottom: 0.75rem;
}
input[type="submit"],
input[type="button"],
button,
.button, .wp-block-button__link {
-webkit-appearance: none;
background: var(--form-ui-color);
color: #00463D;
border: none;
font-size: 1rem;
line-height: 1;
font-weight: 500;
text-align: center;
vertical-align: middle;
cursor: pointer;
display: inline-block;
position: relative;
font-family: inherit;
text-decoration: none;
padding: 0.75rem 1.5rem;
border-radius: 2rem;
position: relative;
overflow: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.wp-block-button__link{
background-color: var(--form-ui-color) !important;
padding: 0.75rem 1.5rem !important;
color: #00463D !important;
font-size: 1rem !important
}
input[type="submit"]{
width:auto;
display: inline-block
}
.wp-block-buttons{
margin-top:2rem;
display: inline-block;
width: auto;
}
button:hover,
.button:hover {
background: #333;
color: #fff;
}
.circle{
position: relative;
padding:0.15rem
}
.circle:after, .grid a:after{
content:"";
position: absolute;
right: -2.5rem;
top: 5%;
background: url(//www.designzone.hu/wp-content/themes/mytheme2024/img/arrow.svg) var(--main-color) no-repeat center center;
background-size: 1rem;
height: 90%;
aspect-ratio:1/1;
border-radius: 50%;
display: flex;
}
#ckySwitchfunctional{
display: block !important
}
::-webkit-input-placeholder {
color: #888;
font-style: italic;
}
:-moz-placeholder {
color: #888;
font-style: italic;
}
::-moz-placeholder {
color: #888;
font-style: italic;
}
:-ms-input-placeholder {
color: #888;
font-style: italic;
}
input:focus,
select:focus,
textarea:focus {
outline: none !important;
border-color: var(--form-ui-color);
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.qty {
display: inline-block;
line-height: 1;
margin: 0;
height: var(--form-size);
font-family: inherit;
border-radius: var(--form-border-radius);
-webkit-border-radius: var(--form-border-radius);
-moz-border-radius: var(--form-border-radius);
background-color: var(--form-ui-bg);
box-shadow: var(--form-box-shadow);
border: var(--form-border);
}
.qty input[type=number] {
width: var(--form-size);
height: 100%;
padding: 0;
font-size: smaller;
text-align: center;
border-radius: 0;
box-shadow: none;
border-bottom: none;
border-top: none;
border-left: solid 1px rgba(0, 0, 0, 0.1);
border-right: solid 1px rgba(0, 0, 0, 0.1);
background: transparent;
}
.qty button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
height: 100%;
cursor: pointer;
margin: 0;
position: relative;
box-shadow: none;
color: inherit;
vertical-align: middle;
text-align: center;
font-family: 'Trebuchet MS';
font-weight: normal;
font-size: 1rem;
padding: 0 0.5rem;
}
input[type="file"] {
padding: 0;
vertical-align: middle;
position: relative;
}
input[type="file"]::-webkit-file-upload-button {
visibility: hidden;
}
input[type="file"]::before {
content: 'Fájlok csatolása';
display: inline-block;
background: var(--form-ui-color);
border-radius: var(--form-size);
padding: 0 calc(var(--form-size) * 0.5);
line-height: calc(var(--form-size) - 4px);
height: calc(var(--form-size) - 4px);
outline: none;
white-space: nowrap;
color: #fff;
-webkit-user-select: none;
cursor: pointer;
}
.wpcf7 .wpcf7-submit:disabled {
opacity: 0.4
}
input[type="file"]:hover::before {
background: var(--form-ui-color);
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
input[type="checkbox"] + label,
input[type="radio"] + label,
input[type="checkbox"] + span,
input[type="radio"] + span {
padding: 0;
display: inline-block;
overflow: hidden;
position: relative;
margin: 0.25rem 0.5rem 0.25rem 0;
vertical-align: middle;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before,
input[type="checkbox"] + span:before,
input[type="radio"] + span:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
content: "";
display: inline-block;
width: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
background: var(--form-ui-bg);
color: #fff;
line-height: 1;
margin-right: 0.5rem;
box-shadow: var(--form-box-shadow);
border: var(--form-border);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
input[type="radio"] + label:before,
input[type="radio"] + span:before {
border-radius: 50%;
}
input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:checked + span:before {
content: "";
background: var(--form-ui-color);
color: #fff;
box-shadow: var(--form-box-shadow);
border: var(--form-border);
}
input[type="radio"]:checked + label:before,
input[type="radio"]:checked + span:before {
content: "";
color: #fff;
box-shadow: var(--form-box-shadow);
border: solid calc(var(--form-size) * 0.2) var(--form-ui-color);
border-radius: 50%;
background: #fff;
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:checked + span:after {
display: inline-block;
text-align: center;
width: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
line-height: calc(var(--form-size) * 0.75);
font-weight: bold;
font-size: calc(var(--form-size) * 0.5);
font-family: sans-serif;
color: #fff;
vertical-align: middle;
cursor: pointer;
content: 'L';
position: absolute;
top: 0.5rem;
left: 0.5rem;
transform: rotate(45deg) scale(-1, 1);
}
.range {
position: relative;
display: flex;
align-items: center;
}
.range-value {
padding: 0;
background: var(--form-ui-color);
border-radius: 2px;
margin-left: calc(var(--form-size) * 0.5);
font-size: smaller;
color: #fff;
width: 2.25rem;
text-align: center;
height: var(--form-size);
line-height: var(--form-size);
}
input[type="range"] {
-webkit-appearance: none;
min-width: 250px;
max-width: 100%;
height: 0.75rem;
border-radius: 0.25rem;
background: var(--form-ui-bg);
box-shadow: var(--form-box-shadow);
border: var(--form-border);
outline: none;
padding: 0;
margin: calc(var(--form-size) * 0.5) 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
border-radius: 50%;
background: var(--form-ui-color);
border: none;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
input[type="range"]::-moz-range-thumb {
width: calc(var(--form-size) * 0.75);
height: calc(var(--form-size) * 0.75);
border: 0;
border-radius: 50%;
border: none;
background: var(--form-ui-color);
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]:active::-webkit-slider-thumb {
background: var(--form-ui-color);
}
input[type="range"]::-moz-range-thumb:hover,
input[type="range"]:active::-moz-range-thumb {
background: var(--form-ui-color);
} .wpcf7-list-item {
margin: 0 1em 0 0 !important;
} form {
width: 100%;
height: 100%;
border-radius: 10px;
padding: 1rem;
box-sizing: border-box;
margin-top: 2rem;
}
.form-section{
background: #F5F3F4;
box-shadow: var(--shadow);
border-radius: 10px;
color:white;
margin-bottom: 2rem;
overflow: hidden;
z-index: 0;
position: relative
}
.wpcf7 p{
position: relative
}
.form-section .info{
padding: 1rem;
}
.form-section .col-1-3{
background-color: #405163;    
margin-left:0 !important;
padding:1rem;
}
.form-section .col-2-3{
padding: 1rem;
color:var(--font-color)
}
input,
select,
textarea {
background: white;
display: inline-block;
width: 100%;
margin: 0.5rem 0 1rem 0;
padding: 0.5rem 1rem;
border-radius: 10px;
font-family: inherit;
font-size: inherit;
color: var(--font-color);
cursor: pointer;
box-sizing: border-box;
border: none
}
select {
display: block;
max-width: 100%;
width: auto;
color: rgba(55, 55, 55, 1);
border: 0
}
input:focus,
select:focus,
textarea:focus {
outline: 0
}
.wpcf7-not-valid{
border:1px solid red !important;
}
.wpcf7-not-valid-tip{
display: none !important
} input[type="checkbox"],
input[type="radio"] {
display: none !important
}
input[type="checkbox"] + .wpcf7-list-item-label,
input[type="radio"] + .wpcf7-list-item-label {
position: relative;
cursor: pointer;
margin-bottom: 1rem;
margin-top: 1rem;
background: white;
padding: 0.5rem 1.5rem 0.5rem 2.5rem;
border-radius: 10px;
width:100%
} input[type="checkbox"] + .wpcf7-list-item-label:before,
input[type="radio"] + .wpcf7-list-item-label:before {
position: absolute;
top: 0.9rem;
left: 1rem;
width: 0.8rem;
height: 0.8rem;
content: "";
display: inline-block;
vertical-align: middle;
cursor: pointer;
background: white;
border-radius: 5px;
box-sizing: content-box;
}
.wpcf7-acceptance input[type="checkbox"] + .wpcf7-list-item-label:before{
border:1px solid black !important
}
input[type="radio"] + .wpcf7-list-item-label:before {
border-radius: 50%
} input[type="checkbox"]:checked + .wpcf7-list-item-label:after,
input[type="radio"]:checked + .wpcf7-list-item-label:after {
display: inline-block;
transition: 0.5s;
}
input[type="radio"]:checked + .wpcf7-list-item-label:before {
border: solid 0.3rem var(--main-color) !important;
transition: 0.3s;
background: white;
width: 0.4rem;
height: 0.4rem;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
background: var(--main-color);
transition: 0.3s;
border:none !important
}
input[type="radio"]:checked + .wpcf7-list-item-label,
input[type="checkbox"]:checked + .wpcf7-list-item-label {
font-weight: 500;
background: var(--main-color);
box-shadow: var(--shadow);
color:var(--white-color)
}
.wpcf7-list-item-label a{
color:var(--font-color) !important
}  input[type="checkbox"] + .wpcf7-list-item-label:after {
display: none;
content: "";
position: absolute;
top: 1rem;
left: 1.3rem;
width: 0.15rem;
height: 0.4rem;
transform: rotate(45deg);
box-sizing: content-box;
border-radius: 2px;
}
.wpcf7-list-item-label {
margin-bottom: 0.2rem;
display: inline-block;
font-weight: 500;
}
.wpcf7 {
font-size: inherit;
color: var(--font-color);
box-sizing: border-box
}
.wpcf7 input[type=checkbox] {
position: absolute;
left: 0;
top: 0.3rem;
width: auto;
}
.wpcf7-list-item {
position: relative;
margin:0 1.5rem 0 0 !important
}
input[type="text"]{
width: 100%
}
form p {
display: block;
margin: 0
}
form .wpcf7-list-item-label, form p:last-of-type input {
display: block;
}
.textarea-206 + p {
width: 100%
}
form p:last-of-type input {
display: inline-block
}
.wpcf7 .kedvenc input[type="text"]{
width: 85% !important
}
form h2 {
color:white
}
.egyeb-help, .webterv, .webaruhaz, .redesign{
display: none
}
.webterv{
position: relative
}
.status-bar{
font-family: 'Oxanium', sans-serif;
width:0;
background: var(--decor-color);
color:white;
text-align: right;
padding:0.2rem 10px;
white-space: nowrap;
z-index: 10;
position: absolute
}
.addurl{
position: absolute;
width: auto;
bottom:1.4rem;
right: 0;
}
.plusz, .delete{
display: inline-block;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--main-color);
color:white;
line-height: 2rem;
text-align: center;
margin-left: 0.5rem;
cursor: pointer
}
label{
font-weight: 500
}
#wpcf7-f1380-p1381-o1 input[type=submit]{
display: none
}
.wpcf7-checkbox .wpcf7-list-item{
width: 47%;
}
aside .cardbox .services {
margin-bottom: 1rem
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: white;
}.social-media li {
display: inline-block;
}
.social-media {
position: relative;
}
.social-media span {
display: none;
}
.social-media a:before {
left: 0;
top: 0;
position: absolute;
content: "";
width: 1.5rem;
height: 1.5rem;
transition: 0.2s ease-in-out
}
.social-media a:hover:before{
opacity: 1
}
.face a,
.insta a,
.linkedin a{
position: relative;
width: 1.5rem;
height: 1.5rem;
display: inline-block;
height:1.5rem;
width:1.5rem;
margin: 0 0.5rem
}
.face a:before {
background: url(//www.designzone.hu/wp-content/themes/mytheme2024/img/Facebook.svg);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
.insta a:before {
background: url(//www.designzone.hu/wp-content/themes/mytheme2024/img/Instagram.svg);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
#main-menu .social-media {
padding-top: 2rem;
border-top: 1px dashed var(--light-font-color);
display: inline-block;
}
#main-menu .social-media p{
margin:0.5rem 0
}
#main-menu .social-media .wp-block-social-links{
justify-content: flex-end !important
}
#main-menu  li a{
transition: all 0.2s ease-in-out;
}
#main-menu li {
position: relative
}
#main-menu  li a:hover {
color: var(--main-color);
}
@media screen and (min-width:1025px) {
#main-menu {
display: flex;
justify-content: flex-end;
align-items: center;
}
#main-menu li {
display: inline-block;
color: white;
font-weight: 500;
padding-right: 2rem
}
#main-menu li:last-of-type {
margin-right: 0;
}
#main-menu  li a {
color: white
}
#menu-main-menu >li >a:before{
content:"";
position: absolute;
right:0;
top:50%;
height: 1rem;
width: 2px;
background: var(--main-color);
transform: translateY(-50%) rotate(10deg)
}
#main-menu li:last-of-type a:before {
display: none !important
}
#main-menu .social-media {
display: none;
}
#hamburger {
display: none
}
}
@media screen and (max-width:1024px) {
#hamburger {
width: 2.3rem;
height: 2.3rem;
border-radius: 50%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
cursor: pointer;
position: relative;
padding: 0.5rem;
z-index: 5;
transition: all 0.3s ease-in-out;
border: 2px solid var(--main-color);
}
#hamburger:before {
position: absolute;
content: "";
width: 2.3rem;
height: 2.3rem;
background: var(--dark-blue-color);
transform: scale(1);
transform-origin: 50% 50%;
transition: all 0.3s ease-in-out;
visibility: hidden;
border-radius: 50%;
z-index: 5;
top: 0;
right: 0;
}
.hambi-open:before {
transform: scale(35) !important;
transition: all 0.2s ease-in-out !important;
visibility: visible !important;
z-index: -1 !important
}
#hamburger span {
display: block;
height: 2px;
border-radius: 5px;
transition: all 0.6s ease-in-out;
opacity: 1;
width: 100%;
background: var(--main-color);
}
.header-inner #hamburger{
border: 2px solid var(--black-color);
} 
.header-inner #hamburger span{
background: var(--black-color)
}
#hamburger span:first-of-type,
#hamburger span:last-of-type {
width: 50% !important;
}
#hamburger.hambi-open span {
position: absolute;
}
#hamburger.hambi-open {
width: 1.5rem;
height: 1.5rem;
}
#hamburger.hambi-open span:first-of-type {
}
#hamburger.hambi-open span:nth-child(2) {
}
#hamburger.hambi-open span:last-of-type {
}
#main-menu {
font-size: larger;
display: none;
}
.menu-open {
transition: all 0.4s ease-in-out !important;
z-index: 6;
width: 100%;
text-align: right;
top: 4rem;
right: 0;
position: absolute;
padding: 1rem 3%;
display: block !important;
opacity: 0;
animation: 0.4s slideinright ease 0.2s forwards;
-webkit-animation: 0.4s slideinright ease 0.2s forwards;
-moz-animation: 0.4s slideinright ease 0.2s forwards;
-o-animation: 0.4s slideinright ease 0.2s forwards;
}
.menu-open h3{
color:var(--light-font-color)
}
.menu-open li {
padding-bottom: 0.5rem;
cursor: pointer;
}
.menu-open li a {
transition: all 0.2s ease-in-out;
color: var(--light-font-color) !important;
}
.menu-open li a:hover {
color: var(--main-color) !important;
}
#main-menu ul.sub-menu.open {
opacity: 1;
max-height: 1000px;
font-size: smaller;
padding-top: 1rem;
}
#main-menu ul.sub-menu {
max-height: 0;
opacity: 0;
margin:0;
}
#main-menu ul li ul li a {
border: none;
}
.opener {
right: -0.5rem !important;
position: absolute;
top: 0px !important;;
width: 2rem;
height: 2rem;
cursor: pointer;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.opener svg {
width: 50%;
height: auto;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.open.opener svg {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
footer .social-media {
display: block !important;
}
.current-menu-item > a{
color:var(--main-color) !important
}
.layer.open {
position: absolute;
background: rgba(0, 0, 0, 0.2);
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0
}
#main-menu ul li ul li a {
color:white;
text-transform: none;
font-weight: normal;
}
#main-menu ul li ul li a {
white-space: nowrap;
}
.opener {
right: 0.5rem;
position: absolute;
top: -3px;
width: 1rem;
height: 2rem;
cursor: pointer;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.opener svg {
width: 0.5rem;
height: auto;
fill:white
}
li.menu-item-has-children{
padding-right: 2rem !important;
}
li.menu-item-has-children:hover .opener svg {
fill:var(--main-color)
}
@media only screen and (min-width: 961px) {
#main-menu ul li ul {
z-index: 10;
display: block;
overflow: hidden;
position: absolute;
left: -0.5vw;
background: white;
top: 4rem;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 20px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
#main-menu ul > li:hover ul {
opacity: 1;
visibility: visible;
display: block;
top: 3.5rem;
}
#main-menu ul li ul, #main-menu ul li ul li{
margin:0;
}
#main-menu ul li ul li {
width: 100%;
}
#main-menu ul li ul li a{
color:#1b1c1d !important;
padding:1.2rem 1.5rem;
display: block
}
#main-menu ul li ul li:hover{
background: var(--main-color)
}
}.comment-list li ol,
.comment-list li ol li ol,
.comment-list li ol li ol li ol {
margin-left: 20px;
}
.comment-list,
.comment-list li {
margin: 0 !important;
padding: 0 !important;
}
.comment-list li:before {
display: none;
}
.comment-body {
padding: 15px 0 15px 65px;
position: relative;
border-bottom: solid 1px #ddd;
}
.comment-author,
.comment-meta {
display: inline-block;
margin-bottom: 10px;
}
.comment-author .avatar {
height: 50px;
left: 0;
position: absolute;
width: 50px;
border-radius: 50%;
}
.comment-author .says {
display: none;
}
.comments-nav {
overflow: hidden;
clear: both;
border-bottom: solid 1px #ddd;
text-align: center;
}
.comments-nav a,
.comments-nav span {
display: inline-block;
padding: 10px 5px;
}
.comments-nav span {
font-weight: 700;
}
.prev-comments {
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #85af4b;
padding: 0px !important;
content: "";
display: inline-block;
height: 12px;
width: 12px;
-ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.next-comments {
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #85af4b;
content: "";
display: inline-block;
padding: 0px !important;
height: 12px;
width: 12px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}