/* @group Portfolio
------------------------------------ */

@media only screen
and (min-width : 961px) {
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}

/* @end */


.portfolio-widget {
    padding-bottom: 10rem;
    margin-top: 12.2rem;
}
.portfolio-widget .img-container {
    font-size: 0;
}
.portfolio-widget section {
    display: flex;
    flex-direction: column;
}
.portfolio-widget .img-box {
    cursor: pointer;
    box-shadow: 5px 5px 10px #00000029;
    flex: 1;
    font-size: 0;
}
.portfolio-widget .img-box img {
    pointer-events: none;
}
.portfolio-widget .backtotop__row {
    margin-top: 5rem;
}
.portfolio-widget .backtotop__row .bttn { position: relative; font: 400 1.5rem / 1em var(--roboto-font) }
.portfolio-widget .backtotop__row .bttn::after { content: ''; display: inline-block; height: 100%; background-image: url('../../img/layout/icons/arrow-up.svg'); background-repeat: no-repeat; background-position: center center; }
.portfolio-widget .backtotop__row .bttn:hover::after { background-image: url('../../img/layout/icons/arrow-up-white.svg'); }
@media only screen
and (min-width : 961px) {

    .portfolio-widget {
        padding-bottom: 10rem;
        margin-top: 21.2rem;
    }
    .portfolio-widget__row {
        column-gap: 7.2rem;
    }
    .portfolio-widget .img-box {
        margin-bottom: 7.9rem;
    }
    .portfolio-widget section {
        flex: 1;
        padding: 0;
    }

    .portfolio-widget .backtotop__row .bttn { min-width: 15rem; height: 4rem; }
    .portfolio-widget .backtotop__row .bttn::after { width: 2rem; background-size: 2rem; margin-left: .5rem; }

}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .portfolio-widget section {
        flex: 0 1 100%;
    }
    .portfolio-widget .img-box {
        margin-bottom: 2rem;
    }

    .portfolio-widget .backtotop__row .bttn { min-width: 16rem; height: 4rem; font-size: 1.5em; }
    .portfolio-widget .backtotop__row .bttn::after { width: 2.5rem; background-size: 2.5rem; margin-left: .5rem; }
}




/* @group Popup-gallery
------------------------------------ */
.popup-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 11;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .7s, visibility .7s;
}   
.popup-gallery,
.popup-gallery .row {
    height: 100vh;
}
.popup-gallery::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
}
.popup-gallery .col-12-12 {
    width: 100%;
    max-width: 126.4rem;
    margin: 0 auto;
    top: 2.5rem;
}
.popup-gallery .splide__slide figure{
    height: calc(100vh - 30vh);
    box-shadow: 5px 5px 15px #0000005D;
    border: 1px solid #707070;
}
.popup-gallery .splide {
    position: relative;
    z-index: 2;
}
.popup-gallery .splide__slide {
    position: relative;
    margin-bottom: 5rem;
}
.popup-gallery .splide__slide .figcaption {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -5rem;
    left: 0;
}
.popup-gallery .splide__slide h3 {
    font: 400 1.6em / 1.6em var(--roboto-font);
    letter-spacing: 0px;
    color: var(--main-gray);
}
.popup-gallery [data-comp="close-gallery"] {
    position: absolute;
    z-index: 12;
    font-size: 1.5rem;
}
.popup-gallery [data-comp="close-gallery"]::after { 
    content: '';
    display: inline-block;
    width: 2.1rem;
    height: 2.2rem;
    background-image: url('../../img/layout/icons/close.svg');
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: top center;
}
.popup-gallery [data-comp="close-gallery"]:hover::after {
    background-image: url('../../img/layout/icons/close-white.svg');
}
body[data-popup='active-gallery'] { overflow: hidden;}
body[data-popup='active-gallery'].iPhone-iPod { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

[data-popup='active-gallery'] .popup-gallery {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
@media only screen
and (min-width : 961px) {
    .popup-gallery [data-comp="close-gallery"] {
        top: 0;
        right: -12rem;
        height: 4rem;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .popup-gallery .col-12-12 {
        top: -3rem;
    }
    .popup-gallery .splide__slide h3 {
        font-size: 1.5em;
    }
    .popup-gallery .splide__slide figure {
        height: calc(100vh - 35vh);
    }
    .popup-gallery [data-comp="close-gallery"] {
        bottom: -5rem;
        left: 1rem;
        font-size: 1.5em;
    }
    .popup-gallery [data-comp="close-gallery"]::after {
        width: 2rem;
        height: 2rem;
        background-size: 2rem;
    }
}

/* @end */

/* Bttn float */
.splide__arrows button.popup-gallery__arrow-bttn {
    border: none;
}
.popup-gallery__arrow-bttn.splide__arrow--prev {
    left: -1.5rem;
}
.popup-gallery__arrow-bttn.splide__arrow--next {

    right: -1.5rem;
}
@media only screen
and (min-width : 961px) {
    .popup-gallery__arrow-bttn.splide__arrow--prev {
        left: -5rem;
    }
    .popup-gallery__arrow-bttn.splide__arrow--next {
        right: -5rem;
    }
}



.portfolio-widget .img-box { opacity: 0; }  
.portfolio-widget .img-box.show { animation: fadeDown 1s forwards; }