/*
Theme Name: The7 Child
Theme URI: https://the7.io/
Template: dt-the7
Author: Dream-Theme
Author URI: https://dream-theme.com/
Description: Any design, any layout. No coding required. The7 is the most customisable WordPress theme on the market up to date. Add the power of Visual Composer, The7 Post Types, Ultimate Addons, Slider Revolution, and WooCommerce to the mix, and you'll get the ultimate web-site building toolkit! Theme is translation ready, compatible with WPML, SEO and mobile friendly (certified by Google).
Tags: multipurpose,responsive,retina ready,SEO ready,mobile friendly,iOS,material design,clean,minimal,business,corporate,portfolio,creative,photography,one page site,micro site
Version: 11.10.0.1.1701990381
Updated: 2023-12-07 23:06:21

*/

/* Github Commits */
.commits {
    margin: 1.5rem 0;
}

.commits ul {
    height: 150px;
    overflow-y: scroll;
}

.va-archive.is-loading #art-results::after {
    content: 'Loading…';
    display: block;
    padding: 1rem;
    opacity: .7;
}



/* Art AJAX */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 1.3s ease-in-out;
}

.load-more-container {
    margin: 1rem 0;
    text-align: center;
    flex: 0 0 100%;
    padding-left: 20px;
}

.load-more-container button {
    padding: 1rem 2rem;
    border-radius: 15px;
    border: none;
    width: 100%;
}

/* Staggered delays for up to 10 items */
.fade-up:nth-child(1) {
    animation-delay: 0s;
}

.fade-up:nth-child(2) {
    animation-delay: 0.5s;
}

.fade-up:nth-child(3) {
    animation-delay: 1s;
}

.fade-up:nth-child(4) {
    animation-delay: 1.5s;
}

.fade-up:nth-child(5) {
    animation-delay: 2s;
}

.fade-up:nth-child(6) {
    animation-delay: 2.5s;
}

.fade-up:nth-child(7) {
    animation-delay: 3s;
}

.fade-up:nth-child(8) {
    animation-delay: 3.5s;
}

.fade-up:nth-child(9) {
    animation-delay: 4s;
}

.fade-up:nth-child(10) {
    animation-delay: 5s;
}

/* Art Filter */
.va-archive {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 3rem;
    gap: 15px;
}

.art-item {
    opacity: 0;
}

.art-item img {
    width: 150px;
    height: auto;
    object-fit: contain;
    padding: 1rem;
}

.art-controls input,
.art-controls select {
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

.art-filter {
    background-color: #2A2A2A;
    padding: 10px;
    border-radius: 15px;
    flex: 0 0 calc(25% - 7.5px);
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    height: fit-content !important;
    position: sticky;
    top: 0px;
    align-self: flex-start;
}

.art-filter ul {
    list-style-type: none;
    margin: 1rem 0;
    padding-left: 0;
}

.art-filter li {
    margin: 1rem 0;
    background-color: #e4e4e4;
    padding: 1rem;
    border-radius: 5px;
}

.tag-filter {
    text-decoration: none;
    cursor: pointer;
    color: #2a2a2a;
    transition: all 0.3s ease-in-out;
}

.tag-filter.active {
    padding: 0;
    font-weight: bold;
}

.art-results-container {
    flex: 0 0 calc(75% - 7.5px);
    min-width: 0;
    padding: 0;
}

#art-results ul {
    list-style-type: none;
    margin-left: 0;
}

.art-item {
    display: flex;
    padding: 1rem;
    gap: 10px;
    margin-bottom: 1rem;
}

.art-item h2 {
    display: inline-block;
    margin: 1rem 0;
}

@media screen and (max-width: 440px) {
    .va-archive {
        gap: 1rem;
        margin-top: 1rem;
    }
    .art-filter {
        flex: 0 0 100%;
        flex-shrink: 1;
    }
    .art-filter ul {
        flex-direction: column;
        gap: 10px;
    }
    .art-results-container {
        flex: 0 0 100%;
        flex-shrink: 1;
    }
    .art-results-container ul {
        margin-left: 0;
    }
    .load-more-container {
        padding-left: 0;
    }

    .art-item {
        flex-direction: column;
        padding: 2rem;
    }

    .art-item img {
        width: 100%;
        padding: unset;
    }

    .art-item span {
        display: block;
        margin: 1rem 0;
    }

    .art-item h2 {
        display: block;
        font-size: 1.8rem;
        margin: 0;
    }
}



/** Type **/
.orange {
    color: #e59f73;
}

@font-face {
    font-family: "VentiBold";
    src:
        url('fonts/VentiCF/OTF/VentiCF-Bold.otf') format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: "VentiDemiBold";
    src:
        url('fonts/VentiCF/OTF/VentiCF-DemiBold.otf') format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: "VentiLight";
    src:
        url('fonts/VentiCF/OTF/VentiCF-Light.otf') format('opentype');
}

@font-face {
    font-family: "VentiLightItalic";
    src:
        url('fonts/VentiCF/OTF/VentiCF-LightItalic.otf') format('opentype');
}


/** Animation **/
.wave {
    animation-name: wave-animation;
    /* Refers to the name of your @keyframes element below */
    animation-duration: 2.5s;
    /* Change to speed up or slow down */
    animation-iteration-count: infinite;
    /* Never stop waving :) */
    transform-origin: 70% 70%;
    /* Pivot around the bottom-left palm */
    display: inline-block;
    animation-delay: 2s;
}

@keyframes wave-animation {
    0% {
        transform: rotate(0.0deg)
    }

    10% {
        transform: rotate(14.0deg)
    }

    /* The following five values can be played with to make the waving more or less extreme */
    20% {
        transform: rotate(-8.0deg)
    }

    30% {
        transform: rotate(14.0deg)
    }

    40% {
        transform: rotate(-4.0deg)
    }

    50% {
        transform: rotate(10.0deg)
    }

    60% {
        transform: rotate(0.0deg)
    }

    /* Reset for the last half to pause */
    100% {
        transform: rotate(0.0deg)
    }
}

.shine {
    animation-name: shine;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 2s;
    opacity: 0;
}

@keyframes shine {
    0% {
        opacity: 0
    }

    10% {
        opacity: 0.2
    }

    20% {
        opacity: 0.4
    }

    30% {
        opacity: 0.6
    }

    40% {
        opacity: 0.8
    }

    50% {
        opacity: 1
    }

    60% {
        opacity: 0.8
    }

    70% {
        opacity: 0.6
    }

    80% {
        opacity: 0.4
    }

    90% {
        opacity: 0.2
    }

    100% {
        opacity: 0
    }
}

.delay {
    animation-delay: 0.5s;
}

.delay-1 {
    animation-delay: 1s;
}

.delay-2 {
    animation-delay: 1.5s;
}

.material-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/** Header **/
header img {
    width: 60% !important;
}

/**
 * General 
 */
.home-icon svg {
    width: 70%;
    margin: auto;
    display: block;
}

.home-text,
.home-text h2 {
    color: #ffffff;
}

.home-text p {
    font-size: 0.8rem;
}

.cta-button {
    font-family: "VentiDemiBold";
    background-color: #EF8E70;
    padding: 1rem 2rem;
    color: white;
    border-radius: 15px;
    text-decoration: none;
    text-align: center;
}

.cta-button:hover {
    color: #ececec;
}

.ease {
    transition: all 0.5s ease-in-out;
}

.vince-form button[type='submit'] {
    font-family: "VentiDemiBold" !important;
    background-color: #EF8E70 !important;
    color: white !important;
}

/** 404 **/
.hero-text.not-found {
    font-size: 3rem;
}

.not-found.hero-open {
    margin: 1rem auto !important;
}

.not-found-search {
    width: 50%;
    margin: 1rem auto;
}

.not-found-search h2 {
    color: white;
}

.no-results.not-found {
    padding: 40px;
}

.art-item {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

/** Art Single **/

/** bruh.. **/
.art .post-thumbnail {
    display: none !important
        /* cuz why not */
}


.art-section {
    color: white;
    text-align: center;
}

.art-section a {
    color: white;
}

.art-hero svg,
.art-hero img {
    width: 30%;
    height: auto;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: auto;
    opacity: 0.1;
}

.art-hero .title {
    position: relative;
    padding-top: 20%;
    color: white;
}

.art-tags {
    display: table;
    margin: 1rem auto;
}

.art-tags ul {
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 0;
}

.art-tags li {
    list-style-type: none;
    font-size: 0.7rem;
}

.art-tags li:nth-of-type(even) {
    opacity: 0.7;
}

.art-container {
    background-color: #e6e6e6;
    padding: 10px;
    width: 50vw;
    height: auto;
    border-radius: 15px;
    display: block;
    margin: auto;
}

.art-container .final {
    background-color: #fff;
    padding: 10px;
}

.art-container model-viewer {
    width: 100%;
    height: 500px;
}

.art-content sub {
    font-style: italic;
}

.art-content hr {
    border: none;
    height: 3px;
    background: #EF8E6F;
    width: 50%;
    margin: 1rem 0;
}

.contain-never {
    margin: 5rem auto 1rem;
    width: 70%;
    text-align: left;
    font-size: 0.8rem;
}

.art-description .header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.art-description h2,
.art-description h3 {
    color: white;
}

.art-nav {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 1rem;
}


/**
 * Home Sections
 */

/** Hero **/
.hero-text {
    position: relative;
    color: white;
    font-family: 'VentiBold';
    width: 50%;
    margin: auto;
    text-align: center;
}

.hero-text em {
    position: absolute;
    top: -2rem;
    font-size: 1rem;
    font-family: 'VentiLightItalic';
}

.hero-open {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: fit-content;
    margin: 4rem auto 1rem;
    position: relative;
}

.hero-open .bubble {
    width: 150px;
    position: absolute;
    right: -4rem;
    top: -2rem;
}

.hero-open svg {
    width: 300px;
    height: auto;
    display: block;
}

/* Expression */
.life-section h2,
.life-section p {
    text-align: right;
}

.life-section .vc_separator {
    margin-left: auto;
    margin-right: 0;
}

/** Projects **/
.project-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-item {
    flex: 0 0 25%;
    background-color: white;
    color: #999;
    border-radius: 15px;
}

.project-item .header {
    background-color: #EF8E70;
    padding: 2rem;
    border-radius: 15px 15px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-item .body {
    padding: 1.5rem 0;
}

.project-item ul {
    list-style-type: none;
    margin-left: 0;
}

.project-item li:nth-of-type(odd) {
    background-color: #ececec;
}

.project-item li {
    font-size: 0.8rem;
    line-height: 1.5rem;
    padding: 1rem 1rem 1rem 1rem;
}

.project-item .cta-button {
    display: block;
    width: 30%;
    margin: 1rem auto 2rem;
    text-transform: uppercase;
    font-size: 0.7rem !important;
}

/** CTA **/
.cta-section a {
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    margin-left: 4rem;
}

/** Services **/
.services-container {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 15px;
    color: #999;
}

.services-container .header {
    background-color: #EF8E70;
    padding: 2rem;
    border-radius: 15px 15px 0 0;
}

.services-container ul {
    list-style-type: none;
    display: flex;
    gap: 4rem;
}

.services-container li {
    color: white;
    font-size: 1.3rem;
    font-family: 'VentiDemiBold';
}

.services-container .body {
    padding: 2rem;
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
}

.services-container .body div {
    flex: 0 0 50%;
}

.service-images {
    background-image: url('./images/png/green-bg.png');
    background-size: cover;
    background-attachment: fixed;
    padding: 1rem 0;
}

.service-images img {
    width: 90%;
    margin: auto;
}

/* Active Classes */
.service-titles li {
    opacity: 0.5;
    cursor: pointer;
}

.service-titles li:hover {
    opacity: 0.8;
}

.service-titles .active {
    opacity: 1;
}

.service-description p {
    display: none;
}

.service-description .active {
    display: inline;
}

.service-images img {
    display: none;
}

.service-images .active {
    display: block;
}



/** Footer **/
footer .widget_nav_menu {
    padding-left: 0 !important;
}

#block-16 li {
    margin-bottom: 0.7rem;
}

footer .wf-1-2 .wp-block-column {
    width: 100%;
}

.collap-container {
    width: 75%;
    margin: 1rem auto;
    padding: 1rem;
    background-color: #777;
    border-radius: 15px;
}

.collap {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 1rem 0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: all 0.4s ease-in-out;
}

.collap button {
    padding-left: 1rem;
    background: none;
    border: none;
    color: white;
    width: 100%;
    text-align: left;
    transition: all 0.4s ease-in-out;
}

.contente {
    padding: 1rem 2rem;
    margin-top: 1rem;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
    border-radius: 15px;
}

/**
 * Tablet
 */
@media screen and (max-width: 770px) {
    .art-results-container {
        flex: 0 0 100%;
    }
    .art-filter {
        flex: 0 0 100%;
        margin-bottom: 1.5rem;
    }
    .project-item {
        flex: 0 0 75%;
    }

    .not-found-search {
        width: 70%;
        margin: 1rem auto;
    }
}


/**
 * Mobile
 */
@media screen and (max-width: 440px) {
    .collap-container {
        width: 100%;
    }

    .art-container {
        width: 90%;
    }

    .art-description {
        width: 95%;
    }

    .art-tags ul {
        gap: 5px;
        flex-direction: column;
    }

    .not-found-search {
        width: 100%;
        margin: 1rem auto;
    }

    /** Home Page **/
    .hero-open svg {
        width: 200px;
    }

    .hero-open .bubble {
        width: 100px;
        right: -1rem;
    }

    .hero-text {
        line-height: 2.3rem;
    }

    .hero-text em {
        top: -2.1rem;
    }

    .life-section h2,
    .life-section p {
        text-align: left;
    }

    .life-section .vc_separator {
        margin-left: 0;
        margin-right: auto;
    }

    .project-item {
        flex: 0 0 100%;
    }

    .project-item .cta-button {
        width: 50%;
        font-size: 0.7rem;
        padding: 1rem;
    }

    .cta-section h3 {
        line-height: 3rem;
    }

    .cta-section a {
        display: block;
        width: 50%;
        margin: 2rem auto;
        line-height: 2rem;
    }

    .services-container ul {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .services-container .body {
        flex-direction: column;
        padding: 1rem 1.5rem;
    }

}