/*
Theme Name: Cygni Child
Description: Child theme for the Cygni. Child themes are the recommended way of making modifications to a theme. <a href="http://codex.wordpress.org/Child_Themes">Read More</a>
Author: PeThemes
Version: 1.9
Author URI: http://pethemes.site
Template: cygni
*/

:root {
    --item-h-sm: 300px;
    --item-w-sm: 350px;
}

@media (min-width: 640px) {
    :root {

        --item-h-sm: 700px;
        --item-w-sm: 500px;
    }
}
/* =Theme customization starts here
-------------------------------------------------------------- */
/*.vertical-item.activated {*/
/*    position: relative;*/
/*    height: var(--item-h-sm) !important;*/
/*}*/
/*.vertical-item.activated .vertical-image-wrapper {*/
/*    height: var(--item-h-sm) !important;*/
/*    min-height: unset;*/
/*}*/

/*.vertical-image-wrapper {*/
/*    height: 100%;*/
/*    !*transition: none !important;*!*/
/*    !*animation: fadeInRight1 0.5s ease-out forwards;*!*/
/*}*/

/*!*.activated .vertical-image-wrapper {*!*/
/*!*    height: 100% !important;*!*/
/*!*}*!*/
/*.vertical-item.activated .tns-outer {*/
/*    width: 100vw;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    transform: translate(-50%);*/
/*    height: 100%;*/
/*}*/
/*.vertical-item-meta {*/
/*    animation: fadeInLeft 0.5s ease-out forwards;*/
/*}*/
/*.vertical-image-wrapper {*/
/*    transition: height 0.5s ease-in-out;*/
/*}*/
/*.vertical-item .iitem {*/
/*    width: 100%;*/
/*    transition: width 1s;*/
/*    transform: none;*/
/*    left: 0;*/
/*    !*-webkit-transition: width 1s ease-in-out, height 1s ease-in-out;*!*/
/*    !*-moz-transition: width 1s ease-in-out, height 1s ease-in-out;*!*/
/*    !*-o-transition: width 1s ease-in-out, height 1s ease-in-out;*!*/
/*    !*transition: width 1s ease-in-out, height 1s ease-in-out;*!*/
/*}*/
/*.vertical-item.activated .iitem {*/
/*    transition: none;*/
/*    display: flex;*/
/*    gap: 20px;*/
/*    width: 100vw;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    transform: translate(-50%);*/
/*    height: 100%;*/
/*    overflow: hidden;*/
/*}*/
/*.vertical-item.activated .iitem>* {*/
/*    flex: 0 0 auto;*/
/*}*/
/*.vertical-item.activated .iitem>.show {*/
/*    animation: fadeInUp 0.5s ease-out forwards;*/
/*}*/
/*.vertical-item.activated .iitem>.not-show {*/
/*    animation: none;*/
/*}*/
/*.vertical-item.activated .iitem {*/
/*    cursor: grab;*/
/*    user-select: none;*/
/*}*/

/*.vertical-item.activated .iitem.active {*/
/*    cursor: grabbing;*/
/*}*/
/*.vertical-item.activated .iitem>*:not(.vertical-image-wrapper) {*/
/*    display: none;*/
/*}*/
/*.vertical-item.activated .iitem>.show:not(.vertical-image-wrapper) {*/
/*    display: block;*/
/*}*/
/*.vertical-item p {*/
/*    width: var(--item-w-sm);*/
/*    margin-top: 0;*/
/*}*/
/*.tns-ovh {*/
/*    height: 100%;*/
/*}*/
/*.tns-inner {*/
/*    height: 100%;*/
/*}*/
/*figure.tns-item {*/
/*    height: var(--item-h-sm);*/
/*}*/

/*figure.tns-item img {*/
/*    height: 100%;*/
/*    width: auto;*/
/*    object-fit: cover;*/
/*}*/
/*.tns-inner .vertical-image-wrapper {*/
/*    width: auto !important;*/
/*}*/
/*.vertical-item-title1 {*/
/*    display: none;*/
/*}*/
/*.vertical-category1 {*/
/*    display: none;*/
/*}*/
/*.vertical-item-summary1 {*/
/*    display: none;*/
/*}*/
/*.activated .vertical-item-summary1 {*/
/*    display: block;*/
/*}*/
/*.activated .vertical-item-title1 {*/
/*    display: block;*/
/*}*/
/*.activated .vertical-category1 {*/
/*    display: inline-block;*/
/*}*/

/*.meta1 {*/
/*    position: absolute;*/
/*    height: 100%;*/
/*    !*width: 40%;*!*/
/*    width: 80%;*/
/*    z-index: 10;*/
/*    padding-left: 10px;*/
/*}*/
/*.vertical-item-title1 {*/
/*    color: #ededed;*/
/*    !*font-size: 40px;*!*/
/*    font-size: 20px;*/
/*    font-weight: 700;*/
/*    !*line-height: 55px;*!*/
/*    letter-spacing: -1px;*/
/*    -webkit-transition: all .4s ease .4s;*/
/*    -o-transition: all .4s ease .4s;*/
/*    transition: all .4s ease .4s;*/
/*    animation: fadeInRight 0.6s ease-out forwards;*/
/*}*/
@media (min-width: 640px) {
    .vertical-item-title1 {
        font-size: 32px;
    }
    .vertical-item-summary1 {
        margin-top: 20px;
    }
}
@media (min-width: 800px) {
    .vertical-item-title1 {
        font-size: 40px;
    }
    .vertical-item-summary1 {
        margin-top: 20px;
    }
    #nav-categories-top {
        display: none !important;
        position: static !important;
    }
    .portfolio-showcase .vertical-projects  {
        padding-top: 20vh !important;
    }
    #nav-categories-right {
        display: flex;
    }
}
/*.vertical-category1 {*/
/*    font-size: 14px;*/
/*    opacity: .6;*/
/*    font-weight: 600;*/
/*    color: #ededed;*/
/*    -webkit-transition: all .4s ease .4s;*/
/*    -o-transition: all .4s ease .4s;*/
/*    transition: all .4s ease .4s;*/
/*    animation: fadeInRight 0.5s ease-out forwards;*/
/*}*/
/*.vertical-anim-holder {*/
/*    !*animation: fadeInRight1 0.5s ease-out forwards;*!*/
/*}*/
/*.vertical-anim-holder img {*/
/*    !*animation: fadeInLeft 0.5s ease-out forwards;*!*/
/*}*/
/*.activated .vertical-anim-holder img {*/
/*    !*animation: fadeInRight1 0.5s ease-out forwards;*!*/
/*}*/

/*.activated .vertical-anim-holder {*/
/*    position: relative !important;*/
/*}*/
/*.activated .vertical-image-wrapper {*/
/*    width: auto !important;*/
/*}*/
/*.activated .vertical-anim-holder img {*/
/*    position: relative !important;*/
/*    margin-left: 50px;*/
/*}*/
/*.vertical-item-summary1 {*/
/*    -webkit-transition: all .4s ease .4s;*/
/*    -o-transition: all .4s ease .4s;*/
/*    transition: all .4s ease .4s;*/
/*    animation: fadeInRight 0.7s ease-out forwards;*/
/*}*/
/*.vertical-item img {*/
/*    !*transition: none;*!*/
/*    transition: all 1s;*/
/*}*/
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight1 {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}


/*.sticky {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);*/
/*    transition: transform 0.3s ease, box-shadow 0.3s ease;*/
/*}*/
#nav-categories-top {
    font-family: Archivo, sans-serif;
    top: 0;
    left: 0;
    font-weight: 500;
    font-size: 16px;
    background: black;
    padding: 20px 15px;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease, padding-top 0s;
    z-index: 9999;

    display: flex;
    gap: 10px;

    flex-flow: wrap;
    overflow-x: auto;
}
/*#nav-categories-top.fixed {*/
/*    position: fixed;*/
/*    margin-top: 0;*/
/*    margin-bottom: 0;*/
/*}*/
/*.admin-bar .site-header {*/
/*    z-index: 99999;*/
/*}*/
/*.portfolio-showcase .vertical-projects {*/
/*    padding-top: 0;*/
/*}*/
#nav-categories-top {
    margin-bottom: 20px;
}

#nav-categories-right {
    position: absolute;
    font-family: Archivo, sans-serif;
    right: 0;
    color: rgb(237, 237, 237);
    text-align: right;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 99;
    top: -530px;
    gap: 10px;
    /*padding: 0px 15px;*/
    flex-flow: column;
    overflow-x: auto;
    font-weight: 500;
    font-size: 19px;
}
.nav-categories-right {
    display: none;
}
/*.vertical-item figure img {*/
/*    width: auto !important;*/
/*    object-fit: cover;*/
/*}*/

#nav-categories-top {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
#nav-categories-top::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
#nav-categories-top .category-item {
    white-space: nowrap;
}
.category-item {
    cursor: pointer;
}
.category-item.active {
    color: #34d399 !important;
}
.site-logo {
    /*width: 110px;*/
    cursor: pointer;
}

.site-logo .menu-toggle {
    display: none;
    right: 7vw;
    cursor: pointer;
    top: 10vh;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    z-index: 113;
    width: 35px;
    height: 35px;
}
.site-logo .toggle-line {
    display: block;
    height: 2px;
    background-color: #000;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all .25s cubic-bezier(.475, .425, 0, .995);
    -o-transition: all .25s cubic-bezier(.475, .425, 0, .995);
    transition: all .25s cubic-bezier(.475, .425, 0, .995);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.site-logo .toggle-line {
    background-color: #ededed;
}

.site-logo  .toggle-line-1 {
    margin-top: 9px;
}

.site-logo .toggle-line-in {
    width: 35px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
.site-logo .toggle-line-2 {
    -webkit-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
#nav-categories-right {
    right: 7vw;
    /*top: 10vh;*/
}

@media only screen and (max-width: 850px) {
    .site-branding, .site-navigation .menu-toggle {
        top: 5vh;
    }
    #nav-categories-right {
        right: 15px;
        top: -570px;
    }
}
#site-navigation .menu-toggle {
    display: none;
}
#site-navigation .menu-toggle.is-active {
    display: block;
}