.logo-width{
    box-sizing: content-box;
    width: 100%;
}
body{
    padding-top:56px
}
.video-res{
    position:relative;
    height:300px;
    width:100%
}
.bg-white{
    background-color:rgba(255,255,255,.9)!important
}
.bg-yellow{
    background-color:rgba(255,202,40,.9)!important
}
.bg-grey{
    background-color:#4f5355!important
}
.service .service-element,.service .service-info,.service .service-info-50{
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:.3s;
    transition-property:all;
    transition-timing-function:cubic-bezier(.7,1,.7,1)
}
.service:hover .service-element{
    opacity:0;
    -webkit-transform:translate3d(0,-50%,0);
    -moz-transform:translate3d(0,-50%,0);
    transform:translate3d(0,-50%,0);
    transition-duration:.2s;
    transition-property:all;
    transition-timing-function:cubic-bezier(.7,1,.7,1)
}
.service:hover .service-info{
    -webkit-transform:translate3d(0,-15%,0);
    -moz-transform:translate3d(0,-15%,0);
    transform:translate3d(0,-15%,0);
    transition-duration:.3s;
    transition-property:all;
    transition-timing-function:cubic-bezier(.7,1,.7,1)
}
.service:hover .service-info-50{
    -webkit-transform:translate3d(0,-50%,0);
    -moz-transform:translate3d(0,-50%,0);
    transform:translate3d(0,-50%,0);
    transition-duration:.3s;
    transition-property:all;
    transition-timing-function:cubic-bezier(.7,1,.7,1)
}
.thumbnail{
    transition:transform .5s
}
.thumbnail:hover{
    transform:scale(.95)
}
.shadow{
    -moz-box-shadow:3px 3px 4px #ccc;
    -webkit-box-shadow:3px 3px 4px #ccc;
    box-shadow:3px 3px 4px #ccc;
    transition:transform .5s
}
.boxes{
    --size:32px;
    --duration:800ms;
    height:calc(var(--size) * 2);
    width:calc(var(--size) * 3);
    position:relative;
    transform-style:preserve-3d;
    transform-origin:50% 50%;
    margin-top:calc(var(--size) * 1.5 * -1);
    transform:rotateX(60deg) rotateZ(45deg) rotateY(0) translateZ(0)
}
.boxes .box{
    width:var(--size);
    height:var(--size);
    top:0;
    left:0;
    position:absolute;
    transform-style:preserve-3d
}
.boxes .box:nth-child(1){
    transform:translate(100%,0);
    animation:box1 var(--duration) linear infinite
}
.boxes .box:nth-child(2){
    transform:translate(0,100%);
    animation:box2 var(--duration) linear infinite
}
.boxes .box:nth-child(3){
    transform:translate(100%,100%);
    animation:box3 var(--duration) linear infinite
}
.boxes .box:nth-child(4){
    transform:translate(200%,0);
    animation:box4 var(--duration) linear infinite
}
.boxes .box>div{
    --background:rgba(255, 202, 40, 0.6);
    --top:auto;
    --right:auto;
    --bottom:auto;
    --left:auto;
    --translateZ:calc(var(--size) / 2);
    --rotateY:0deg;
    --rotateX:0deg;
    position:absolute;
    width:100%;
    height:100%;
    background:var(--background);
    top:var(--top);
    right:var(--right);
    bottom:var(--bottom);
    left:var(--left);
    transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ))
}
.boxes .box>div:nth-child(1){
    --top:0;
    --left:0
}
.boxes .box>div:nth-child(2){
    --background:rgba(255, 202, 40, 0.8);
    --right:0;
    --rotateY:90deg
}
.boxes .box>div:nth-child(3){
    --background:rgba(255, 202, 40, 0.7);
    --rotateX:-90deg
}
.boxes .box>div:nth-child(4){
    --background:#DBE3F4;
    --top:0;
    --left:0;
    --translateZ:calc(var(--size) * 3 * -1)
}
@keyframes box1{
    0%,50%{
        transform:translate(100%,0)
    }
    100%{
        transform:translate(200%,0)
    }
}
@keyframes box2{
    0%{
        transform:translate(0,100%)
    }
    50%{
        transform:translate(0,0)
    }
    100%{
        transform:translate(100%,0)
    }
}
@keyframes box3{
    0%,50%{
        transform:translate(100%,100%)
    }
    100%{
        transform:translate(0,100%)
    }
}
@keyframes box4{
    0%{
        transform:translate(200%,0)
    }
    50%{
        transform:translate(200%,100%)
    }
    100%{
        transform:translate(100%,100%)
    }
}
html{
    -webkit-font-smoothing:antialiased
}
*{
    box-sizing:border-box
}
:after,:before{
    box-sizing:border-box
}
body{
    min-height:100vh;
    font-family:Roboto,Arial;
    color:#adafb6;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f9fbff
}
body .dribbble{
    position:fixed;
    display:block;
    right:20px;
    bottom:20px
}
body .dribbble img{
    display:block;
    height:28px
}
#snarl-wrapper{
    margin-top:106px!important
}
.material-icons.md-18{
    font-size:18px
}
.material-icons.md-24{
    font-size:24px
}
.material-icons.md-36{
    font-size:36px
}
.material-icons.md-48{
    font-size:48px
}
.material-icons.md-dark{
    color:rgba(0,0,0,.54)
}
.material-icons.md-dark.md-inactive{
    color:rgba(0,0,0,.26)
}
.material-icons.md-light{
    color:#4b4b4b
}
.material-icons.md-light.md-inactive{
    color:rgba(255,255,255,.3)
}
.change:hover{
    color:rgba(255,255,255,1)
}

.card-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.card.open .card-body {
    max-height: 500px; /* Adjust this value based on your content length */
}

.card.open .card-body {
    max-height: 500px; /* Adjust this value based on your content length */
}

.balloon {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    border-radius: 5px;
    z-index: 999;
}

.card.open .balloon {
    display: block;
}

.software-cards-container {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    row-gap: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(100% - 100px);
    margin: 50px;
} 

.software-card {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: calc(33.33% - 10px);
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: transform .5s;

    .material-icons {
        width: 36px;
    }
}

.software-card:hover {
    transform: scale(.95);
}

@media (max-width: 768px) {
    .software-card {
      width: 100%;
    }
}

.software-card-content {
    display: none;
    background-color: white;
    padding: 10px;
    border: 1px solid white;
    margin: 5px;
    position: relative;
    box-sizing: border-box;

    p {
        margin: 0;
    }
}

.software-card-content.mobile {
    display: none;

    @media (max-width: 768px) {
        display: flex;
    }
}

.software-card-content.desktop {
    display: flex;

    @media (max-width: 768px) {
        display: none;
    }
}

.software-card-content.arrow-top {
    margin-top: 10px;
}

.software-card-content.arrow-top:after {
    content: " ";
    position: absolute;
    left: 30px;
    top: -15px;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid white;
}

.software-card-content.arrow-top-1:after {
    left: 30px;
}

.software-card-content.arrow-top-2:after {
    left: calc(50% - 30px);
}

.software-card-content.arrow-top-3:after {
    left: calc(75% - 30px);
}

@media (max-width: 768px) {
    .software-card-content.arrow-top-1:after {
        left: 30px;
    }
    
    .software-card-content.arrow-top-2:after {
        left: 30px;
    }
    
    .software-card-content.arrow-top-3:after {
        left: 30px;
    }
}

.logos-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 50px;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;

    .logo-img {
        height: 100px;
    }

    @media (max-width: 768px) {
        flex-direction: column;
        row-gap: 50px;
    }
}

.app-img {
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.main-img {
    width: 100%;
    margin-top: -100px;

    @media (max-width: 768px) {
        margin-top: 0;
    }
}

.nav-item.last-item {
    margin-right: 25px;
}

.navbar-toggler {
    margin-right: 25px;
}

.navbar-collapse {
    margin: 0 30px;
}

.navbar-nav {
    margin-left: auto;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}
  
.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}
  
.tabcontent {
    display: none;
    padding: 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.img-flag {
    width: 20px;
    margin-right: 10px;
}

.contacts-container {
    margin: 50px 0;
}

.contact-wrapper {
    display: flex;
    flex-direction: row;
    column-gap: 100px;

    @media (max-width: 768px) {
        flex-direction: column;
        row-gap: 12px;
    }
}

.contact-wrapper-3columns {
    column-gap: 50px;
    margin-bottom: 12px;
    flex-wrap: wrap;

    @media (max-width: 1199) {
        .flex-item {
            flex: 1;
            box-sizing: border-box;
        }
    
        .flex-item.third {
            flex-basis: 100%;
        }
    }
    
}

.td-name {
    width: 250px;
}

@media (max-width: 991px) {
    #detalhes tbody tr {
      display: block;
      margin-bottom: 20px;
    }

    #detalhes tbody td {
      display: block;
    }

    #detalhes tbody td:before {
      content: attr(data-label);
      font-weight: bold;
      margin-right: 10px;
      display: inline-block;
    }

    .td-name {
        width: 100%;
    }

    .td-hide {
        display: none !important;
    }

    .contact-address-1 {
        max-width: 100%;
    }
}

.contact-address-1 {
    max-width: 210px;
}

.contact-address-2 {
    max-width: 222px;
}

.contact-address-3 {
    margin-bottom: 12px;
}

.exe-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .btn {
        margin-top: 25px;
        width: 300px;
        transition: transform .5s;
    }

    .btn:hover {
        transform: scale(.95);
    }
}

.img-button-anydesk {
    width: 100%;
}

#more {
    display: none;
}

.read-more-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.read-more-button {
    cursor: pointer;
    color: black;
    text-decoration: underline;
    display: inline-block;
    margin-top: 5px;
}

.contacts-title {
    margin-bottom: 24px;
}

.contact-disclaimer {
    font-size: 12px;
}

.container-reasons {
    max-width: 100%;
}

.icons-container {
    display: flex;
    flex-direction: row;
    column-gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 35px;

    .item {
        display: flex;
        flex-direction: row;
        column-gap: 20px;

        h2, p {
            margin: 0;
        }
    }

    .column-1, .column-2 {
        display: flex;
        flex-direction: column;
        row-gap: 18px;
    }

    .column-1 {
        justify-content: end;
        align-items: end;

        h5 {
            margin: 0;
        }
    }

    .column-2 {
        justify-content: start;
        border-left: 4px solid rgba(255,202,40,.9);
        padding-left: 15px;

        p {
            margin: 0;
        }
    }
}

.icons-container.mobile {
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 15px;

    .item {
        display: flex;
        flex-direction: column;
        row-gap: 4px;
    }

    .item.separator {
        width: 50px;
        height: 4px;
        background-color: rgba(255,202,40,.9);
    }

    @media (max-width: 991px) {
        display: flex;
    }
}

.icons-container.desktop {
    display: flex;

    @media (max-width: 991px) {
        display: none;
    }
}