html {
    font-size: 12px;
}

@media only screen and (max-width: 680px){
    html {
        font-size: 8px;
    }
}

/* Theme */
:root {
    --editor-menu-height: 0px;
    --menu-height: 0px;
    --popup-spacing: 0px;
    --stick-top-section-height: 0px;
    --gallery-content-box-margin: 0px;
    --dynamic-buttons-height: 0;
    --dynamic-menu-logo-height: 0;
}


section {
    box-sizing: border-box;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

a {
    color: inherit;
    text-decoration: none;
}

a[data-item-type='ANCHOR'] {
  cursor: pointer;
}


.website {
    padding: 0;
    margin: 0;
}


.website section {
    margin-left: auto;
    margin-right: auto;
}

.website section[data-position="popup"] {
    --popup-spacing: 8vw;
    --popup-width: inherit;
    max-height: calc(100vh - var(--editor-menu-height) - var(--popup-spacing));
    width: var(--popup-width);
    min-width: var(--popup-width);
    max-width: var(--popup-width);
    position: fixed;
    top: 0;
    left: 0!important;
    transform: translate(calc(50vw - 50%), calc(50vh + var(--editor-menu-height)/2 - 50%)) !important;
    z-index: 1002;
    box-shadow: -3px 11px 200px 0px #00000030;
}

.website section[data-position="popup"][data-section-width="stretched"]{
    --popup-width: calc(100vw - var(--popup-spacing));
}
.website section[data-position="popup"][data-section-width="boxed"]{
    --popup-width: calc(70vw - var(--popup-spacing));
}

.website section[data-position="popup"][data-section-width="boxed"] .children{
    max-width: unset !important;
}

.website section[data-position="popup"]{
    display: none;
}
.website section[data-position="popup"].show-section{
    display: inherit;
}

.website section[data-position="popup"] article .pic-side img.pic{
    transform: scale(1) !important;
}

.website section[data-position="stick-top"] {
    position: fixed;
    top: var(--editor-menu-height);
    z-index: 998;
}

@media only screen and (max-width: 880px) {
    .website section[data-position="popup"],
    .website section[data-position="popup"][data-section-width="boxed"],
    .website section[data-position="popup"][data-section-width="stretched"] {
        overflow-y: auto;
    }
    .website section[data-position="stick-top"]{
        overflow-y: auto;
        max-height: 40vh;
    }
}
@media only screen and (max-width: 680px) {
    .website section[data-position="popup"],
    .website section[data-position="popup"][data-section-width="boxed"],
    .website section[data-position="popup"][data-section-width="stretched"] {
        --popup-spacing: 2vw;
        --popup-mobile-height: calc(100vh  - var(--editor-menu-height) - var(--popup-spacing));
        --popup-width: calc(100vw - var(--popup-spacing));
        height: var(--popup-mobile-height);
        min-height: var(--popup-mobile-height) !important;
        max-height: var(--popup-mobile-height);

    }
}

/* section height */
.website section[data-height="fullscreen"] {
    min-height: 100vh !important
}


/* text-box basic alignment */
.website section[data-textalign="left"] .section-item .text-side .buttons {
    align-items: inherit;
    text-align: inherit;
}
.website section[data-textalign="left"] .section-item .text-side {
    align-items: flex-start;
    text-align: left;
}

.website section[data-blockstextalign="left"] .section-header .text-side {
    align-items: flex-start;
    text-align: left;
}

.website section[data-textalign="center"] .section-item .text-side {
    text-align: center;
}

.website section[data-textalign="left"] .section-item .text-side .buttons {
    justify-content: flex-start;
}

.website section[data-textalign="left"] .section-item .text-side .buttons .element:nth-of-type(1) {
    margin-left: 0px !important;
}

.website section[data-textalign="center"] .section-item .text-side .buttons {
    justify-content: center;
}

.website section[data-textalign="right"] .section-item .text-side .buttons {
    justify-content: flex-end;
}




.website section[data-blockstextalign="center"] .section-header .text-side {
    text-align: center;
}

.website section[data-textalign="right"] .section-item .text-side {
    align-items: flex-end;
    text-align: right;
}

.website section[data-blockstextalign="right"] .section-header .text-side {
    align-items: flex-end;
    text-align: right;
}


/* text-box vertical alignment */
.website section[data-verticalalign="top"] article.section-item {
    justify-content: flex-start;
}

.website section[data-verticalalign="center"] article.section-item {
    justify-content: space-evenly;
}

.website section[data-verticalalign="bottom"] article.section-item {
    justify-content: flex-end;
}

/* text-box vertical alignment text-side */
.website section[data-verticalalign="top"] article.section-item .text-side{
    align-self: flex-start;
    justify-content: flex-start;
}

.website section[data-verticalalign="stretch"] article.section-item .text-side .buttons {
    flex-grow: 1;
    align-content: flex-end;
}

.website section[data-verticalalign="stretch"][data-layoutclass^="right-center"] article.section-item .text-side,
.website section[data-verticalalign="stretch"][data-layoutclass^="left-center"] article.section-item .text-side,
.website section[data-verticalalign="stretch"][data-layoutclass^="middle-center"] article.section-item .text-side{
    height: calc(100% - var(--gallery-content-box-margin) * 2);
}

.website section[data-verticalalign="center"] article.section-item .text-side{
    align-self: center;
    justify-content: center;
}

.website section[data-verticalalign="bottom"] article.section-item .text-side{
    align-self: flex-end;
    justify-content: flex-end;
}

.website section[data-blocksverticalalign="top"] article.section-header {
    justify-content: flex-start;
}

.website section[data-blocksverticalalign="center"] article.section-header {
    justify-content: space-evenly;
}
.website section[data-blocksverticalalign="bottom"] article.section-header {
    justify-content: flex-end;
}


.website section[data-blockshorizontalalign="left"] article.section-header {
    align-items: flex-start;
}

.website section[data-blockshorizontalalign="center"] article.section-header {
    align-items: center;
}

.website section[data-blockshorizontalalign="right"] article.section-header {
    align-items: flex-end;
}

/* text-box horizontal alignment */


.website section[data-layoutclass="middle-center"][data-horizontalalign="left"] article.section-item,
.website section[data-layoutclass="middle-left"][data-horizontalalign="left"] article.section-item,
.website section[data-layoutclass="middle-right"][data-horizontalalign="left"] article.section-item {
    align-items: flex-start;
}


.website section[data-layoutclass="middle-center"][data-horizontalalign="center"] article.section-item,
.website section[data-layoutclass="middle-left"][data-horizontalalign="center"] article.section-item,
.website section[data-layoutclass="middle-right"][data-horizontalalign="center"] article.section-item {
    align-items: center;
}


.website section[data-layoutclass="middle-center"][data-horizontalalign="right"] article.section-item,
.website section[data-layoutclass="middle-left"][data-horizontalalign="right"] article.section-item,
.website section[data-layoutclass="middle-left"][data-horizontalalign="right"] article.section-item,
.website section[data-layoutclass="middle-right"][data-horizontalalign="right"] article.section-item {
    align-items: flex-end;
}

.website section[data-horizontalalign="left"] article.section-item .text-side {
    margin-right:auto!important;
}

.website section[data-horizontalalign="center"] article.section-item .text-side {
    margin-right:auto!important;
    margin-left:auto!important;
}

.website section[data-horizontalalign="right"] article.section-item .text-side {
    margin-left:auto!important;
}

@media only screen and (max-width: 680px) {
    .website section[data-horizontalalign="right"] article.section-item .text-side,
    .website section[data-horizontalalign="left"] article.section-item .text-side{
        margin-right:auto!important;
        margin-left:auto!important;
    }
}

.website article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    box-sizing: border-box;
}

section.fill-height {
    min-height: 100vh !important;
}


.website section .children {
    width: 100%;
    min-height: inherit;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
    box-sizing: border-box;
}


/* //////////  Effects /////////// */

/* HOVER EFFECTS */

.website section[data-effectshover="hover-effect-1"] article:not(.section-header) .pic-side img.pic{
    transition: all 1s cubic-bezier(0.04,-0.03, 0, 1.01);
}

.website section[data-effectshover="hover-effect-1"] article:not(.section-header):hover .pic-side img.pic{
    transition: all 3s cubic-bezier(0.04,-0.03, 0, 1.01);
    transform: scale(1.2);
}

.website section[data-effectshover="hover-effect-2"] article:not(.section-header) {
    transition: box-shadow 1s cubic-bezier(0.04,-0.03, 0, 1.01);
    box-shadow: -1px 8px 14px #00000000;
}

.website section[data-effectshover="hover-effect-2"] article:not(.section-header):hover {
    box-shadow: -1px 8px 14px #00000075;
}

.website section[data-effectshover="hover-effect-3"] article:not(.section-header) {
    transition: transform 1s cubic-bezier(0.04,-0.03, 0, 1.01);

}

.website section[data-effectshover="hover-effect-3"] article:not(.section-header):hover {
    transform: translateY(-3%);
}

.website section[data-effectshover="hover-effect-4"] article:not(.section-header) .text-side{
    transition: opacity 1s cubic-bezier(0.04,-0.03, 0, 1.01);
    opacity: 0;

}

.website section[data-effectshover="hover-effect-4"] article:not(.section-header):hover .text-side{
    opacity: 1;
}

.website section[data-effectshover="hover-effect-5"] article:not(.section-header) .pic-side{
    transition: opacity 1s cubic-bezier(0.04,-0.03, 0, 1.01);
    opacity: 0;

}

.website section[data-effectshover="hover-effect-5"] article:not(.section-header):hover .pic-side{
    opacity: 1;
}

.website section[data-effectshover="hover-effect-6"] article:not(.section-header) .text-side {

}

.website section[data-effectshover="hover-effect-6"] article:not(.section-header) .pic-side{
    transition: opacity 1s cubic-bezier(0.04,-0.03, 0, 1.01);
    opacity: 1;

}

.website section[data-effectshover="hover-effect-6"] article:hover:not(.section-header) .pic-side{
    opacity: 0.4;
}

.website section[data-effectshover="hover-effect-7"] article:not(.section-header) .text-side {

}

.website section[data-effectshover="hover-effect-7"] article:not(.section-header) .pic-side{
    transition: opacity 1s cubic-bezier(0.04,-0.03, 0, 1.01);
    opacity: 0.5;

}

.website section[data-effectshover="hover-effect-7"] article:not(.section-header):hover .pic-side{
    opacity: 1;
}



/* TEXT EFFECTS */

.website section[data-effecttext="text-effect-1"] .text-side h1,
.website section[data-effecttext="text-effect-1"] .text-side h2,
.website section[data-effecttext="text-effect-1"] .text-side h3,
.website section[data-effecttext="text-effect-1"] .text-side h4 {
    text-shadow: 0px 3px 5px #00000038;
}

.website section[data-effecttext="text-effect-2"] .text-side {
    outline-offset: 10px;
    outline: 1px solid #cccccc7a;

}

.website section[data-effecttext="text-effect-3"] article:not(.section-header) .text-side::before {
    position: absolute;
    left: 0;
    top: 13px;
    width: 100%;
    z-index: 999;
    content: "";
    border-top: 1px solid #cccccc7a;


}

.website section[data-effecttext="text-effect-3"] article:not(.section-header) .text-side::after {
    position: absolute;
    left: 0;
    bottom: 13px;
    width: 100%;
    z-index: 999;
    content: "";
    border-top: 1px solid #cccccc7a;


}


.website section[data-effecttext="text-effect-4"] .text-side {
    mix-blend-mode: multiply;
}

.website section[data-effecttext="text-effect-5"]  .text-side h1,
.website section[data-effecttext="text-effect-5"]  .text-side h3,
.website section[data-effecttext="text-effect-5"]  .text-side h4,
.website section[data-effecttext="text-effect-5"]  .text-side h2 {
    background-color: var(--theme-color-1)!important;
    padding: 10px !important;
    color: var(--theme-color-2)!important;
}

.website section[data-effecttext="text-effect-6"]  .text-side h1,
.website section[data-effecttext="text-effect-6"]  .text-side h3,
.website section[data-effecttext="text-effect-6"]  .text-side h4,
.website section[data-effecttext="text-effect-6"]  .text-side h2 {
    background-color: var(--theme-color-2)!important;
    padding: 10px !important;
    color: var(--theme-color-1)!important;
}


/* Image Effects
.website section img[data-idleeffect="darken_120"] {
    filter: brightness(80%);
}

.website section img[data-idleeffect="darken_140"] {
    filter: brightness(60%);
} */

.website section[data-idleeffect="darken_gardient_30"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #0000007d 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
}

.website section[data-imagefit="1_1"] article img.pic {
    object-fit: scale-down;
}

.website section[data-imagefit="contain"] article img.pic {
    object-fit: contain;
}

.website section[data-imagefit="cover"] article img.pic {
    object-fit: cover;
}

.filter-preview {
    position: relative;
}

.filter-preview.filter-1,
.website section[data-imagefilter="filter-1"] article[data-itemmediatype='PIC'] img.pic {
    filter: brightness(100%);
}

.filter-preview.filter-2,
.website section[data-imagefilter="filter-2"] article[data-itemmediatype='PIC'] img.pic {
    filter: brightness(80%);
}

.filter-preview.filter-3,
.website section[data-imagefilter="filter-3"] article[data-itemmediatype='PIC'] img.pic {
    filter: brightness(60%);
}

.filter-preview.filter-4::after,
.website section[data-imagefilter="filter-4"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000000 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-5::after,
.website section[data-imagefilter="filter-5"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, #000000 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-6::after,
.website section[data-imagefilter="filter-6"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 60%, #00000070 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-7::after,
.website section[data-imagefilter="filter-7"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 60%, #00000070 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-8::after,
.website section[data-imagefilter="filter-8"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 60%, #ffffff 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-9::after,
.website section[data-imagefilter="filter-9"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #ffffff 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-10::after,
.website section[data-imagefilter="filter-10"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 60%, #ffffff70 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-11::after,
.website section[data-imagefilter="filter-11"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 60%, #ffffff70 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}

.filter-preview.filter-12::after,
.website section[data-imagefilter="filter-12"] article[data-itemmediatype='PIC'] .pic-side::before {
    display: block;
    position: absolute;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 60%, #ffffff70 100%);
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
    content: '';
    z-index: 1;
    pointer-events: none;
}


.website section[data-imagescroll="normal"] article .pic-side img.pic {
    height: 100% !important;
    top: 0px !important;
}

.website section[data-imagescroll="fixed"] article .pic-side img.pic {
    min-height: 100vh !important;
    height: 100% !important;
}

.website section[data-imagescroll="parallax"] article .pic-side img.pic {
    min-height: 100vh !important;
    height: 100% !important;
}

.website section[data-imagescroll="parallax"] article[data-itemmediatype="MAP"] .pic-side img,
.website section[data-imagescroll="fixed"] article[data-itemmediatype="MAP"] .pic-side img{
    transform: none !important;
}

/* EFFECTS */
.website section article .text-side {
    transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* entrance effect #2 - from bottom */
.website section[data-effectentrance="entrance-effect-1"] article[data-visible="false"] .text-side {
    transition: none;
    transform: translate3d(0px, 50px, 0px);
    opacity: 0;
}

.website section[data-effectentrance="entrance-effect-1"] article[data-visible="true"] .text-side {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

/* entrance effect #2 - from left */
.website section[data-effectentrance="entrance-effect-2"] article[data-visible="false"] .text-side {
    transition: none;
    transform: translate3d(-50px, 0px, 0px);
    opacity: 0;
}

.website section[data-effectentrance="entrance-effect-2"] article[data-visible="true"] .text-side {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

/* entrance effect #3 - fade */
.website section[data-effectentrance="entrance-effect-3"] article[data-visible="false"] .text-side {
    transition: none;
    transform: translate3d(0px, 0px, 0px);
    opacity: 0;
}

.website section[data-effectentrance="entrance-effect-3"] article[data-visible="true"] .text-side {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

/* entrance effect #4 - appear cropped */
.website section[data-effectentrance="entrance-effect-4"] article .text-side div[data-elementtype="BUTTON"],
.website section[data-effectentrance="entrance-effect-4"] article .text-side h1,
.website section[data-effectentrance="entrance-effect-4"] article .text-side h2,
.website section[data-effectentrance="entrance-effect-4"] article .text-side h4,
.website section[data-effectentrance="entrance-effect-4"] article .text-side h3 {
    transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.website section[data-effectentrance="entrance-effect-4"] article[data-visible="false"] .text-side h1,
.website section[data-effectentrance="entrance-effect-4"] article[data-visible="false"] .text-side h2,
.website section[data-effectentrance="entrance-effect-4"] article[data-visible="false"] .text-side h4,
.website section[data-effectentrance="entrance-effect-4"] article[data-visible="false"] .text-side h3 {
    transition: none;
    transform: translate3d(-500px, 0px, 0px);
    opacity: 0;
}


.website section[data-effectentrance="entrance-effect-4"] article[data-visible="false"] .text-side div[data-elementtype="BUTTON"] {
    transform: translate3d(0px, 200px, 0px);
}

.website section[data-effectentrance="entrance-effect-4"] article .text-side {
    overflow: hidden;
}

.website section[data-effectentrance="entrance-effect-4"] article[data-visible="true"] .text-side div[data-elementtype="BUTTON"],
.website section[data-effectentrance="entrance-effect-4"] article[data-visible="true"] .text-side h4,
.website section[data-effectentrance="entrance-effect-4"] article[data-visible="true"] .text-side h1,
.website section[data-effectentrance="entrance-effect-4"] article[data-visible="true"] .text-side h2,
.website section[data-effectentrance="entrance-effect-4"] article[data-visible="true"] .text-side h3 {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

.website section[data-effectentrance="entrance-effect-5"] article .text-side h1,
.website section[data-effectentrance="entrance-effect-5"] article .text-side h2,
.website section[data-effectentrance="entrance-effect-5"] article .text-side h3,
.website section[data-effectentrance="entrance-effect-5"] article .text-side h4 {
    transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 1em;
    overflow: hidden;
    word-break: break-all;

}

body[data-ineditor="true"] .website section[data-layoutclass="middle-center"] article .text-side {
    transition: none;
}

.website section[data-effectentrance="entrance-effect-5"] article[data-visible="false"] .text-side h1,
.website section[data-effectentrance="entrance-effect-5"] article[data-visible="false"] .text-side h2,
.website section[data-effectentrance="entrance-effect-5"] article[data-visible="false"] .text-side h3,
.website section[data-effectentrance="entrance-effect-5"] article[data-visible="false"] .text-side h4 {
    width: 0%;
}

.website section[data-effectentrance="entrance-effect-5"] article[data-visible="true"] .text-side h1,
.website section[data-effectentrance="entrance-effect-5"] article[data-visible="true"] .text-side h2,
.website section[data-effectentrance="entrance-effect-5"] article[data-visible="true"] .text-side h3,
.website section[data-effectentrance="entrance-effect-5"] article[data-visible="true"] .text-side h4 {
    width: 100%;
}


/* HOVER */

.website section article .pic-side {
    overflow: hidden;
}

.website section article .pic-side img.pic {
    /*transition: all 0.1s linear;*/
}

.website section article:hover .pic-side img.pic {
    /* transform: scale(1); */
}

.website section article .pic-side img.pic {
    /* transform: scale(1) */
}


.website section[data-effectimage="image-effect-1"] article[data-itemmediatype='PIC'] .pic-side
{
    transform: scale(0.8);
}

.website section[data-effectimage="image-effect-2"] article[data-itemmediatype='PIC'] .pic-side
{
    transform: rotate(10deg) scale(0.9);
}

.website section[data-effectimage="image-effect-3"] article[data-itemmediatype='PIC'] .pic-side
{
    transform: translateX(-20%) scale(0.9);
}


.website section[data-effectimage="image-effect-3"] article[data-itemmediatype='PIC'] .text-side
 {
     transform: translateX(20%)!important;
 }

@media only screen and (max-width: 680px) {

    .website section[data-effectimage="image-effect-3"] article[data-itemmediatype='PIC'] .pic-side {
        transform: translateX(0%) scale(1)!important;
    }

    .website section[data-effectimage="image-effect-3"] article[data-itemmediatype='PIC'] .text-side
    {
        transform: translateX(0%)!important;
    }
}


.website section[data-effectimage="image-effect-4"] article[data-itemmediatype='PIC'] .pic-side img.pic
{
    mix-blend-mode: multiply;
}

.website section[data-effectimage="image-effect-5"] article[data-itemmediatype='PIC']:not(.section-header) .pic-side
{
    min-height: initial!important;
    height: initial!important;
    overflow: inherit!important;

}

.website section[data-effectimage="image-effect-5"] article[data-itemmediatype='PIC']:not(.section-header)
{
    min-height:inherit!important;
}

.website section[data-effectimage="image-effect-5"][data-layoutclass="middle-center"] article[data-itemmediatype='PIC']:not(.section-header)::before
{
    content:"";
    width: 100%;
    padding-top: 100%;
    position: relative;
}

.website section[data-effectimage="image-effect-5"][data-layoutclass="middle-center"] article[data-itemmediatype='PIC']:not(.section-header) .text-side
{
    position: absolute;
}

.website section[data-effectimage="image-effect-5"] article[data-itemmediatype='PIC']:not(.section-header) .pic-side::before
{
    content:"";
    width: 100%;
    padding: 0px!important;
    padding-top: 100%!important;
    position: relative;

}

.website section[data-effectimage="image-effect-5"] article[data-itemmediatype='PIC']:not(.section-header) .pic-side img.pic
{
position: absolute;
border-radius: 1500px;
transform: scale(0.9);
}

.website section[data-effectimage="image-effect-6"] article[data-itemmediatype='PIC'] .pic-side
{
transform: translateX(10%) scale(0.9);
border: 20px solid white;
}

.website section[data-effectimage="image-effect-6"] article[data-itemmediatype='PIC'] .text-side
{
transform: translateX(-10%)!important;
}

@media only screen and (max-width: 480px){
  
    .website section[data-imagefilter="filter-4"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
    }

    .website section[data-imagefilter="filter-5"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    }

    .website section[data-imagefilter="filter-6"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, #00000070 100%);
    }

    .website section[data-imagefilter="filter-7"] article[data-itemmediatype='PIC'] .pic-side::before {

        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #00000070 100%);
    }

    .website section[data-imagefilter="filter-8"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    }

    .website section[data-imagefilter="filter-9"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    }


    .website section[data-imagefilter="filter-10"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #ffffff70 100%);
    }

    .filter-preview.filter-11::after,
    .website section[data-imagefilter="filter-11"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff70 100%);
    }

    .website section[data-imagefilter="filter-12"] article[data-itemmediatype='PIC'] .pic-side::before {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff70 100%);
    }

}

@media only screen and (max-width: 680px){
    
    .website section[data-effectimage="image-effect-6"] article[data-itemmediatype='PIC'] .pic-side
    {
        transform: translateX(0%) scale(0.9);
        border: 20px solid white;
    }

    .website section[data-effectimage="image-effect-6"] article[data-itemmediatype='PIC'] .text-side
    {
        transform: translateX(0%)!important;
    }
}



.hidden {
display: none !important;
}

/* Pointer events*/
.website section article .pic-side {
    z-index: 1;
}

.website section article .text-side {
    z-index: 3;
}

.rotate-180 {
    transform: rotate(180deg);
}