/*
* @project: SANX CENTER
* @description: Painel central de administração
* @author: Diego Sanches
* @version: 0.0.0
* @date_create: 2025-02-12 : 21h53
* @date_update: 2025-02-12 : 21h53
*/

* { font-family: "Roboto", sans-serif; }

html, body {
    overflow: hidden;
}

form {
    display: block;
    position: relative;
}
form .message-form {
    display: block !important;
    width: 100%;
    position: absolute;
    bottom: 15px;
}


@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}





























    #viewportFullscreen {
        background-color: #FFF;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1;
        overflow: hidden;
    }
        #scroll {
            width: 100%;
            min-height: 100%;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }




.input-message-help {
    font-size: 9px;
    font-weight: 400;
    color:  #FF0000;
    letter-spacing: 1px;
    text-transform: lowercase;
    position: absolute;
    left: 0;
    bottom: -10px;

}
.select-wrapper .input-message-help {
    bottom: -18px;
}
.is-textarea .input-message-help {
    bottom: -3px;
}

.container {
    width: 90%;
    max-width: 1500px;
}

@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}














#_modal_accepted_terms_cookies {

    background-color: #000;

    width: 300px;
    padding: 25px 10px;
    border-radius: 10px;

    position: fixed;
    left: 15px;
    bottom: 15px;
    z-index: 99;

    opacity: 0;

    transform: translateY( 50vh );
    transition-delay: 0.5s;
    transition-duration: 0.8s;

}
#_modal_accepted_terms_cookies::before {
    content: '';
    background-color: rgba( 0, 0, 0, 0.7 );
    width: calc( 200vw + 30px );
    height: calc( 200vh + 30px );
    position: fixed;
    bottom: -20px;
    left: -20px;
    z-index: 0;
}




#_modal_accepted_terms_cookies .input-message-help {
    bottom: -32px;
}
#_modal_accepted_terms_cookies .row {
    padding: 0;
    margin: 0 0 15px 0;
    position: relative;
}
#_modal_accepted_terms_cookies .row p {
    font-size: 13px;
    font-weight: 700;
    color: #444;
    letter-spacing: 1px;
    line-height: 14px;
}


#form_modal_accepted_terms_cookies {
    position: relative;
}


#_modal_accepted_terms_cookies .is-submit-form {
    height: 35px !important;
    line-height: 35px !important;
    padding: 0;
}
#_modal_accepted_terms_cookies .is-submit-form span {
    padding: 0 !important;
    margin: 0;
}









#_modal_preview_website {
    display: none;
    position: fixed;
    left: calc( 50% - 127px );
    bottom: 15px;
    z-index: 99;
    background-color: rgba( 0, 0 ,0, 0.3 );
    padding: 5px !important;
    border-radius: 10px;
    width: 250px;
    transform: scale( 1 ) translate( 0, 0 );
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.is-scrolling #_modal_preview_website {
    transform: scale( 0.5 ) translate( 0, 75px ) !important;
    box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.4 ) !important;
}

#_modal_preview_website:hover,
#_modal_preview_website:active {
    transform: scale( 1 ) translate( 0, -15px ) !important;
}

#_modal_preview_website .container {
    background-color: #FFF;
    width: 100%;
    padding: 5px;
    margin: 0 !important;
    border-radius: 5px;
}
#_modal_preview_website figure {
    display: block;
    width: 230px;
    height: 109px;
    padding: 0;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
}
#_modal_preview_website figure img {
    display: block;
    width: 230px;
    height: auto;
}
#_modal_preview_website form {
    padding: 0;
    margin: 0;
}
#_modal_preview_website form .row {
    padding: 0;
    margin: 0;
}

#_modal_preview_website .is-submit-form {
    width: 100%;
    height: auto;
    max-height: none;
}
#_modal_preview_website .is-submit-form span {
    color: #FFF;
    font-weight: 900;
    font-size: 11px;
    font-family: 'Roboto Mono', serif;
    letter-spacing: 2px;
    display: block;
    padding: 3px 5px;
}






.menu-hamburguer {
    width: 25px;
    height: 30px;
    position: absolute;
    top: 63px;
    right: 0;
    z-index: 2;
}
.is-scrolling .menu-hamburguer {
    top: 30px;
}
.is-scrolling-footer .menu-hamburguer {
    top: 70px;
}
.is-menu-opened .menu-hamburguer {
    width: 55px;
    top: 63px;
}

    .menu-hamburguer span {
        background-color: #FFF;
        font-size: 13px;
        font-weight: 900;
        text-align: center;
        text-indent: 100px;
        color: #000;
        display: block;
        width: 100%;
        height: 2px;
        line-height: 15px;
        margin-bottom: 6px;
        border-radius: 0;
        opacity: 1;
        overflow: hidden;
        transform: translateX( 0 );
        transition-delay: 0.5s !important;
        transition-duration: 1.5s !important;
    }
    .is-scrolling .menu-hamburguer span {
        /*background-color: #000;*/
        /*color: #FFF;*/
        /*height: 3px;*/
        /*transition-delay: 0.1s !important;*/
        /*transition-duration: 0.5s !important;*/
    }
    .loading .menu-hamburguer span.one {
        transform: translateX( 45px );
    }
    .loading .menu-hamburguer span.two {
        transform: translateX( 35px );
    }

.is-menu-opened .menu-hamburguer span.one,
.is-menu-opened .menu-hamburguer span.three {
    background-color: #000;
    transition-delay: 0s !important;
    transition-duration: 0.8s !important;
}
body.is-scrolling.is-menu-opened .menu-hamburguer span.one,
body.is-scrolling.is-menu-opened .menu-hamburguer span.three {
    /*background-color: #FFF !important;*/
}
.is-menu-opened .menu-hamburguer span.two {
    height: 15px;
    text-indent: 1px;
    border-radius: 3px;
    transition-delay: 0s !important;
    transition-duration: 0.8s !important;
}
    .loading .menu-hamburguer span.three {
        transform: translateX( 15px );
    }

    .loading .menu-hamburguer span {
        opacity: 0;
    }


@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}


















#header {
    background-color: transparent;
    width: 100%;
    height: 150px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition-delay: 0s !important;
    transition-duration: 0.5s !important;
    transform: translateY( 0 );
}
.is-scrolling #header {
    height: 80px;
}
.is-menu-opened #header {
    height: 150px;
}

.is-scrolling.is-scrolling-up #header {
    transform: translateY( 0 );
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.is-scrolling.is-scrolling-down #header {
    transform: translateY( -85px );
}
.is-menu-opened .is-scrolling.is-scrolling-down #header {
    transform: translateY( 0 );
}

.is-scrolling-footer #header {
    height: 150px !important;
    transform: translateY( 0 ) !important;
}








#header::before {
    content: ' ';
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
}
.is-scrolling #header::before {
    opacity: 1;
}


    #headerLineBottom {
        background-color: #333;
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        transition-delay: 0s !important;
        transition-duration: 1.8s !important;
    }
    .loading #headerLineBottom {
        width: 0;
    }
    .is-scrolling #headerLineBottom {
        background-color: #000;
        width: 0;
    }
    .is-scrolling-footer #headerLineBottom,
    .is-menu-opened #headerLineBottom {
        background-color: #333;
        width: 100%;
    }

    #headerLineBottom::before {}
    .is-scrolling #headerLineBottom::before {}


    #headerLineBottom::after {
        content: ' ';
    }


    #headerBrand {
        width: 250px;
        height: 80px;
        position: absolute;
        top: 30px;
        left: 0;
        z-index: 2;
    }
    .is-scrolling #headerBrand {
        top: -1px;
    }
    .is-scrolling-footer #headerBrand,
    .is-menu-opened #headerBrand {
        top: 30px;
    }



        #headerBrand strong {
            font-family: 'Roboto', sans-serif;
            font-size: 28px;
            font-weight: 600;
            color: #FFF;
            width: auto;
            height: 30px;
            line-height: 30px;
            position: absolute;
            left: 1px;
            opacity: 1;
            overflow: hidden;
            transition-duration: 0.6s !important;
            transform: translateY( 0 ) scale( 1 );
        }
        .loading #headerBrand strong {}


        .is-scrolling #headerBrand strong {
            left: 55px;
            font-size: 20px;
            height: 22px;
            line-height: 22px;
        }
        .is-scrolling-footer #headerBrand strong,
        .is-menu-opened #headerBrand strong {
            left: 75px;
            font-size: 28px;
            height: 30px;
            line-height: 30px;
        }



        #headerBrand strong.one {
            top: 13px;
            transition-delay: 0.5s;
        }
        .is-scrolling #headerBrand strong.one {
            top: 18px;
        }
        .is-scrolling-footer #headerBrand strong.one,
        .is-menu-opened #headerBrand strong.one {
            top: 13px;
        }


        #headerBrand strong.two {
            top: 37px;
            transition-delay: 0.6s;
        }
        .is-scrolling #headerBrand strong.two {}


        #headerBrand strong::before {
            content: '';
            background-color: #000;
            width: 0;
            height: 30px;
            position: absolute;
            top: 0;
            left: -5px;
            z-index: 1;
            transition: all 0.6s ease 0s;
            -webkit-transition: all 0.6s ease 0s;
        }
        .is-scrolling #headerBrand strong::before {

        }
        .is-scrolling #headerBrand strong::before {
            width: calc( 100%  + 10px );
        }

        #headerBrand strong span {
            display: block;
            position: relative;
            z-index: 2;
            transform: translateY( 0 );
            transition-duration: 1s;
        }
        .loading #headerBrand strong span {
            transform: translateY( 50px );
        }



        


        #headerLanguage {
            text-align: right;
            position: absolute;
            top: 60px;
            right: 70px;
            z-index: 2;
        }
        .is-scrolling #headerLanguage {
            top: 26px;
        }
        .is-scrolling-footer #headerLanguage,
        .is-menu-opened #headerLanguage {
            top: 67px;
        }

        #headerLanguage {}
        #headerLanguage li {
            display: inline-block;
            opacity: 0.3;
        }
        #headerLanguage li.is-active {
            opacity: 0.7;
        }
        #headerLanguage li:hover {
            opacity: 1;
        }


        #headerLanguage li a {}
        #headerLanguage li a span {
            color: #FFF;
            padding: 10px;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 2px;
        }


@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}























#menuDefault {
    background-color: #000;

    display: block;

    width: 100%;
    height: 0;

    padding-top: 0;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    overflow: hidden;
    transition-delay: 0.2s;
    transition-duration: 0.7s;
}
.is-menu-opened #menuDefault {
    padding-top: 150px;
    height: 100vh;
}
.is-scrolling #menuDefault {
    /*background-color: #FFF;*/
}

#menuDefault ul {
    margin-top: calc( 20vh);
}
.is-menu-opened #menuDefault ul {

}


    #menuDefault ul li {
        text-align: right;
        width: 100%;
        height: 13vh;
        overflow: hidden;
    }
    #menuDefault ul li a {
        display: block;
        transform: translateY( 20vh );
        transition-delay: 0.3s;
        transition-duration: 1s;
    }
    .is-menu-opened #menuDefault ul li a {
        transform: translateY( 0px );
    }

    #menuDefault ul li a span {
        font-weight: 700;
        font-size: 15vh;
        color: #424242;
        letter-spacing: -2px;
        display: inline-block;
        line-height: 13vh;
        transition-delay: 0.1s;
        transition-duration: 0.7s;
    }
    .is-scrolling #menuDefault ul li a span {
        /*color: #CCC;*/
    }
    #menuDefault ul li:hover a span {
        color: #00FF00;
    }
    .is-scrolling #menuDefault ul li:hover a span {
        /*color: #000;*/
    }


@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}


























#homeLaunch {
    background-color: #111111;
    background-image: linear-gradient( 150deg, #202020 0%, #111 18%, #000 30%, #140024 60%, #19002d 80%, #230044 100% );
    background-size: 200% 200%;
    height: 95vh;
    padding: 150px 0 50px 0;
    position: relative;
    z-index: 5;
    animation: gradientAnimation 12s ease-in-out infinite;
    transition: all 1.3s ease 0.5s;
    -webkit-transition: all 1.3s ease 0.5s;
}

.scrolling-init #homeLaunch {
    transition: none;
    -webkit-transition: none;
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.loading #homeLaunch {
    height: 100vh;
    /*background-color: #111111;*/
    /*background-image: linear-gradient( 150deg, #202020 0%, #111 18%, #000 30%, #030000 60%, #19002d 80%, #230044 100% );*/
}
#homeLaunchInfos {
    position: relative;
    top: 0;
    left: 0;
    z-index: 3;
    transition-delay: 1.5s !important;
    transition-duration: 3.5s !important;
}
.loading #homeLaunchInfos {
    /*opacity: 0;*/
    /*transform: translateY( 100px );*/
}
#homeLaunch .columns {
    padding: 0;
    margin: 0;
    position: relative;
    top: 50px;
}
#homeLaunch .columns .column {
    position: relative;
}


#formHomeLauchRequestDemo {
    background-color: #000;
    background-image: linear-gradient( 150deg, #121212 0%, #0c0c0c 25%, #000 100% );
    width: 100%;
    min-width: 560px;
    min-height: 500px;
    padding: 45px 50px;
    border-radius: 20px;
    position: absolute;
    top: 10vh;
    right: 0;
    z-index: 5;
    opacity: 1;
    box-shadow: 0px 15px 50px rgba( 0,0,0,0.3 );
    transform: translateY( 0 );
    transition-delay: 0.8s !important;
    transition-duration: 1.2s !important;
}
.loading #formHomeLauchRequestDemo {
    opacity: 0;
    transform: translateY( 150px );
}

#formHomeLauchRequestDemo .message-form {
    bottom: 60px;
}







#formHomeLauchRequestDemo .columns {}
#formHomeLauchRequestDemo .columns .column {
    padding: 0;
    margin: 1px;
}

#requestDemoSubmit {


}






#homeLaunchInfos h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 35px;
    font-weight: 600;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 35px;
    padding: 0;
    margin-bottom: 50px;
    position: relative;
    top: 125px;
    opacity: 1;
    transform: translateY( 0px );
    transition-delay: 0.1s !important;
    transition-duration: 1.2s !important;
}


.loading #homeLaunchInfos h2 {
    transform: translateY( 40px );
    opacity: 0;
}
#homeLaunchInfos h2::after {
    background-color: #c50ae3;
    content: '';
    width: 25px;
    height: 3px;
    position: absolute;
    bottom: -5px;
    left: 2.5px;
    z-index: 1;
}
    #homeLaunchInfos h2 strong {
        color: #aeaeae;
        display: inline-block;
        height: 30px;
        /*overflow: hidden;*/
        line-height: 30px;
        margin-bottom: 5px;
        position: relative;
    }
    #homeLaunchInfos h2 strong#homeLaunchTyping {

    }


#homeLaunchInfos h3 {
    font-family: 'Roboto Mono', serif;
    font-size: 13px;
    font-weight: 500;
    color: #00FF00;
    letter-spacing: 0.4px;
    letter-spacing: 0;
    line-height: 19px;
    padding: 3px 0;
    position: relative;
    top: 165px;
    opacity: 1;
    transform: translateY( 0px );
    transition-delay: 0.3s !important;
    transition-duration: 1.5s !important;
}
.loading #homeLaunchInfos h3 {
    transform: translateY( 35px );
    opacity: 0;
}
#homeLaunchInfos h3:last-child::after {
    background-color: #00c0b9;
    content: '';
    width: 15px;
    height: 3px;
    position: absolute;
    bottom: -10px;
    left: 0px;
    z-index: 1;
}
#homeLaunchInfos h3 span {
    font-size: 8.5px;
    color: #777;
    letter-spacing: 1.5px;
    position: absolute;
    top: -5px;
    left: 0;
    transition-delay: 1.5s !important;
    transition-duration: 3.5s !important;
}






    #formHomeLauchRequestDemo {

    }

        #formHomeLauchRequestDemo h2 {
            font-size: 20px;
            text-align: right;
            text-transform: uppercase;
            color: #FFF;
            line-height: 20px;
            margin-bottom: 55px;
            position: relative;
        }
        #formHomeLauchRequestDemo h2::after {
            background-color: #00FF00;
            content: '';
            width: 25px;
            height: 3px;
            position: absolute;
            bottom: -10px;
            right: 1px;
            z-index: 1;
        }
        #formHomeLauchRequestDemo .input-field {
            padding: 0 0 10px 0 !important;
            margin: 0 !important;
            opacity: 1;
            transform: translateY( 0 );
            transition-delay: 1.1s !important;
            transition-duration: 1s !important;
        }
        .loading #formHomeLauchRequestDemo .input-field {
            opacity: 0;
            transform: translateY( 15px );
        }
        #formHomeLauchRequestDemo label {
            font-family: "Roboto Mono", serif;
            left: 33px !important;
            font-weight: 700;
            color: #0F0;
            top: 19px;
            opacity: 1;
            font-size: 13px;
        }
        #formHomeLauchRequestDemo label.active {
            color: #0F0 !important;
            opacity: 1 !important;
            transform: translateY(-5px) scale(.8);
        }
        #formHomeLauchRequestDemo input {
            background-color: #222;
            background-image: linear-gradient( 150deg, #1e1e1e 0%, #0c0c0c 100% );
            font-family: 'Roboto', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: #FFF;
            text-indent: 33px;
            letter-spacing: 1px;
            width: 100%;
            height: 85px;
            padding: 15px 0 0 0;
            border: solid 2px #3a3a3a;
            border-radius: 5px;
            box-shadow: inset 7px 7px 15px rgba( 0,0,0,0.7 );
        }
        #formHomeLauchRequestDemo h3 {
            text-transform: uppercase;
            font-weight: 700;
            color: #333;
            margin-bottom: 20px;
        }
        #formHomeLauchRequestDemo p {
            display: inline-block;
        }
        #formHomeLauchRequestDemo p label {
            margin: 0 25px 0 0;
        }
        #formHomeLauchRequestDemo p label span {
            font-family: 'Roboto', sans-serif;
            line-height: 25px !important;
        }

        [type=checkbox].filled-in:not(:checked)+span:not(.lever):after {
            height: 25px;
            width: 25px;
            background-color: #222222;
            border: 2px solid #444444;
            top: 0;
            z-index: 0;
        }
        [type=checkbox].filled-in:checked+span:not(.lever):after {
            top: 0;
            height: 25px;
            width: 25px;
            border: 2px solid #FFFFFF;
            background-color: #222;
            z-index: 0;
        }
        [type=checkbox].filled-in:checked+span:not(.lever):before {
            top: 1px;
            left: 4px;
        }





        #formHomeLauchRequestDemo .range-field {
            width: 100% !important;

        }
        #rang_budget_price {
            width: 100% !important;
              background-color: transparent !important;
              background-image: none !important;
              border: none !important;
              height: 50px !important;
              padding: 0 !important;
              margin: 0 !important;

        }
        #rang_budget_price_view {
            color: #FFF;
            display: block;
        }



        input[type=range]::-webkit-slider-thumb {
            background-color: #FFF;
            box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.5 );
          }
          input[type=range]::-moz-range-thumb {
            background-color: #FFF;
            box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.5 );
          }
          input[type=range]::-ms-thumb {
            background-color: #FFF;
            box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.5 );
          }

          /***** These are to edit the thumb and the text inside the thumb *****/
          input[type=range] + .thumb {
            background-color: #FFF;
            box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.5 );
          }
          input[type=range] + .thumb.active .value {
            color: #FFF;
            box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.5 );
          }







@media only screen and ( max-width: 1280px ) {
  

    #homeLaunchInfos {

    }

    #homeLaunchInfos h2 {
        font-size: 32px;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 35px;
        padding: 0;
        margin-bottom: 20px;
        top: 75px;
    }
    #homeLaunchInfos h2 strong {
        height: 25px;
        line-height: 25px;
        margin-bottom: 5px;
    }

    #homeLaunchInfos h3 {
        top: 100px;
        font-size: 12px;
        letter-spacing: 0;
        line-height: 11px;
    }

    #formHomeLauchRequestDemo {
        padding: 25px 30px 25px 30px;
        top: 4vh;
    }
    #formHomeLauchRequestDemo .message-form {
        bottom: 40px;
    }



}

@media only screen and ( max-width: 1180px ) {

    #homeLaunchInfos {

    }
  

}





























#contentPortfolio {

    background-color: #FFF;
    min-height: 100vh;
    padding-top: 50px;
    position: relative;
    z-index: 4;

}


/*

    #contentPortfolio::before,
    #contentPortfolio::after {

        content: '';
        position: absolute;
        top: 0;
        left: 0;
        transition: all .3s ease 0s;
        -webkit-transition: all .3s ease 0s;

    }


    #contentPortfolio::before {
        background-color: #d3d3d3;
        width: 3.8px;
        height: 100%;
        top: 0;
        left: calc( 5% + 8.5px );
        box-shadow: 0 3px 20px rgba( 0,0,0,0.1 );

        transition-duration: 2s;
        transition-delay: 3.5s;
    }
    .loading #contentPortfolio::before {
        height: 0;
    }

*/



#clientBrands {
    padding: 100px 0 25px 0;
}
    #clientBrands h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 17vh;
        font-weight: 900;
        color: #CCC;
        text-transform: uppercase;
        letter-spacing: -3px;
        line-height: calc( 17vh - 25px );
        padding: 0;
        margin: 50px 0;
    }


#clientBrands {}
#clientBrands::after {
    content: '';
    display: block;
    clear: both;
    width: 100%;
    height: 2px;
}
    #clientBrands figure {
        background-color: #FFF;
        display: block;
        width: calc( 20% - 0.1px);
        max-width: 300px;
        padding: 85px;
        border: solid 1px #d5d5d5;
        float: left;
        position: relative;
        z-index: 1;
        box-shadow: 0 0 0 rgba( 0,0,0,0 );
        transition-duration: 0.5s;
        overflow: hidden;
        filter: grayscale( 100% );
        opacity: 0.5;
    }
    #clientBrands figure:hover {
        border: solid 1px #777;
        z-index: 2;
        filter: grayscale( 0 );
        opacity: 1;
    }
        #clientBrands figure img {
            display: block;
            width: 100%;
            height: auto;

        }
        #clientBrands figure span {
            font-weight: 900;
            letter-spacing: 1px;
            height: 10px;
            line-height: 10px;
            position: absolute;
            z-index: 2;
        }
        #clientBrands figure span.date {
            font-size: 10px;
            color: #000;
            right: 10px;
            bottom: 10px;
            transition-duration: 0.4s;
            opacity: 0.4;
            transform: translateY( 0 );
        }
        #clientBrands figure:hover span.date {
            opacity: 1;
            transform: translateY( -13px );
        }


        #clientBrands figure span.service {
            font-size: 9px;
            font-weight: 400;
            color: #000;
            right: 10px;
            bottom: 10px;
            transform: translateY( 15px );
            transition-duration: 0.5s;
            opacity: 0;
        }
        #clientBrands figure:hover span.service {
            transform: translateY( 0 );
            opacity: 1;
        }




        #contentRequestFullPortfolio,
        #contentRequestFullProjects {
            padding: 75px 0 150px 0;
        }

            #formRequestFullPortfolio,
            #formRequestFullProjects {
                background-color: #000;
                padding: 105px 100px 100px 100px;
                display: block;

                border-radius: 10px;
                position: relative;
                box-shadow: 0 10px 50px rgba( 0,0,0,0.3 );
            }
            #formRequestFullPortfolio .message-form,
            #formRequestFullProjects .message-form {
                bottom: 120px;
            }

            #formRequestFullPortfolio .input-field,
            #formRequestFullProjects .input-field {
                padding: 0;
                margin: 0;
            }
                #formRequestFullPortfolio label,
                #formRequestFullProjects label {
                    font-size: 20px;
                    font-weight: 700;
                    top: 15px;
                }
                #formRequestFullPortfolio label.active,
                #formRequestFullProjects label.active {
                    top: -5px;
                    left: 5px !important;
                }
                #formRequestFullPortfolio input,
                #formRequestFullProjects input {
                    font-size: 3.2vw;
                    font-weight: 700;
                    color: #A2A2A2;
                    width: 100%;
                    height: 85px;

                }

            #submitRequestFullPortfolio,
            #submitRequestFullProjects {
                width: 100%;
                height: auto;
                max-height: none;
            }
                #submitRequestFullPortfolio span,
                #submitRequestFullProjects span {
                    color: #00c0b9;
                    font-weight: 900;
                    font-size: 15px;
                    font-family: 'Roboto Mono', serif;
                    letter-spacing: 2px;
                    display: block;
                    padding: 25px;
                }



@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}


















#contentAbout {
    background-color: #000;
    /*background-image: linear-gradient( 150deg, #202020 0%, #111 18%, #000 30%, #140024 60%, #19002d 80%, #230044 100% );*/


    min-height: 100vh;
    position: relative;
    z-index: 3;
}
    #contentAbout article {
        padding: 125px 150px;
    }
        #contentAbout article p {
            font-size: 45px;
            font-weight: 400;
            color: #FFF;
            text-align: left;
            letter-spacing: 1px;
            line-height: 55px;
            margin-bottom: 45px;
        }
        #contentAbout article {}
        #contentAbout article {}


        #contentAboutLogo {
            display: block;
            transform: translateY( 50px ) translateX( 50% );
        }

        #contentAboutLogo::after {
            content: '';
            display: block;
            clear: both;
            width: 100%;
            height: 2px;
        }
        #contentAboutLogo a {
            float: left;
        }
        #contentAboutLogo a img {
            display: block;
            animation: brandImageAnimation 90s ease-in infinite;
        }

    #contentAbout {}
    #contentAbout {}


@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}





























#contentProjects {
    background-color: #FFF;
    min-height: 100vh;
    padding: 125px 0;
    position: relative;
    z-index: 2;
}
    #contentProjects h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 17vh;
        font-weight: 900;
        color: #CCC;
        text-transform: uppercase;
        letter-spacing: -3px;
        line-height: calc( 17vh - 25px );
        padding: 0;
        margin: 50px 0;
    }
        #contentServices h2 span {
            display: inline-block;
        }

    #contentProjects .row {
        text-align: center;
        padding: 150px 25px 5px 25px;
    }
    #contentProjects .row a {
        display: inline-block;
        border: solid 1px #999;
        border-radius: 2px;
        padding: 17px 25px 15px 65px;
    }
    #contentProjects .row a i {
        display: inline-block;
        transform: translateX( -15px );
    }
    #contentProjects .row a:hover i {
        transform: translateX( -3px );
    }
    #contentProjects .row a i svg {
        opacity: 0;
    }
    #contentProjects .row a:hover i svg {
        opacity: 0.5;
    }

    #contentProjects .row a i .lock-icon .lock-shackle {
        transform: translateY( -2px ) rotate( 0deg );
    }
    #contentProjects .row a:hover i .lock-icon .lock-shackle {
        transform: translateY(-3.5px) rotate(25deg);
        transform-origin: center;
    }


    #contentProjects .row a span {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #999;
        text-transform: uppercase;
        display: inline-block;
        transform: translateX( 0 );
    }
    #contentProjects .row a:hover span {
        transform: translateX( -5px );
    }

/*
    #projectsCarousel {
        width: calc( 100% + 90px);
        padding: 50px;
        margin: 125px 0;
        position: relative;
        left: -45px;
        border-top: solid 1px #000;
        border-bottom: solid 1px #000;
    }
    #projectsCarousel::before,
    #projectsCarousel::after {
        background-color: #000;
        content: '';
        width: 1px;
        height: calc( 100% + 2px );
        position: absolute;
        top: -1px;
        z-index: 2;
    }
    #projectsCarousel::before {
        left: -1px;
    }
    #projectsCarousel::after {
        right: -1px;
    }
        #projectsCarousel .flickity-viewport {

        }

        #projectsCarousel .flickity-slider::after {
            content: '';
            display: block;
            clear: both;
            width: 100%;
            height: 2px;
        }

        #projectsCarousel .flickity-button {
            background-color: transparent;
        }
        #projectsCarousel .flickity-button:disabled {}


        #projectsCarousel .flickity-prev-next-button.previous {
            left: -55px;
        }
        #projectsCarousel .flickity-prev-next-button.next {
            right: -55px;
        }


        #projectsCarousel .flickity-page-dots {
            bottom: 16.5px;
        }
        #projectsCarousel .flickity-page-dots .dot {
            border-radius: 2px;
            transition: all 0.4s ease 0s;
            -webkit-transition: all 0.4s ease 0s;
        }
        #projectsCarousel .flickity-page-dots .dot.is-selected {
            width: 25px;
        }
        #projectsCarousel {}
        #projectsCarousel {}
        #projectsCarousel .carousel-item {
            background-color: #EFEFEF;
            width: calc( 33.3% - 32px );
            height: calc( 60vh + 50px );
            max-width: 1000px;
            max-height: 1000px;

            margin: 0 50px 0 0;

            float: left;

            border: solid 1px #EEE;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

            #projectsCarousel .carousel-item figure {
                display: block;
            }
            #projectsCarousel .carousel-item figure img {
                width: 300px;
                height: auto;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate( -50%, -50% );
            }
            #projectsCarousel .carousel-item figure h3 {}
            #projectsCarousel .carousel-item figure h3 span {}
            #projectsCarousel .carousel-item figure p {}
            #projectsCarousel .carousel-item figure p a {}
*/


        #projectsList {

            padding: 50px;

            border: solid 1px #CCC;
        }
        #projectsList .columns {
            padding: 0;
            margin: 0;
        }
            #projectsList .columns .column {
                padding: 0;
                margin: 0;
            }


        #projectsList .project-list-item {
            padding: 0 0 50px 0;
            margin: 0 0 50px 0;
            border-bottom: solid 1px #EEE;
        }
        #projectsList .project-list-item:last-child {
            padding: 0;
            margin: 0;
            border-bottom: none;
        }
        #projectsList .project-list-item.is-blocked {
            filter: blur( 8px );
        }

            #projectsList .project-list-item figure {
                background: url( "img/bg-square-transparent.png") top left repeat #EEE;
                display: block;
                width: 300px;
                height: 175px;
                position: relative;
            }
            #projectsList .project-list-item figure::after {
                content: '';
                background-color: #000;
                width: 0;
                height: 2px;
                position: absolute;
                left: 0;
                bottom: 0;
                transition: all 15s ease-in-out 0s;

            }
            [data-scroll-section-inview] #projectsList .project-list-item figure::after {
                width: 100%;
            }
            #projectsList .project-list-item figure.loaded::after {
                background-color: #000;
                width: 100%;
                opacity: 0;
                transition-duration: 0.2s;
            }

            #projectsList .project-list-item figure span {
                width: 80%;
                height: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate( -50%, -50% );
            }
            #projectsList .project-list-item figure img {
                display: none;
                box-shadow: 0 10px 15px rgba( 0,0,0,0.2 );
            }
            #projectsList .project-list-item.is-blocked figure img {
/*                filter: blur( 5px );*/
            }


            #projectsList .project-list-item figure img.is-horizontal {
                width: 100%;
                height: auto;
                max-width: 250px;
                max-height: initial;
            }
            #projectsList .project-list-item figure img.is-vertical {
                width: auto;
                height: auto;
                max-width: 275px;
                max-height: 200px;
            }


            #projectsList .project-list-item h3 {
                font-size: 12px;
                font-weight: 900;
                color: #000;
                letter-spacing: 1px;
                line-height: 15px;
                padding: 0;
            }
            #projectsList .project-list-item h3 span {}

            #projectsList .project-list-item h4 {
                font-size: 15px;
                font-weight: 700;
                color: #999;
                line-height: 15px;
                padding: 10px 0;
            }
            #projectsList .project-list-item h4 span {}



            #projectsList .project-list-item p {
                font-size: 15px;
                font-weight: 400;
                color: #999;
                line-height: 15px;
                padding: 0;
                margin: 0;
            }
            #projectsList .project-list-item p a {

                font-size: 10px;
                font-weight: 900;
                color: #999;
                letter-spacing: 1px;

                display: inline-block;

                padding: 5px 10px;
                margin: 15px 0 20px 0;

                border: solid 1px #999;
                border-radius: 2px;

            }
            #projectsList .project-list-item p a span {}



            #projectsList .project-list-item h5 {
                font-size: 125px;
                font-weight: 900;
                color: #f4f4f4;
                text-align: right;
            }
            #projectsList .project-list-item h5 span {}


@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}


























#contentRequestFullProjects {
    margin: 0 0 0 0;
    position: relative;
    z-index: 2;

}

@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}













#contentTechnologiesTools {
    background: url( "img/bg-square-transparent.png") top left repeat #EEE;
    display: block;
    min-height: 100vh;
    padding: 125px 0;
    position: relative;
    z-index: 2;
}
        #contentTechnologiesTools h2 {
            font-family: 'Roboto', sans-serif;
            font-size: 17vh;
            font-weight: 900;
            color: #333;
            text-transform: uppercase;
            letter-spacing: -3px;
            line-height: calc( 17vh - 25px );
            padding: 0;
            margin: 50px 0;
        }
        #contentTechnologiesTools h2 span {
            display: inline-block;
        }




        #technologiesToolsList {

            width: 100%;
            height: 100vh;

            padding: 0;
            position: relative;

        }
        #technologiesToolsList::after {
            content: '';
            display: block;
            clear: both;
            width: 100%;
            height: 2px;
        }
        #technologiesToolsList .technologies-tools-item {
            background-color: transparent;
            float: left;

            width: 250px;
            height: 250px;

            border: solid 1px transparent;
            border-radius: 5px;

            position: absolute;
            top: calc( 50% - 125px );
            left: calc( 50% - 125px );

            overflow: hidden;
            z-index: 1;
        }
        #technologiesToolsList .technologies-tools-item:hover,
        #technologiesToolsList .technologies-tools-item.is-dragging {
            background-color: rgba( 255, 255, 255, 0.8 );
            border: solid 1px #00FF00;
            z-index: 2;
        }
        #technologiesToolsList .technologies-tools-item figure {
            display: block;
            width: 250px;
            height: 250px;
            position: relative;
        }

        #technologiesToolsList .technologies-tools-item figure svg,
        #technologiesToolsList .technologies-tools-item figure img {
            width: 300px;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate( -50%, -50% ) scale( 0.4 );
        }



@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}






















#contentContacts {
    background-color: #000;
    min-height: calc( 89vh + 100px );
    padding: 200px 0 50px 0;

    position: relative;
    z-index: 1;
    top: 100px;
}

    #contentContacts h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 50px;
        font-weight: 900;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 47px;
        padding: 0;
        margin: 25px 0;
    }
    #contentContacts h3 {
        font-size: 20px;
        font-weight: 400;
        color: #FFF;
        letter-spacing: 1px;
        line-height: 25px;
        padding: 0;
        margin: 55px 0;
    }
    #contentContacts h4 {
        font-family: 'Roboto', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #00FF00;
        text-transform: lowercase;
        letter-spacing: 1px;
        line-height: 20px;
        padding: 0;
        margin: 2.5px 0;
    }
    #contentContacts h4 span {
        color: #00c0b9;
    }
    #contentContacts h4 a {
        font-size: 10px;
        color: #00c0b9;
        text-decoration: none;
        letter-spacing: 1px;
        opacity: 0.5;
    }

    #contentContacts h5 {
         font-family: 'Roboto', sans-serif;
         font-size: 10px;
         font-weight: 900;
         color: #333;
         text-transform: lowercase;
         letter-spacing: 1px;
         line-height: 10px;
         padding: 0;
         margin: 50px 0;
     }







        #formContacts {
            padding: 15px 0 5px 0;
            margin: 0;
        }
        #formContacts .input-field {
            padding: 0;
            margin: 0 0 20px 0;
        }

        #formContacts label {
            font-family: 'Roboto Mono', serif;
            color: #00c0b9 !important;
            font-weight: 900;
            font-size: 11px;
            letter-spacing: 2px;
            display: block;
            padding: 0 1px;
        }
        #formContacts .is-select label {

        }
        #formContacts .dropdown-content {
            background-color: #000;
            border: solid 1px #00c0b9;
            transform: translateY( 15px ) !important;
        }
        #formContacts .dropdown-content [type="checkbox"] + span:not(.lever) {
            font-size: 12px;
            color: #00FF00 !important;
            font-weight: 500;
        }

        #formContacts .select-wrapper .caret {
            fill: #00c0b9;
        }

        #formContacts .select-dropdown {
            font-size: 11px;
            letter-spacing: 1px;
            color: #0F0;
            font-weight: 400;
        }

        #formContacts .selected [type="checkbox"]:checked + span:not(.lever)::before {
            border-top: 2px solid transparent;
            border-left: 2px solid transparent;
            border-right: 2px solid #FFF;
            border-bottom: 2px solid #FFF;
        }

        #formContacts .selected [type="checkbox"]:not(:checked):disabled + span:not(.lever)::before {
            border-top: 2px solid transparent;
            border-left: 2px solid transparent;
            border-right: 2px solid #333;
            border-bottom: 2px solid #333;
        }

        #formContacts input {
            font-size: 12px;
            color: #00FF00 !important;
            font-weight: 500;
        }

        #formContacts textarea {
            font-size: 16px;
            color: #00FF00 !important;
            font-weight: 500;

            height: 100px;
            line-height: 19px;

            padding: 10px 0 25px 0;
        }

        #formContacts .character-counter {
            color: #999;
        }







@media only screen and ( max-width: 1280px ) {
  
}

@media only screen and ( max-width: 1080px ) {

  

}

















#contentHeader {
    background-color: #111111;
    background-image: linear-gradient( 150deg, #202020 0%, #111 18%, #000 30%, #140024 60%, #19002d 80%, #230044 100% );
    background-size: 200% 200%;
    height: 50vh;
    padding: 200px 0 100px 0;
    position: relative;
    z-index: 5;
    animation: gradientAnimation 12s ease-in-out infinite;
    transition: all 1.3s ease 0.5s;
    -webkit-transition: all 1.3s ease 0.5s;
}

.scrolling-init #contentHeader {
    transition: none;
    -webkit-transition: none;
}

.loading #contentHeader {
    height: 100vh;
    /*background-color: #111111;*/
    /*background-image: linear-gradient( 150deg, #202020 0%, #111 18%, #000 30%, #030000 60%, #19002d 80%, #230044 100% );*/
}

#contentHeader .container {
    position: relative;
}
#contentHeader h1 {
    font-size: 50px;
    font-weight: 900;
}
#contentHeader h1 span {}
#contentHeader h2 {}
#contentHeader h2 span {}
#contentHeader p {
    font-size: 15px;
    font-weight: 500;
    color: #FFF;
}
#contentHeader p a {}
#contentHeader p span {}
#contentHeader p strong {
    color: #00FF00;
    font-weight: 900;
}




#contentTerms {
    background-color: #FFF;
    display: block;
    width: 100%;
    min-height: 150vh;
    padding: 100px 0 50px 0;
}





#content_terms_sidebar {
    background-color: #CCC;

    padding: 25px;
    border-radius: 10px;
    
    position: relative;
    top: 0;
    left: 0;
    z-index: 5;

    transition: top 0.3s ease-out, transform 0.3s ease-out;
}

.is-scrolling-up #content_terms_sidebar {
    /* top: 100px; */
}
.is-scrolling-down #content_terms_sidebar {}






    #content_terms_sidebar ul {}
    #content_terms_sidebar ul li {}
    #content_terms_sidebar ul li a {
        display: block;
    }
    #content_terms_sidebar ul li a span {
        font-size: 25px;
        font-weight: 700;
        color: #999;
    }
    #content_terms_sidebar ul li a:hover span {
        color: #000;
    }
    #content_terms_sidebar ul li strong {}








    #contentTerms article {
        padding: 25px;
    }

    #contentTerms h2 {
        font-size: 35px;
        font-weight: 900;
        margin: 0 0 25px 0;
    }
    #contentTerms h2 span {}


    #contentTerms h3 {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 25px 0;
    }
    #contentTerms h2 span {}


    #contentTerms p {
        font-size: 18px;
        font-weight: 500;
        margin: 0 0 25px 0;
    }
    #contentTerms p a {}



    #contentTerms ul {
        margin: 0 0 25px 25px;
    }
    #contentTerms ul li {
        margin: 0 0 15px 0;
    }
    #contentTerms ul li a {}
    #contentTerms {}
    #contentTerms {}
    #contentTerms {}
    #contentTerms {}
    #contentTerms {}