:root { --container-size: 1249px; }

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

li {list-style: none;}
a:hover {text-decoration: none;}

/*@Override*/
.container {max-width: var(--container-size)}

.pt-8 {padding-top: 2rem;}
.pt-15 {padding-top: 3.75rem;}
.pt-24 {padding-top: 6rem;}
.pt-32 {padding-top: 8rem;}
.pt-50 {padding-top: 12.5rem;}


.pb-18 {padding-bottom: 4.5rem;}
.pb-19 {padding-bottom: 4.75rem;}
.pb-23 {padding-bottom: 5.75rem;}
.pb-28 {padding-bottom: 7rem;}
.pb-40 {padding-bottom: 10rem;}

.pl-10 {padding-left: 2.5rem;}
.pl-15 {padding-left: 3.75rem;}
.pr-10 {padding-right: 2.5rem;}
.pr-15 {padding-right: 3.75rem;}

.mt-6 {margin-top: 1.5rem;}
.mt-7 {margin-top: 1.75rem;}
.mt-9 {margin-top: 2.25rem;}
.mt-10 {margin-top: 2.5rem;}
.mt-11 {margin-top: 2.75rem;}
.mt-12 {margin-top: 3rem;}
.mt-16 {margin-top: 4rem;}
.mt-17 {margin-top: 4.25rem;}
.mt-20 {margin-top: 5rem;}
.mt-24 {margin-top: 6rem;}
.mt-32 {margin-top: 8rem;}
.mt-40 {margin-top: 10rem;}

.mt-1-negative {margin-top: -1px;}


.mb-24 {margin-bottom: 6rem;}

.gap-1 {gap: 0.25rem;}
.gap-4 {gap: 1rem;}

.gap-2 {gap: 2px;}
.gap-6 {gap: 0.375rem;}
.gap-13 {gap: 0.813rem;}
.gap-24 {gap: 1.5rem;}

.line-h-75 {line-height: 75%;}
.line-h-120 {line-height: 120%;}
.line-h-130 {line-height: 130%;}

.max-w-617 {max-width: 38.563rem;}

.hr-line {
    width: 6.5rem;
    height: 0.125rem;
    background-color: #333333;
}

.bgHeader {
    background-image: url('../imagens/bgHeader.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.bgRocket {
    width: 100%;
    position: absolute;
    background-image: url('../imagens/bgHeaderRocketOnly.png');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.2s;
}

.bgCode {
    background-image: url('../imagens/bgCode.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.sidenav {
    position: absolute;
    max-width: 0px;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 50;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.95);
    transition: ease .3s;
}

.sidenav .links a {
    transition: ease 0.3s;
}

.sidenav .links a:hover {
    color: #FFF !important;
}

.sidenav.open {
    max-width: 1000px;
}

.sidenav .sidebar-content {
    opacity: 0;
    position:relative;
    transform: translateX(-2rem);
    transition: 0.4s ease;
}
.sidenav.open .sidebar-content {
    transform: translateX(0);
    opacity: 1;
}

.bg-opacity {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    opacity: 0;
    display: none;
    z-index: 3;
}

.bg-opacity.active {
    display: block;
}

.social-media-icon {
    width: 30px;
    filter: brightness(50);
}

.social-media {
    gap: 0.25rem;
} 

.social-media-icon:hover {
    filter: brightness(1);
    image-rendering: auto;
}

.social-media-footer img {
    width: 39px;
    filter: invert(51%) sepia(3%) saturate(415%) hue-rotate(187deg) brightness(110%) contrast(88%);
}
.social-media-footer img:hover {
    filter: brightness(1);
}

.top-navigation li a:hover {
    color: #2DFF8B !important;
    transition: all 0.3s;
}

.btn-contact-us {
    display: block;
    color: #FFF;
    text-align: left;
    font-family: 'creightonregular', serif;
}

.btn-lets-start:hover, .btn-know-solutions:hover, .btn-contact-us:hover {
    border-color: #2DFF8B !important;
    background: #2DFF8B !important;
    transition: all 0.3s;
    color: #000 !important;
}

.header-content {
    margin-top: 10rem;
    transition: ease 0.3s;
}

.btn-lets-start:hover > img{
    filter: brightness(0);
    transition: all 0.3s;
}

.btn-our-solutions:hover {
    border-color: #FFF;
    color: #000;
    background: #FFF;
    transition: all 0.3s;
}

.arrow-down-animated img {
    -webkit-animation: setaAnimada 1.3s infinite;
    -moz-animation: setaAnimada 1.3s infinite;
    -o-animation: setaAnimada 1.3s infinite;
    animation: setaAnimada 1.3s infinite;
}

.pointer-click-animated img {
    -webkit-animation: setaAnimada 1.3s infinite;
    -moz-animation: setaAnimada 1.3s infinite;
    -o-animation: setaAnimada 1.3s infinite;
    animation: setaAnimada 1.3s infinite;
    width: 50px;
    height: 50px;
}

@keyframes setaAnimada {
    0% {
        position: relative;
        top: 0;
    }
    50% {
        position: relative;
        top: 10px;
    }
    100% {
        position: relative;
        top: 0;
    }
}


.iframe-video {
    background-image: url('../imagens/thumbnail-agencia-tr1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -40px; 
    right: 0px; 
    width: 100%; 
    /* height: 100%;  */
    max-width: 581px; 
    height: 520px;
    overflow: hidden;
    z-index: 2;
}

.button-play-container .button-play {
    width: 60px; 
    height: 60px; 
    border-width: 4px !important; 
    transition: all 0.3s;
}
.button-play-container:hover > .button-play {
    transform: scale3d(1.1, 1.1, 1.1);
}

.rocket-hide {
    visibility: hidden;
    opacity: 0;
}

.footer span {
    font-size: 1rem;
    line-height: 130%;
}

.rocket {
    position: absolute;
    top: 162px;
    left: -19px;
}

.rocket-propulsion-left {
    position: absolute;
    bottom: -365px;
    left: 50px;
    z-index: -1;
}

.rocket-propulsion-right {
    position: absolute;
    bottom: -360px;
    left: 195px;
    z-index: -1;
}

.rocket-shake img, .rocket-propulsion-left-shake img, .rocket-propulsion-right-shake img {
    animation-timing-function: linear;
}

.rocket-shake img {
    animation-name: spaceboots;
    animation-duration: 1s;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.rocket-propulsion-left-shake img, .rocket-propulsion-right-shake img {
    animation-name: spaceboots;
    animation-duration: 0.8s;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.contacts div{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@keyframes spaceboots {
    0% {
        -webkit-transform: translate(2px,1px) rotate(0)
    }

    10% {
        -webkit-transform: translate(-1px,-2px) rotate(-1deg)
    }

    20% {
        -webkit-transform: translate(-3px,0) rotate(1deg)
    }

    30% {
        -webkit-transform: translate(0,2px) rotate(0)
    }

    40% {
        -webkit-transform: translate(1px,-1px) rotate(1deg)
    }

    50% {
        -webkit-transform: translate(-1px,2px) rotate(-1deg)
    }

    60% {
        -webkit-transform: translate(-3px,1px) rotate(0)
    }

    70% {
        -webkit-transform: translate(2px,1px) rotate(-1deg)
    }

    80% {
        -webkit-transform: translate(-1px,-1px) rotate(1deg)
    }

    90% {
        -webkit-transform: translate(2px,2px) rotate(0)
    }

    100% {
        -webkit-transform: translate(1px,-2px) rotate(-1deg)
    }
}

@media (max-width: 460px) {
    .resize-h2{
        font-size: 3.75rem !important;
    }
    .resize-h1 {
        font-size: 5.875rem !important;
    }
}

@media (max-width: 576px) {
    .header-content {
        margin-top: 5rem;
    }
}

@media (min-width: 992px) { 
    .col-lg-1-7 {
        -ms-flex: 0 0 14%;
        flex: 0 0 14%;
        max-width: 14%;
    }
}

@media  (max-width: 1080px) {
    .rocket, .rocket-propulsion-left, .rocket-propulsion-right {
        display: none;
    }
    .rocket-shake img, .rocket-propulsion-left-shake img, .rocket-propulsion-right-shake img {
        animation-play-state: paused;
    }
}

@media (max-width: 1225px) {
    .iframe-video {
        position: relative;
        top: 0px;
        margin-top: 3rem;
    }
    .iframe-video .embed-video {
        min-height: 210px;
    }
}