/* 
Theme Name: Erik Nord Arkitekter
Theme URI: https://pirenko.com
Description: Child theme of Hello Elementor
Author: Pirenko
Author URI: https://pirenko.com
Template: hello-elementor
Version: 1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Elementor - Pirenko CSS class based tweaks
*/

html .elementor-widget.el_unmargined_p p {
    margin-bottom: 0px;
}

html .elementor-widget.el_unmargin {
    margin-bottom: 0px;
}
.elementor-menu-toggle {
    outline: none;
}

html a {
    color: var(--e-global-color-text);
}

html a:hover {
    color: var(--e-global-color-text);
}

.cn-privacy-policy-link.cn-link {
    color: #FFFFFF !important;
    text-decoration: underline;
}

.erik_policy h4 {
    font-size: 1.3em;
    font-family: "Karla", Sans-serif;
    margin-bottom: 4px;
    margin-top: 40px;
}

.elementor .erik_policy a {
    text-decoration: underline;
}

.nord-header-font {
    font-family: "Karla", Sans-serif;
}

.elementor-1124 .elementor-element.elementor-element-43579a8 .elementor-heading-title {
    word-wrap: break-word;
}

.elementor-element-71b8c89 > div {
    padding: 0px !important;
}

html .menu-item-1412 > a {
    padding-right: 0px !important;
}

/*--------------------------------------------------------------
# Image grid
--------------------------------------------------------------*/
.nord-image-flex {
    display: flex;
    gap: 20px;
    position: relative;
    margin-bottom: 30px;
}

.nord-popup .nord-image-flex {
    margin-bottom: 20px;
}

.nord-image-flex>div {
    margin: 0px 0px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.nord-popup .nord-image-flex>div {
    margin-bottom: 0px;
}

.nord-image-item-thumbnail {
    line-height: 0px;
}

.nord-image-item-thumbnail img {
    visibility: hidden;
    line-height: 0px;
}

.nord-image-item-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    text-align: left;
    width: auto;
    max-width: 80%;
    font-size: 0.7em;
    background-color: #FFFFFF;
    padding: 8px;
    z-index: 2;
}

.nord-image-item-title .nord-header-font {
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 700;
}

.nord-image-item-thumbnail > a {
    display: block;
}

.nord-image-item.nord-with-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nord-image-item {
    overflow: hidden;
}
.elementor .en_video-bg {
    position: absolute;
    min-height: 1px;
    right: inherit;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

html body,
html h1, 
html h2, 
html h3, 
html h4, 
html h5, 
html h6 {
    color:var(--e-global-color-text);
}


/*--------------------------------------------------------------
# Isotope-grid
--------------------------------------------------------------*/
.nord-isotope .nord-image-item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.nord-isotope .nord-image-item,
.nord-isotope .grid-sizer {
    width: 33.3333%;
}

.nord-isotope .nord-image-item-landscape {
    width: 66.6666%;
}

.nord-isotope .nord-image-item::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #FFFFFF;
    height: 10px;
    z-index: 12;
    width: 100%;
    pointer-events: none;
}

.nord-isotope .nord-image-item::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: #FFFFFF;
    height: 10px;
    z-index: 12;
    width: 100%;
    pointer-events: none;
}

.nord-isotope .grid-maker {
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
}

.nord-isotope .grid-maker::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #FFFFFF;
    height: 100%;
    z-index: 12;
    width: 10px;
    pointer-events: none;
}

.nord-isotope .grid-maker::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #FFFFFF;
    height: 100%;
    z-index: 12;
    width: 10px;
    pointer-events: none;
}

.nord-isotope .nord-image-item-title {
    bottom: 30px;
    left: 30px;
}

.erik_folio_filter > ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0px 10px;
    list-style: none;
    text-transform: uppercase;
    justify-content: flex-end;
    padding: 0px 10px;
    font-weight: 700;
} 

.erik_folio_filter > ul li.active {
    text-decoration: underline;
}

.nord-isotope .en_video-bg {
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
}
.nord-isotope .en_video-bg {
    position: absolute;
    min-height: 1px;
    right: inherit;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
}
.elementor .nord-isotope .en_video-bg {
    right: 0;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.nord-image-item.nord-with-text h2 {
    font-family: "Karla", Sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

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

    .erik_folio_filter > ul {
        justify-content: flex-start;
    }

}

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

    .erik_folio_filter > ul {
        flex-direction: column;
        gap: 8px;
        margin: 10px 0px;
    }

    .nord-isotope .nord-image-item,
    .nord-isotope .grid-sizer {
        width: 50%;
    }

    .nord-isotope .nord-image-item-landscape {
        width: 100%;
    }

    .nord-image-item-title {
        bottom: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
    }

    .nord-isotope .nord-image-item-title {
        bottom: 20px;
        left: 20px;
        max-width: calc(100% - 40px);
    }

}

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

    .nord-isotope .nord-image-item,
    .nord-isotope .grid-sizer {
        width: 100%;
    }

}


/*--------------------------------------------------------------
# Lightbox
--------------------------------------------------------------*/
.elementor-slideshow__header .e-eicon-share-arrow {
    display: none !important;
}

html .elementor-slideshow__counter,
body.page .elementor-slideshow__title,
body.single-portfolios .elementor-slideshow__title,
body.archive .elementor-slideshow__title {
    font-size: 12px;
    text-transform: uppercase;
    font-family: "Karla", Sans-serif;
    font-weight: 400;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.elementor-location-header .elementor-widget-image a img[src$=".svg"] {
    width: 310px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.elementor-location-footer a:not(.elementor-button):hover {
    text-decoration: underline;
}


/*--------------------------------------------------------------
# Homepage
--------------------------------------------------------------*/
html .elementor-175 .elementor-element.elementor-element-91a575c .swiper-slide {
    height: calc(100vh - 107px);
}

html body.admin-bar .elementor-175 .elementor-element.elementor-element-91a575c .swiper-slide {
    height: calc(100vh - 107px - 32px);
}

@keyframes bounceInSmall {
    0% {
        opacity: 1;
        transform: translateY(0px)
    }

    20% {
        opacity: 1;
        transform: translateY(-5px)
    }

    30% {
        opacity: 1;
        transform: translateY(10px)
    }

    40% {
        opacity: 1;
        transform: translateY(0)
    }
}

.en_next_arrow svg {
    -webkit-animation-name: bounceInSmall;
    -moz-animation-name: bounceInSmall;
    -ms-animation-name: bounceInSmall;
    -o-animation-name: bounceInSmall;
    animation-name: bounceInSmall;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -ms-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-iteration-count: infinite;
}

html body:not(.rtl) .elementor-175 .elementor-element.elementor-element-35b7ea0 {
    margin-left: -30px;
}


/*--------------------------------------------------------------
# Single portfolio
--------------------------------------------------------------*/
@media only screen and (min-width: 1025px) {

    .en_left_title_project .elementor-element-f4f166d.e-con-full.e-flex {
        flex-direction: row-reverse;
    }

}


/*--------------------------------------------------------------
# visualisering & singe portfolio 
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {

    body.single-portfolios .nord-image-flex[data-count="3"],
    body.single-portfolios .nord-image-flex[data-count="4"],
    html .page-id-185 .nord-image-flex {
        flex-direction: column;
    }

    body.single-portfolios .nord-image-flex[data-count="3"]>div,
    body.single-portfolios .nord-image-flex[data-count="4"]>div,
    html .page-id-185 .nord-image-flex>div {
        width: 100% !important;
    }

}