/**home css**/
/*banner-home*/
#banner-home {
    color: var(--cz-10);
}

#banner-home .bg {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#banner-home .bgs {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    /*-webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);*/
}

#banner-home .box-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
}

#banner-home .box-center h5 {
    color: var(--cz-10);
    opacity: .7;
    margin: var(--d-3);
}

#banner-home .box-bottom {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
}

#banner-home .box-bottom .list-pr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--d-4);
    margin-bottom: var(--d-3);
    align-items: baseline;
    font-size: .7rem;
    text-align: center;
}

#banner-home .box-bottom .list-pr a {
    color: var(--cz-10);
    opacity: .5;
}

#banner-home .box-bottom .list-pr a img {
    width: 2rem;
}

#banner-home .box-bottom .list-pr a figcaption {
    font-size: .9rem;
}

#banner-home .box-bottom .list-pr a:hover {
    opacity: 1;
}

#banner-home .box-bottom img {
    margin-bottom: .7rem;
}

/*#banner-home::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}*/
/*estação*/
#estacao{
    position: relative;
    padding: var(--d-4);
    color: var(--cz-10);
    background-size: cover;
    background-position: center;
    min-height: calc(100vh - 70px);
    background-image: url(estacao/bg-primaverou.jpg);
}
#estacao .logo{
    display: block;
    margin: auto;
    width: 25rem;
    background-color: rgba(0, 0, 0, .3);
    padding: 1rem;
    border-radius: 1rem;
}
#estacao p{
    padding: 5rem 7rem 0rem 7rem;
}

/*nav*/
#home-nav {
    position: relative;
    padding: var(--d-3);
    color: var(--cz-10);
    background-color: var(--cz-2);
}

#home-nav>h1 {
    font-size: 3.7rem;
}

#home-nav>h2 {
    font-size: 2rem;
    opacity: .7;
}

#home-nav .hr {
    opacity: .5;
    --hr-h: .2rem;
    --hr-w: var(--col-2);
    --hr-color: var(--cz-9);
    margin-top: .9rem;
    margin-bottom: 1.2rem;
}

#home-nav section {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-direction: column;
}
#home-nav section>.row {
    justify-content: space-around;
    gap: 1rem;
}
#page #sobre h4 {
    font-size: 19pt;
    font-variant: small-caps;
    text-transform: uppercase;
    background-color: rgba(4,83,227,1.00);
    color: rgba(255,255,255,1.00);
    padding-top: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
    padding-left: 17px;
    border-radius: 24px;
    margin-top: 41px;
    display: block;
    margin-bottom: 39px;
    transform: translateX(-50%);
    max-width: 536px;
    position: relative;
    left: 50%;
}


/*articles vits*/
.home-vit{
    position: relative;
    min-height: 100vh;
    padding: 3rem;
    padding-top: 7rem;
    gap: 1rem;
    background-color: var(--cz-10);
    color: var(--cz-2);
    overflow: hidden;
}

.home-vit .bg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.home-vit .bgs {
    /*position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .35);*/
    /*backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);*/
}

.home-vit .blox {
    position: relative;
    padding: 1.5rem;
    background-color: var(--cz-10);
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    font-family: var(--t0);
    color: #0453e3;
    font-size: 5rem;
    text-align: center;
    margin-left: auto;
    display: block;
    margin-bottom: 20px;
    margin-right: auto;
    width: 187px;
}

.home-vit h1 {
    color: #0453e3;
    position: relative;
    font-size: 2.1rem;
    font-weight: bold;
    background-color: var(--cz-10);
    padding: .5rem 2rem .5rem 2rem;
    border-radius: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 172px;
    margin-bottom: 46px;
}

.home-vit h3 {
    position: relative;
    font-size: 1.5rem;
    text-align: justify;
    text-indent: 1.2cm;
    padding: 3rem;
    border-radius: 2rem;
    background-color: rgba(255,255,255,.75);
    margin-bottom: 34px;
}

.home-vit .call-home {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/*shop*/
#shop{
    color: var(--c1);
    padding-top: 21rem;
}
#shop .bgs{
    
}
#shop h3{
    margin-top: 2rem;
    font-weight: 500;
}
/*mundo contemporâneo*/
#mundocontemporaneo .blox img{
    width: 14rem;
}
#mundocontemporaneo .call-home{
    --btn1:#2e7624;
}
/*nav cards*/
.card-dpm {
    position: relative;
    transition: .3s;
    user-select: none;
    cursor: pointer;
    border-radius: 1.2rem;
    overflow: hidden;
    padding: .7rem;
    padding-bottom: 12rem;
    margin-bottom: 1rem;
    height: 40rem;
    flex-basis: 40vw;
    flex-grow: 1;
}

.card-dpm .bg {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -70%;
    transition: .3s;
}

.card-dpm .logo {
    transition: .3s;
    position: relative;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

.card-dpm h1 {
    position: relative;
    font-size: 3.9rem;
}

.card-dpm h2 {
    position: relative;
    font-size: 1.9rem;
    opacity: .7;
}

.card-dpm::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-dpm.mn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7rem;
    padding-bottom: 0;
    padding-top: 0;
    position: relative;
}
.card-dpm.mn .logo {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: 50%;
}
.card-dpm.mn:hover .logo{
    height: 70%;
}
/*workdesig*/
#design {
    background-color: var(--cz-1);
    color: var(--cz-10);
}

#design .bg {
    top: -32rem;
    min-width: 150%;
}

#design:hover .bg {
    top: -35rem;
    opacity: .9;
}

/*audiovisual*/
#audiovisual {
    background-color: var(--cz-0);
    color: var(--cz-10);
}

#audiovisual .bg {
    top: 15rem;
}

#audiovisual:hover .bg {
    top: 13rem;
    opacity: .9;
}

/*fotografia*/
#fotografia {
    color: var(--cz-10);
    background-image: -webkit-linear-gradient(317deg,rgba(15,194,192,1.00) 0%,rgba(2,53,53,1.00) 100%);
    background-image: -moz-linear-gradient(317deg,rgba(15,194,192,1.00) 0%,rgba(2,53,53,1.00) 100%);
    background-image: -o-linear-gradient(317deg,rgba(15,194,192,1.00) 0%,rgba(2,53,53,1.00) 100%);
    background-image: linear-gradient(133deg,rgba(15,194,192,1.00) 0%,rgba(2,53,53,1.00) 100%);
}
/*marketing*/
#marketing {
    background-image: -webkit-linear-gradient(326deg,rgba(153,70,155,1.00) 0%,rgba(55,16,117,1.00) 100%);
    background-image: -moz-linear-gradient(326deg,rgba(153,70,155,1.00) 0%,rgba(55,16,117,1.00) 100%);
    background-image: -o-linear-gradient(326deg,rgba(153,70,155,1.00) 0%,rgba(55,16,117,1.00) 100%);
    background-image: linear-gradient(124deg,rgba(153,70,155,1.00) 0%,rgba(55,16,117,1.00) 100%);
}
/*web*/
#web {
    color: var(--cz-10);
    background-image: -webkit-linear-gradient(326deg,rgba(53,160,184,1.00) 30.57%,rgba(2,102,125,1.00) 100%);
    background-image: -moz-linear-gradient(326deg,rgba(53,160,184,1.00) 30.57%,rgba(2,102,125,1.00) 100%);
    background-image: -o-linear-gradient(326deg,rgba(53,160,184,1.00) 30.57%,rgba(2,102,125,1.00) 100%);
    background-image: linear-gradient(124deg,rgba(53,160,184,1.00) 30.57%,rgba(2,102,125,1.00) 100%);
}

#web .bg {
    top: 15rem;
}

#web:hover .bg {
    top: 12rem;
}

/*marketing*/
/*#marketing {
    background-color: var(--cz-0);
    color: var(--cz-10);
    height: 40rem;
    /* [disabled]max-width: 1500px; */
    /*flex-basis: initial;
}

#marketing .logo {
    width: 30%;
}

#marketing .bg {
    top: 15rem;
}

#marketing:hover .bg {
    top: 10rem;
}*/
#page #estacao h2 {
    font-size: 44pt;
    color: rgba(255,255,255,0.89);
    border: medium solid rgba(217,123,18,0.82);
}
#page #estacao h4 {
    font-size: 26pt;
    color: rgba(255,255,255,0.85);
    font-weight: lighter;
    margin-top: 49px;
}
#estacao h4 strong {
    font-weight: bolder;
}

#page #estacao h3 {
    font-weight: 700;
    font-size: 33pt;
    margin-top: 72px;
    margin-bottom: 40px;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    background-color: rgba(255,255,255,0.74);
    border-radius: 26px;
    color: rgba(165,45,46,1.00);
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
#page #mundocontemporaneo .blox {
    display: inline-block;
    width: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
article .contato h1 {
}









/*contato*/

/*medias and screen*/
/**tv is all**/
/**desktop**/
@media only screen and (max-width: 1200px) {}

/**laptop**/
@media only screen and (max-width: 1024px) {
    #home-nav>h1 {
        font-size: 2.7rem;
    }


    #home-nav>h2 {
        font-size: 1.5rem;
    }

    .card-dpm h1 {
        font-size: 2.9rem;
    }

    .card-dpm h2 {
        font-size: 1.5rem;
    }
.card-dpm {
    height: 26rem;
}
.card-dpm .bg {
    padding-top: 0px;
    margin-top: -255px;
}
.row #design .bg {
    margin-top: -101px;
}
section #marketing .bg {
    padding-top: 110px;


}


#marketing.card-dpm .bg {
    margin-top: -371px;


}



}

/**tablet**/
@media only screen and (max-width: 768px) {

    #design .logo {
        width: 50%;
    }
#home-nav section .row {
    flex-direction: column;
}
.card-dpm {
    flex-basis: initial;
    height: 40rem;
}



    #banner-home .bg {
        right: 0;
        left: auto;
        transform: translateY(-50%);
    }

    #banner-home .box-center h5 {
        font-size: var(--d-4);
    }

    #banner-home .box-bottom .list-pr figure img {
        width: 2rem;
    }

    #banner-home .box-bottom .list-pr figure figcaption {
        font-size: var(--d-2);
    }

    #banner-home .box-center {
        width: 90%;
        top: 40%;
    }

    #banner-home .box-bottom {
        width: 80%;
    }
.row #web .bg {
    margin-top: -70px;
}
#page #estacao h2 {
    font-size: 29pt;
}


}

/**mobile**/
@media only screen and (max-width: 570px) {
    #home-nav>h1 {
        font-size: 2.5rem;
    }
    .home-vit{
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .home-vit .bg {
        position: absolute;
        width: 250%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .home-vit h3{
        padding: 1rem;
    }
#page #estacao .logo {
    width: 250px;
}



}

/*micro-mobile*/
@media only screen and (max-width: 370px) {}