:root {
    /*     --color-primary:0,233,191; */
    --color-primary: 0, 255, 238;
    --color-secondary: 1, 2, 51;
    --color-tertiary: 0, 17, 85;
/*     --minSectionHeight: 100vh; */
}

@-webkit-keyframes rotateBg {
    from {
        -webkit-transform: rotate(0deg);
    }
    
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes updown {
    0% {
        -webkit-transform: translateY(0rem);
    }
    
    50% {
        -webkit-transform: translateY(1rem) scale(.8);
    }
    
    90% {
        -webkit-transform: translateY(0rem);
    }
}

@-webkit-keyframes fetching {
    0% {
        content:'Preparando Arquivos _ _ _';
    }
    
    25% {
        content:'Preparando Arquivos + _ _';
    }
    
    50% {
        content:'Preparando Arquivos + + _';
    }
    
    75% {
        content:'Preparando Arquivos + + +';
    }
}

html {
    transition: opacity .3s ease-out;
    font-family: 'Inter', sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    text-align: center;
    background-color: #f0f2f3;
    opacity: 1;
    color:#83989d;
    font-size:16px; /* 60px / 4 */
    overflow-x:hidden;
}

html.loading {
    opacity: 0;
}

html,
body {}

body {
    /*
     *   overflow-y:auto;
     *   overflow-x:hidden;*/
}
#content {
    display: inline-block;
    width: 100%;
/*     margin-top: var(--wh); */
    margin-top: 100vh;
    word-wrap: break-word;
    max-width:980px;
    position:relative;
    opacity:0;
}
#menu{
    
    overflow:hidden;
}
#content:after{
    content:' ';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    pointer-events:none;
    background-image: url("../img/ruller.svg");
    background-position: left 29px;
    background-size: 32px auto; /* 21,897 */
    background-repeat: repeat-y;
    z-index:1;
}
/*
subcontent{
    display:block;
    position:absolute;
    top:100vh;
    margin-top:41.2rem;
    width: 100%;
    max-width:980px;
}*/

#content > *{
/*     opacity:.5; */
}
.inside #content{
    margin-top:0;
    opacity:1 !important;
}
.inside topBar{
    transform:translateY(0) !important;
    opacity:1 !important;
}
.inside logo{
    translate:initial !important;
    top:0 !important;
}
.inside #ctahero{
    display:none;
}
section{
    display:inline-block;
    width:100%;
    padding-top:8rem !important;
    /*     min-height:var(--minSectionHeight); */
    min-height:calc(100vh / 4);
    /*     box-shadow: inset 0 0 0 .1rem #000; */
/*     background:rgba(0,255,0,.1); */
}
html:not(.inside) #content section:first-of-type{
    min-height:calc(80vh - 16rem) !important;
    padding-top:17.8rem !important;
}
emunit{
    display:inline-block;
    position:fixed;
    opacity:0;
    pointer-events:none;
    height:1em;
    aspect-ratio:1;
}
strong,
b {
    font-weight: bold;
}

i {
    font-style: italic;
}

u {
    text-decoration: underline;
}

p {
    line-height: 1.4rem;
}

a {}

a * {
    pointer-events: none;
}

center {
    text-align: center;
    display: block;
    max-width: 100%;
}

topBar {
    position: fixed;
    display: inline-block;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10000;
/*     background: #f2f4f5; */
    background: #f0f2f3;
    height: 4rem;
    transform: translateY(-100%);
    text-align:center;
}

topBar content {
    display:inline-block;
    width:100%;
    max-width:1024px;
    height:100%;
    background: #f0f2f3;
}

#close-menu, #open-menu, #whatsapp{
    display:inline-block;
    height:100%;
    aspect-ratio:1;
    background-repeat:no-repeat;
    background-position:50%;
    background-size:auto 40%;
    cursor:pointer;
}

#close-menu{
    float:left;
    background-image: url("../img/menu.svg");
    display:none;
    transform:translateX(-100%);
}

#open-menu{
    float:left;
    transform:translateX(-100%);
}
#open-menu:before{
    content:' ';
    display:inline-block;
    transition: transform .5s ease, background 0s linear .25s;
    background-repeat:no-repeat;
    background-size:38%;
    background-position:50%;
    background-image: url("../img/menu.svg");
    width:100%;
    height:100%;
    
}
.openedMenu #open-menu:before{
    transform:rotate(-540deg) !important;
    background-image: url("../img/menu-close.svg");
}

#whatsapp{
    float:right;
    background-image: url("../img/whatsapp.svg");
    background-size:auto 43%;
    transform:translateX(100%);
}

logo svg {
    height: 100%;
    width: auto;
    pointer-events:none;
}

logo {
    display: inline-block;
    height: 12rem;
    aspect-ratio: 1024 / 311;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%) scale(1);
    z-index: 10001;
    pointer-events: none;
}
/*
.inside logo,
.fixTopbar logo{
    
    pointer-events: none;
    cursor:pointer;
}*/

logoIcon {
    display: block;
    height: 100%;
    pointer-events:none;
}

logoText {
    pointer-events:none;
    display: block;
    height: 32%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
}

#logo-circle {
    transform-origin: center;
    animation: rotateBg 2s linear infinite;
}

#logoSlogan {
    transform: translate(0, 0)
}

#ctahero {
    transition: all .1s ease-out;
    display: block;
    height: 8rem;
    width: 10rem;
    background-image: url("../img/cta-hero.svg");
    background-position: center top;
    background-size: auto 200%;
    background-repeat: no-repeat;
    position: absolute;
    top: 75vh;
    left:50%;
    margin-left:-5rem;
    animation: updown 2s ease-out infinite;
    z-index: 10000000;
}
#ctahero:hover {
    top: 77vh;
}

.scrolled-down #ctahero {
    background-position: center bottom;
}

topBar,
logo {
    /*     transition: all .3s ease-out; */
}

.inside topBar:before ,
.fixTopbar topBar:before {
    content:' ';
    position:absolute;
    top:0;
    left:50%;
    width:100%;
    max-width:980px;
    display:inline-block;
    box-shadow: 0 0rem 2rem rgba(0, 0, 0, .1);
    z-index:-1;
    height:100%;
    transform:translateX(-50%);
    border-radius:100%;
}

.inside #ctahero ,
.fixTopbar #ctahero {
    opacity:0;
}

.inside #content ,
.fixTopbar #content {
    opacity:100%;
}

.inside topBar ,
.fixTopbar topBar {
    transform: translateY(0);
}

.inside logo ,
.fixTopbar logo {
    top: 0;
    transform: translate(-50%, -33.5%) scale(.3) !important;
    pointer-events: all;
    cursor:pointer;
}

.inside logoIcon ,
.fixTopbar logoIcon {
    transform: translateX(-44%) !important;
}

.inside logoText ,
.fixTopbar logoText {
    transform: translate(-20%, -205%) scale(1.9) !important;
}

.inside #logoSlogan ,
.fixTopbar #logoSlogan {
    transform: translate(-8.8%, -10px);
    !important;
}

.inside #close ,
.fixTopbar #close {
    transform:translateX(0%);
}

.inside #open-menu,
.fixTopbar #open-menu {
    transform:translateX(0%) !important;
}

.inside #whatsapp,
.fixTopbar #whatsapp {
    transform:translateX(0%) !important;
}

.inside #whatsapp ,
.fixTopbar #whatsapp {
    transform:translateX(0%);
}
#wh{
    position:fixed;
    font-size:2rem;
    right:0;
    bottom:0;
}

sections#menu{
    
}
section#blog a.more,
.title,
section#contact-info a,
section#blog posts a,
section#menu a{
    display:block;
    margin-top:2rem;
    height:2rem;
    line-height:2.23rem;
    transform:translateY(-.85rem);
    position:relative;
    font-size:1.2rem;
    letter-spacing:2px;
    white-space:nowrap;
    text-decoration:none;
}
section#blog a.more,
section#menu a{
    margin-top:1.76rem;
    z-index:2;
    transform:none;
    height:56px;
    line-height:56px;
}
section#menu a:before{
    outline:5px solid #f0f2f3 !important;
    z-index:2;
}
section#blog a span,
section#blog posts a span,
section#contact-info a,
section#menu a{
    color:#fc8585;
    background: #fc8585;
    background: linear-gradient(to bottom right, #fc8585 5%, #dd61d4 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight:500;
    text-transform:uppercase;
}
.title,
.text{
    color:#83989d;
}
.title span,
section#contact-info a span,
section#blog posts a span,
section#menu a span{
    display:inline-block;
    height:100%;
    width:10rem;
    text-align:left;
}
/*
#clients client:before,
#clients client:after,
#portfolio left:before,
#portfolio left:after,
.avatar:before,
.avatar:after,
.title:before,
section#contact-info a:before,
section#blog posts a:before,*/
section{
    position:relative;
}
/* section line, */
section#menu a:before{
    content:' ';
    display:inline-block;
    position:absolute;
    width:50%;
    height:.1rem;
    background:#d8dedf;
    top:50%;
    transform:translateY(-50%) translateY(.05rem) translateX(-120%);
    left:0%;
    outline:.3rem solid #f0f2f3;
    min-height:2px;
    z-index:1;
}
.scrolled-down section#menu a.menu_link_0:before{
    transition: transform .3s ease-out .1s;
}
.scrolled-down section#menu a.menu_link_1:before{
    transition: transform .3s ease-out .22s;
}
.scrolled-down section#menu a.menu_link_2:before{
    transition: transform .3s ease-out .3s;
}
.scrolled-down section#menu a.menu_link_3:before{
    transition: transform .3s ease-out .4s;
}
.scrolled-down section#menu a.menu_link_4:before{
    transition: transform .3s ease-out .5s;
}
.scrolled-down section#menu a.menu_link_5:before{
    transition: transform .3s ease-out .6s;
}
.scrolled-down section#menu a.menu_link_6:before{
    transition: transform .3s ease-out .7s;
}

.scrolled-up section#menu a.menu_link_0:before{
    transition: transform .3s ease-out .7s;
}
.scrolled-up section#menu a.menu_link_1:before{
    transition: transform .3s ease-out .6s;
}
.scrolled-up section#menu a.menu_link_2:before{
    transition: transform .3s ease-out .5s;
}
.scrolled-up section#menu a.menu_link_3:before{
    transition: transform .3s ease-out .4s;
}
.scrolled-up section#menu a.menu_link_4:before{
    transition: transform .3s ease-out .3s;
}
.scrolled-up section#menu a.menu_link_5:before{
    transition: transform .3s ease-out .2s;
}
.scrolled-up section#menu a.menu_link_6:before{
    transition: transform .3s ease-out .1s;
}
/*
section line{
    bottom:initial;
    top:-54px;
    left:initial;
    transform:translate(0%,0%);
    right:0;
}*/
.openedMenu section#menu a:before{
    transform:translateY(-50%) translateY(.05rem) translateX(-60%);
}

section#menu a:hover:before{
    transition: transform .3s ease-out 0s !important;
    transform:translateY(-50%) translateY(.05rem) translateX(-50%);
    background: linear-gradient(to bottom right, #F67084 5%, #e469c1 82%);
}
.title span{
    text-align:left;
    background:#f0f2f3;
/*     padding-left:1rem; */
    font-weight:500;
    text-transform:uppercase;
}
.text{
    display:block;
    padding:2rem 4rem;
    text-align:left;
    font-size:1rem;
    line-height:1.5rem;
}


.avatar{
    display:inline-block;
    width:calc(100% - 8rem);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left:4rem;
    margin-top:2.6rem;
    position:relative;
    z-index:1;
}
.avatar img{
    height:auto;
    width:100%;
}
thumbnail:before,
.avatar:before{
    content:' ';
    position:absolute;
    display:inline-block;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border:2px dashed #d8dedf;
    border-top:none;
    border-left:none;
    z-index:-1;
    transform:translate(.5rem, .5rem);
}
left{
/*     background:rgba(0,0,255,.1); */
}/*
.avatar:before{
    top:-1rem;
    width: 65%;
    max-width:13rem;
    left:-4rem;
    outline:.3rem solid #f0f2f3 !important;
}
.avatar:after{
    top:initial;
    bottom:-1.15rem;
    width: 95%;
    max-width:22rem;
    left:-4rem;
    outline:.3rem solid #f0f2f3 !important;
}*/

left{
    position:relative;
    text-align:left;
    display:block;
}

section > .title{
    text-align:left;
    padding-left:4rem;
}
section > .title:before{
    max-width: 6rem;
}

section#about{
    margin-top:54px;
}

#about .text{
    margin-top:1.5px;
/*     height:23.9rem; */
}

#about left{
    margin-top:.45rem;
/*     height:22rem; */
}

#clients{
/*     transform:translateY(1.5rem); */
    transform:translateY(20px);
    margin-top:0;
}

#clients left{
    margin-top:4.2rem;
}


#clients client{
    display:block;
    padding-left:4rem;
    height:8rem;
    margin-bottom:3rem;
    position:relative;
    cursor:pointer;
}

/*
#clients client:before{
    top:-0.11rem;
    bottom:initial;
    width:50%;
    max-width:400px;
}
#clients client:after{
    bottom:-0.11rem;
    top:initial;
    width:70%;updown
    max-width:500px;
}
section#clients client:hover:before{
    width: 70%;
    max-width:500px;
    background: linear-gradient(to bottom right, #F67084 5%, #e469c1 82%);
}
section#clients client:hover:after{
    width: 90%;
    max-width:600px;
    background: linear-gradient(to bottom right, #F67084 5%, #e469c1 82%);
}*/
#clients client *{
    pointer-events:none;
    user-select:none;
}

#clients avatar{
    display:inline-block;
    height:4rem !important;
    margin-top:1rem !important;
    aspect-ratio:1;
    border-radius:100%;
    box-shadow:0 0 0 2px #fff;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    float:left;
    position:relative;
    overflow:hidden;
}
#clients avatar img{
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%; 
  object-fit: cover; 
}
#clients playpause{
    display:inline-block;
    margin-top:1.8rem;
    margin-left:.8rem;
    float:left;
    height:2.5rem;
    aspect-ratio:1;
    background-image: url("../img/play-pause.svg");
    background-position: 0;
    background-size: 200% auto;
    background-repeat: no-repeat;
}
#clients client.playing playpause{
    background-position: 100%;
}
#clients client audio{
    display:none;
}
#clients audiobars{
    display:inline-block;
    height:4rem;
    margin-top:1rem;
    margin-left:-.5rem;
    aspect-ratio:318 / 117;
    position:relative;
}
#clients audiobars played{
    transition: .5s width linear;
    display:inline-block;
    position:absolute;
    top:5px;
    bottom:5px;
    right:15px;
    background:#83989d;
    max-width:85%;
}
#clients audiobars:before{
    content:' ';
    display:inline-block;
    position:absolute;
    top:5px;
    bottom:5px;
    right:5px;
    left:5px;
    background-image: url("../img/gradient.svg");
    background-position: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;/*
    outline:.3rem solid #f0f2f3;
    box-shadow:inset 0 0 0 5px #f0f2f3;*/
/*     opacity:0; */
}

#clients :not(.playing) audiobars played{
    width:90%;
}

#clients audiobars:after{
    content:' ';
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-image: url("../img/audio-bars.svg");
    background-position: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;/*
    outline:.3rem solid #f0f2f3;
    box-shadow:inset 0 0 0 5px #f0f2f3;*/
}
#clients clientname{
    display:block;
    height:1.2rem;
    line-height:1.2rem;
    font-size:.8rem;
    padding-left:5.4rem;
    position:relative;
    font-weight:500;
    margin-top:.5rem;
}
#clients clientname:before{
    content:' ';
    position:absolute;
    top:-.1rem;
    height:55%;
    width:2.8rem;
    border-left:2px dashed #d8dedf;
    border-bottom:2px dashed #d8dedf;
    left:2rem;
}

#clients clientname span{
    display:inline-block;
    background:#dfe4e5;
    padding:0 .3rem;
    border-radius:.2rem;
    font-size:.6rem;
    transform:translateY(-.05rem);
    color:#556366;
    text-transform:uppercase;
}

#creative{
    margin-top:9.3rem;
}

#creative problem,
#creative solution,
#creative process{
    padding:4rem 4rem;
    display:block;
    position:relative;
    text-align:left;
    font-size:1rem;
    line-height:1.5rem;
}
#creative > .title{
    margin-bottom:2rem;
}
#creative mockup,
#creative result,
#creative process,
#creative problem,
#creative solution{
    display:block;
    width:calc(100% - 8rem);
    padding:4rem !important;
    
}
#creative mockup bg,
#creative result bg,
#creative process bg,
#creative problem bg,
#creative solution bg{
    position:absolute;
    top:0;
    bottom:0;
    display:inline-block;
    z-index:-1;
    width:102vw;
    left:50%;
    transform:translateX(-50%);
}

#creative result{
    position:relative;
}
#creative mockup{
    margin-top:-.9rem;
}
#creative process bg{
    background:#a0b1b5;
}

#creative solution bg{
    background:#83989d;
}

#creative result bg{
    
}
#creative solution{
    color:#fff;
}
#creative problem .title,
#creative solution .title{
    color:inherit;
    margin-top:0rem;
}

#creative problem .title span,
#creative solution .title span{
    background:none;
    font-weight:500;
}

#creative problem .title:before,
#creative solution .title:before{
    transform: translateY(-50%) translateY(-0.05rem) translateX(-6rem);
    max-width:5.8rem;
    background:#fff;
    outline:none;
    box-shadow:0 .2rem 0 #83989d, 0 -.2rem 0 #83989d;
}

#creative problem .title:before{
    outline:none;
    box-shadow:none;
}

#creative process{
    display:block;
    text-align:center;
    padding-top:4rem;
    padding-bottom:4rem;
    position:relative;
}

#creative result{
    display:block;
    text-align:center;
    position:relative;
    padding-top:4rem;
    padding-bottom:4rem;
}

#creative mockup{
    display:block;
    text-align:center;
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#creative process img{
    width:100%;
    height:auto;
}

#creative result img{
    width:100%;
    height:auto;
}

#creative mockup{
    padding:0 !important;
    width:100% !important;
}

#creative mockup img{
    width:100%;
    height:auto;
}

section#portfolio{
    margin-top:8.55rem;
}

#contact-info descr,
#blog descr,
#portfolio descr{
    display:block;
    text-align:left;
    padding:0 4rem;
    height:8.2rem;
    margin-top:3rem;
    
}
section#contact-info{
    margin-top:7.8rem;
}
section#blog{
    margin-top:6.95rem;
}
#blog posts{
    display:block;
    padding-bottom:2rem;
}
#contact-info descr{
    padding-bottom:2rem;
}

#blog descr{
    height:15rem;
}
#blog descr i{
    font-weight:500;
    letter-spacing:1px;
    font-style:initial;
    display:block;
}
#blog descr b{
    font-weight:bold;
    display:block;
}
section#blog a.more,
section#contact-info a,
section#blog posts a{
    text-align:left;
    margin-top:0;
    margin-bottom:2rem;
    position:relative;
}
section#blog a.more:before,
section#contact-info a:before{
    content:' ';
    position:absolute;
    top:-2.6rem;
    height:3.6rem;
    width:3rem !important;
    border-left:2px dashed #d8dedf;
    border-bottom:2px dashed #d8dedf;
    left:4rem;
}

section#blog a.more:before{
    top:-1.6em;
}


section#blog a.more span,
section#contact-info a span,
section#blog posts a span{
    margin-left:8rem;
}

section#contact-info a span{
    width:auto;
}

section#blog posts a{
    position:relative;
    margin-bottom:2rem;
    white-space:initial;
    line-height:1.2rem;
    display:block !important;
    height:auto;
}

section#blog posts bg{
    position:relative;
    display:block;
    width:100%;
    overflow:hidden;
    background:#292f31;
    pointer-events:none;
    height:20rem;
}
.blog.title span{
    width:auto;
    font-weight:bold;
}
.blog-post > img{
    width:100%;
    height:auto;
    margin-top:1rem;
}
.blog.title{
    white-space:initial;
    letter-spacing:0px;
    height:auto;
}
.blog-post .text{
    text-align:left;
    margin-top:1rem;
    margin-bottom:3rem;
}
section#blog posts bg img{
    transition: opacity .3s ease-out;
    opacity:1;
    pointer-events:none;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%; 
    object-fit: cover; 
}
section#blog posts bg{
    overflow:hidden;
}
section#blog posts a:hover bg img{
    opacity:.7;
}
section#blog posts a span{
    margin-left:3rem;
    margin-right:1rem;
    padding-top:1rem;
    position:relative;
    width:auto;
    line-height:1.25rem;
    pointer-events:none;
}
section#blog posts a:before{
    width:.5rem !important;
}

section#contact-info a:before,
section#blog posts a:before{
    width:7rem;
}

section#contact-info a:hover:before,
section#blog posts a:hover:before{
    width: 8rem;
}

#portfolio cname{
    display:block;
    margin-left:4rem;
    padding-top:1rem;
    font-size:.8rem;
    height:1rem;
    line-height:1rem;
    margin-top:.8rem;
    border-top:2px dashed #d8dedf;
    margin-right:2.5rem;
}

#portfolio cmkt{
    display:block;
    font-size:.7rem;
    font-weight:bold;
    letter-spacing:1px;
    padding-left:4rem;
    height:1rem;
    line-height:1rem;
}
#portfolio{

}
thumbnail,
#portfolio img{
    display:inline-block;
    height:18rem;
    aspect-ratio:1;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    position:relative;
}
#portfolio img{
    pointer-events:none;
}
thumbnail{
    margin-left:4rem;
    margin-top:2rem;
}
.logo thumbnail{
    position:relative;
    overflow:hidden;
    border-top:none;
    border-left:none;
    border-radius:.5rem;
}
.logo thumbnail img{
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 80%;
  height: 80%;
  transform:translate(-50%,-50%);
  object-fit: contain; 
}
#portfolio left{
    height:24.1rem !important;
    margin-bottom:1.9rem;
    margin-top:1rem;
}
#portfolio left:before{
    top:-.05rem;
    width:25rem;
}
#portfolio left:after{
    top:initial;
    bottom:0;
}
#pro thumbnail{
    width: calc(100%  - 8rem);
    text-align:left;
    aspect-ratio:initial;
    height:auto;
}
#pro thumbnail img{
    width: 100%;
    height:auto;
}


#menu,
#about,
#clients,
#creative,
#portfolio,
#contact-info,
#blog
{
    background:none;
}















footer{
    height:13rem;
    display:block;
    background-image: url("../img/the-end.svg");
    background-position: center top;
    background-size: auto 80%;
    background-repeat: no-repeat;
    margin-bottom:4rem;
    position:relative;
    margin-top:8rem;
}

cpr{
    font-size:.9rem;
    position:absolute;
    bottom:-1rem;
    line-height:2rem;
    left:0;
    right:0;
    display:inline-block;
}
.inside section{
    margin-top:0 !important;
}

#client-avatar{
    display:inline-block;
    height:5rem;
    width:5rem;
    background-color:#f0f2f3;
    background-image: url("../img/user.svg");
    background-size:50% auto;
    background-position:50%;
    background-repeat:no-repeat;
    transform:translateY(-.7rem);
    border-radius:100%;
    box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #91a3a8;
}

#client-system{
    text-align:left;
}

#client-system info{
    display:block;
    margin:0 4rem;
    margin-top:-1rem;
}

#client-system info h1{
    font-size:1.4rem;
    font-weight:bold;
    display:block;
}

#client-system info h2{
    font-size:1.2rem;
}

.info-block{
    display:inline-block;
    width:calc(100% - 1rem);
    margin:.5rem;
    aspect-ratio:2/1;
    border-radius:1rem;
    color:#fff;
    position:relative;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
    box-shadow:0 0 0 .1rem #fff;
}

.info-block b{
    font-size:.65rem;
    display:block;
    position:absolute;
    left:.5rem;
    bottom:.5rem;
    right:.5rem;
}

.info-block b small{
    font-size:.8rem;
    display:block;
}
.info-block span{
    position:absolute;
    display:inline-block;
    top:2rem;
    right:.5rem;
    left:.5rem;
    text-align:right;
    font-size:6rem;
    line-height:2rem;
}

mobileCenter{
    text-align:center;
    margin-bottom:2rem;
    margin-top:2rem;
    display:block;
}

.info-block.projects{
    background:#83989d;
}

.info-block.projects-done{
    background:#86c3e5;
}

.info-block.projects-doing{
    background:#fc8485;
}

#client-system project{
    display:block;
    background:#fff;
    margin-left:-1rem;
    margin-right:-1rem;
    border-radius:.5rem;
    box-shadow:0 0 0 2px #fff, 0 .3rem 2rem -1rem #83989d;
    margin-top:1rem;
    position:relative;
/*     overflow:hidden; */
}

#client-system project strong{
    display:block;
    height:3rem;
    line-height:3rem;
    padding:0 1rem;
}
#client-system project strong.ideas{
    border-top:1px dashed #d8dedf;
    background-color: #f5f7f8;
}
#client-system project strong svg{
    fill:inherit;
    height:1.2rem;
    width:auto;
    position:absolute;
    right:1rem;
    top:.9rem;
    opacity:.5;
    pointer-events:none;
}
#client-system project.collapse:hover strong svg{
    opacity:1;
}
#client-system project:not(.collapse) strong svg{
    transform:scale(1,-1);
}
#client-system project header > strong:first-of-type{
    border-radius:.5rem;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    cursor:pointer;
    pointer-events:none;
}
pinfo{
    display:block;
}
#client-system project.collapse pinfo{
    display:none;
}
#client-system project.collapse p:first-of-type{
    border-radius:.5rem;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
#client-system project p:first-of-type{
    pointer-events:none;
}
#client-system project header{
    cursor:pointer;
}

#client-system project p{
    font-size:.8rem;
    line-height:1.1rem;
    padding:0 1rem;
    padding-bottom:1rem;
    cursor:pointer;
}

#client-system project payed,
#client-system project created,
#client-system project delivered,
#client-system project files,
#client-system project price{
    display:block;
    text-align:right;
    height:3rem;
    line-height:3rem;
    font-size:.9rem;
    border-top:1px dashed #d8dedf;
    padding:0 1rem;
}

#client-system project files{
    text-align:left;
    display:block;
    height:auto;
}
#client-system project fileslist{
    display:block;
}
#client-system project files hr:last-of-type{
    display:none;
}
#client-system jobfile{
    display:inline-block;
    width:100%;
    margin-top:.3rem;
}
#client-system jobfile:not(:first-of-type){
    margin-left:1.2rem;
}
#client-system jobfile filethumb{
    display:inline-block;
    width:100%;
    aspect-ratio:1;
    background-color:#f0f2f3;
    border-radius:1rem;
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.05), 0 .1rem 1rem -.5rem #83989d;
    overflow:hidden;
    position:relative;
}
#client-system jobfile filethumb thumb{
    display:inline-block;
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    width:100%;
    height:calc(100% - 2rem);
}
#client-system jobfile filename{
    display:block;
    font-size:.85rem;
    text-align:center;
    line-height:1rem;
    font-weight:500;
    margin-top:-.5rem;
}
#client-system jobfile filetype{
    overflow:hidden;
    height:2rem;
    line-height:2rem;
    text-align:center;
    width:33.33333333333333333333333%;
    display:inline-block;
    font-size:.8rem;
    background:#f7f9fa;
    position:absolute;
    bottom:0;
    left:0;
    border-top:1px solid #fff;
}
#client-system jobfile filesize{
    overflow:hidden;
    height:2rem;
    line-height:2rem;
    text-align:center;
    width:33.33333333333333333333333%;
    display:inline-block;
    font-size:.8rem;
    background:#f7f9fa;
    bottom:0;
    left:50%;
    position:absolute;
    transform:translateX(-50%);
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    border-top:1px solid #fff;
    z-index:1;
}
#client-system jobfile download{
    overflow:hidden;
    height:2rem;
    line-height:2rem;
    width:33.33333333333333333333333%;
    display:inline-block;
    background-repeat:no-repeat;
    background-size:auto 50%;
    background-position:50%;
    background-image: url("../img/down.svg");
    background-color:#f7f9fa;
    position:absolute;
    bottom:0;
    right:0;
    border-top:1px solid #fff;
    cursor:pointer;
}
#client-system jobfile download:hover{
    background-color:#f2f4f5;
}
#client-system jobfile download:active{
    background-color:#edeff0;
}
#client-system project files strong{
    padding:0;
}
#client-system project files strong.top-header{
    border-bottom:1px dashed #d8dedf;
    margin-left:-1rem;
    margin-right:-1rem;
    padding:0 1rem;
    text-transform:uppercase;
    background-color:#f5f7f8;
}
.btn,
#client-system project files strong a{
    display:inline-block;
    height:2.1rem;
    line-height:2.1rem;
    transform:translateY(.45rem);
    padding:0 .5rem;
    border-radius:.5rem;
    background:#fff;
    cursor:pointer;
    border:1px solid #fff;
    text-decoration:none;
    color:inherit;
    font-weight:bold;
}
#client-system project files strong a{
    float:right;
}
#client-system project .thumb{
    display:inline-block;
    height:4rem;
    width:4rem;
    background-image: url("../img/image.svg");
    background-size:50% auto;
    background-position:50%;
    background-repeat:no-repeat;
    float:left;
    margin-left:1rem;
    margin-right:1rem;
    margin-bottom:1rem;
    transform:translateY(.55rem);
}
hr{
    border-top:1px dashed #d8dedf;
    margin-left:-1rem;
    margin-right:-1rem;
}
.btn,
#client-system project files strong.top-header a{
    border:1px solid #d8dedf;
    box-shadow:1px 1px 2px rgba(0,0,0,.1);
}
.btn:hover,
#client-system project files strong a:hover{
    box-shadow:1px 1px 3px rgba(0,0,0,.2);
    border:1px solid #c5cacb;
}
.download-all{
    padding-left:.15rem !important;
}
.download-all.just-icon{
    padding-right:.15rem !important;
}
.download-all:before{
    content:' ';
    display:inline-block;
    background-repeat:no-repeat;
    background-size:auto 50%;
    background-position:50%;
    background-image: url("../img/down.svg");
    height:100%;
    aspect-ratio:1;
    float:left;
}
#client-system project price.total{
    background:#f3feff;
}
#client-system project price.payed{
    background:#f3fff3;
}
#client-system project price.tobe-payed{
    background:#fffef3;
}
/*
#client-system project payed:hover,
#client-system project created:hover,
#client-system project delivered:hover,
#client-system project price:hover{
    background:#f5fcfd;
}*/
#client-system project payed b,
#client-system project created b,
#client-system project delivered b,
#client-system project price b{
    float:left;
    position:relative;
}/*
#client-system project created b:before,
#client-system project delivered b:before{
    content:' ';
    width:1rem;
    height:1rem;
    background-repeat:no-repeat;
    background-position:50%;
    background-size:auto 90%;
    background-image: url("../img/calendar.svg");
    display:inline-block;
    margin-right:.2rem;
    transform:translateY(.15rem);
}*/
deliveredidea{
    text-align:center;
    display:block;
    padding:1rem;
    min-height:10rem;
    border-top:1px dashed #d8dedf;
}
deliveredidea.accepted dltitle:before{
    content:'APROVADA';
    background:#f3fff3;
    padding:.1rem .25rem;
    border-radius:5px;
    border:2px solid #a6d9a6;
    color:#6ca56c;
    margin-right:.5rem;
    font-size:.85rem;
}
deliveredidea.rejected{
    background:#e8eeef;
    display:none;
}/*
deliveredidea.rejected > *{
    opacity:.5;
}*/
.dlthumb{
    width:100%;
    display:inline-block;
    aspect-ratio:1;
    background-repeat:no-repeat;
    background-position:50%;
    background-size:cover;
    margin-right:1rem;
    border-radius:1rem;
    box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.05), 0 .1rem 1rem -.5rem #83989d;
}
.big-thumb{
    display:block;
    margin-top:2rem;
}
.big-thumb img{
    width:calc(100% + 3rem);
    height:auto;
    margin-left:-1.5rem;
    box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.05), 0 .1rem 1rem #83989d;
}
.back-to-profile{
    height:3rem !important;
    width:3rem !important;
    transform:translate(.5rem,.5rem) !important;
    float:left;
}
dltitle{
    font-weight:bold;
    display:block;
    margin-top:.5rem;
    margin-bottom:.5rem;
    text-align:center;
    line-height:1.3rem;
}

dltext{
    display:block;
    margin-top:1.2rem;
}

.fetchingFiles:before{
    content:' ';
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.1);
    z-index:1000;
    -webkit-backdrop-filter:blur(1rem);
    backdrop-filter:blur(1rem);
}
.fetchingFiles:after{
    content:'Preparando Arquivos _ _ _';
    display:inline-block;
    position:fixed;
    top:50%;
    left:0%;
    right:0%;
    z-index:1001;
    text-align:center;
    transform:translateY(-50%);
    animation: fetching 2s linear infinite;
    font-weight:bold;
    font-family:monospace;
    color:#111;
}
.fetchingFiles #content{
    opacity:.5 !important;
}

@media screen and (orientation: portrait) {
    
    .no-animation,
    .no-animation * {
        -webkit-animation: none !important;
        animation: none !important;
    }
}

@media screen and (min-height: 1200px) {/*
    #clients {
        margin-top:calc(8rem + 6px);
    }
    #clients client:before{
        top:calc(-0.11rem + 1px);
    }*/
}

@media screen and (orientation:landscape),
screen and (min-width: 980px) {/*
    ctahero {
        top: 76vh;
    }
    *//*
    #creative process img{
        width:80%;
        height:auto;
    }*/
    client,
    .logo{
        display:inline-block !important;
        margin-left:2rem;
        margin-right:2rem;
    }
    #clients left{
        text-align:center;
    }
    client{
        margin-left:4rem;
        margin-right:0rem;
        padding-left:1rem !important;
        text-align:left;
    }
    #creative problem,
    #creative solution,
    #creative process{
        width:calc(100% - 8rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #creative problem info,
    #creative solution info{
        padding-left:15rem;
    }
    #creative process{
        height:10rem;
    }
    #about .text{
        height:10rem;
    }
    section#portfolio{
        margin-top:8.9rem;
    }
    #portfolio cname{
        margin-right:0rem;
    }
    mobileCenter{
        text-align:left;
    }
    
    #client-system project{
        margin-left:0;
        margin-right:0;
    }
    
    
    #client-system project price{
        width:calc(33.33333333333333333333% - 2rem);
        display:inline-block;
    }
    #client-system project price.payed{
        width:calc(calc(33.33333333333333333333% - 2rem) - 2px);
        border-left:1px dashed #d8dedf;
        border-right:1px dashed #d8dedf;
    }
    
    #client-system project created,
    #client-system project delivered{
        display:inline-block;
        width:calc(50% - 2rem);
    }
    
    #client-system project created{
        width:calc(calc(50% - 2rem) - 1px);
        border-right:1px dashed #d8dedf;
    }
    
    .info-block{
        width:calc(33.3333333333333% - 1rem);
        aspect-ratio:2/1;
    }
    .info-block span{
        top:0;
        font-size: 5.5vw;
        text-align:center;
        font-size:5rem;
        line-height:6rem;
    }
    
    #client-system jobfile{
        max-width:10rem;
    }
    #client-avatar{
        float:left;
        margin-left:.5rem;
        margin-right:1.35rem;
    }
    .dlthumb{
        width:10rem;
        float:left;
    }
    deliveredidea{
        text-align:left;
    }
    dltitle{
        text-align:left
    }
}

.hideit {
    display: none;
}


.sun-editor b,
.sun-editor strong {
    font-weight: bold;
}

.sun-editor em {
    font-style: italic;
}

.sun-editor ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.sun-editor ul li {
    display: list-item;
    text-align: -webkit-match-parent;
    list-style-type: disc;
}

.sun-editor ol li {
    display: list-item;
    text-align: -webkit-match-parent;
    list-style-type: decimal;
}

.sun-editor a {
    color: rgb(var(--color-primary));
    text-decoration: underline;
}