/******************************************* FONTS ******************************************************/

@font-face {
    font-family: 'Quattrocento';
    font-style: normal;
    font-weight: 700;
    src: url('../font/Quattrocento-Bold.eot');
    src: url('../font/Quattrocento-Bold.eot?#iefix') format('eot'),
    url('../font/Quattrocento-Bold.woff2') format('woff2'),
    url('../font/Quattrocento-Bold.ttf') format('ttf');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{ /* for IE */
    font-family: Quattrocento;
    src:url(../font/Quattrocento-Bold.eot);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('../font/Roboto-Thin.eot');
    src: url('../font/Roboto-Thin.eot?#iefix') format('eot'),
    url('../font/Roboto-Thin.woff2') format('woff2'),
    url('../font/Roboto-Thin.ttf') format('ttf');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{ /* for IE */
    font-family: Roboto;
    font-weight: 100;
    src:url(../font/Roboto-Thin.eot);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../font/Roboto-Light.eot');
    src: url('../font/Roboto-Light.eot?#iefix') format('eot'),
    url('../font/Roboto-Light.woff2') format('woff2'),
    url('../font/Roboto-Light.ttf') format('ttf');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{ /* for IE */
    font-family: Roboto;
    font-weight: 300;
    src:url(../font/Roboto-Light.eot);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../font/Roboto-Regular.eot');
    src: url('../font/Roboto-Regular.eot?#iefix') format('eot'),
    url('../font/Roboto-Regular.woff2') format('woff2'),
    url('../font/Roboto-Regular.ttf') format('ttf');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{ /* for IE */
    font-family: Roboto;
    font-weight: 400;
    src:url(../font/Roboto-Regular.eot);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../font/Roboto-Bold.eot');
    src: url('../font/Roboto-Bold.eot?#iefix') format('eot'),
    url('../font/Roboto-Bold.woff2') format('woff2'),
    url('../font/Roboto-Bold.ttf') format('ttf');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{ /* for IE */
    font-family: Roboto;
    font-weight: 700;
    src:url(../font/Roboto-Bold.eot);
}
@font-face {
    font-family: 'Nova Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../font/NovaMono.eot');
    src: url('../font/NovaMono.eot?#iefix') format('eot'),
    url('../font/NovaMono.woff2') format('woff2'),
    url('../font/NovaMono.ttf') format('ttf');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{ /* for IE */
    font-family: Nova Mono;
    font-weight: 400;
    src:url(../font/NovaMono.eot);
}

/*************************************** ANIMATIONS ***************************************************/

/**** GRADIENT EFFECT *******/

@-webkit-keyframes GradientFx {
    0%{background-position:0% 97%}
    50%{background-position:100% 4%}
    100%{background-position:0% 97%}
}
@-moz-keyframes GradientFx {
    0%{background-position:0% 97%}
    50%{background-position:100% 4%}
    100%{background-position:0% 97%}
}
@-o-keyframes GradientFx {
    0%{background-position:0% 97%}
    50%{background-position:100% 4%}
    100%{background-position:0% 97%}
}
@keyframes GradientFx { 
    0%{background-position:0% 97%}
    50%{background-position:100% 4%}
    100%{background-position:0% 97%}
}
.gradientFX,
body {
    background: linear-gradient(46deg, #b1ddd0, #faec95, #ffb9c7, #6a82fb, #e0f1ff, #fffde4);
    background-size: 1200% 1200%;
    
    -webkit-animation: GradientFx 120s ease infinite;
    -moz-animation: GradientFx 120s ease infinite;
    -o-animation: GradientFx 120s ease infinite;
    animation: GradientFx 120s ease infinite;
}

/**** MOVEMENT ARROW ****/

@keyframes Movement {
    from {transform:translate(-300%, 0);}
    to {transform:translate(-100%, 0);}
}
@-webkit-keyframes Movement {
    from {transform:translate(-300%, 0);}
    to {transform:translate(-100%, 0);}
}
@-moz-keyframes Movement {
    from {transform:translate(-300%, 0);}
    to {transform:translate(-100%, 0);}
}
@-o-keyframes Movement {
    from {transform:translate(-300%, 0);}
    to {transform:translate(-100%, 0);}
}

/***** ROTATE 360 *****/

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

/**************************************** TYPOGRAPHY ****************************************************/
h1, .h1-services {
    font-weight: 400;
    font-size: 2.5rem;
}
h3,h2,h6, .h2-services  {
    margin: 0;
}
h2, .h2-services {
    font-size: 2rem;
}
h3, .h3-services {
    font-size: 1.5rem;
}
h6 {
    font-weight: 600;
}
.special-index {
    font-weight: 100;
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 0.5em;
}
.title, .brain-title {
    margin:0 0 0.4em 0;
    font-size: 3rem;
    font-weight: bold;
    line-height: 2.85rem;
}
.brain-title {
    font-size: 5rem;
    line-height: 4.5rem;
}
.huge {
    font-size: 250px;
    font-weight: bold;
}
.heart-txt-l, .heart-txt-r {
    font-size: 180px;
    font-weight: bold;
}
.heart-txt-l {
    float: left;
}
.heart-txt-r {
    float: right;
}
small {
    font-size: 0.7rem;
}
a {
    text-decoration: none;
    color: black;
}
a:hover {
    text-decoration: underline;
    color: black;
}
.address {
    line-height: 0.7rem;
}
.menu-txt {
    position: absolute;
    bottom: 27px;
    right: -13px;
    font-size: 0.6rem;
    transition: all 150ms ease-in-out, opacity 100ms ease-in-out;
}
.menu-txt-fade {
    opacity: 0;
    right: 10px;
}
.no-underline {
    text-decoration: none !important;
}
.spacing-page-titles p {
    font-size: 23px;
    line-height: 2rem;
}
.img-team span,
.img-team h6 {
    display: block;
    font-size: 0.8em;
    line-height: 1em;
    margin:0 0 4px 0;
    padding: 0;
}
.img-team h6 {
    font-size: 0.9em;
}
/****************************************** BUTTONS ******************************************************/

.codi-btn {
    display: inline-block;
    font-weight: 100;
    color: #000;
    padding: 0.5rem 3rem;
    border: solid #000 thin;
    
}
.codi-btn:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
    text-decoration: none;
}
#contact_submit {
    margin-top:-13px;
}
#contact_submit button.codi-btn {
    padding: 0.2rem 3rem;
    background-color: transparent;
}
#contact_submit button.codi-btn:hover {
    background-color: #000;
}
.get-in-touch {
    font-size: 15px !important;
    font-weight: bold;
    text-decoration: none !important;
}

/***************************************************** HEADER ***************************************************/

header {
    height: 75px;
    position: fixed;
    top:0;
    width: 100%;
    z-index: 50;
}
header .container-fluid {
    position: relative;
    font-family: 'Quattrocento';
    font-weight: 700;
    font-size: 50px;
    z-index: 100;
}
.site-logo{
    display: inline-flex;
}
.site-logo span{
    display: inline-block;
    font-size: 40px;
    overflow: hidden;
    width: 180px;
    transition: width 0.100s ease-in-out;
}
.site-logo span.colapsed{
    width: 42px;
}
.site-logo::after {
    font-size: 40px;
    content: "/>";
    float: right;
}

/*************************************************** NAV ********************************************************/

.sidenav {
    height: 100%; /* 100% Full-height */
    width: auto; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;  /* Stay at the top */
    left: 0;
    transform: translate3d(-100%,0,0);
    background-color: #111; /* Black*/
    text-align: right;
    overflow: hidden; /* Disable horizontal scroll */
    padding:0 75px;
    padding-top: 80px; /* Place content 60px from the top */
    transition: 0.250s; /* 0.5 second transition effect to slide in the sidenav */
    opacity: 0;
    visibility: hidden;
}
.open-nav {
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
}
.nav-menu {
    position: relative;;
    text-align: left;
    display: inline-block;
    align-self: center;
}
.sidenav .nav-menu > a {
    margin: 0;
    display: block;
    font-size: 35px;
}
nav span {
    margin: 0;
    padding: 0.6rem;
    line-height: 0.8rem;
}
.nav-menu .address {
    margin-top: 1rem;
}

/******************************************* MAIN *****************************************************/
body {
    padding: 75px 0 0 0;
    margin: 0;
    min-height: 100vh;
    width: 100%;
    font-family: 'Roboto';
}
body > .container-fluid{
    min-height: calc(100vh - 286px);
}
.container-fluid {
    width: 940px;
    max-width: 100%;
    padding-right: 10px;
    padding-left: 10px;    
}
.row {
    margin-right: -10px;
    margin-left: -10px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2,
.col-3, .col-4, .col-5, .col-6, .col-7, .col-8,
.col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10,
.col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3,
.col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7,
.col-lg-8, .col-lg-9, .col-lg-auto, .col-md,
.col-md-1, .col-md-10, .col-md-11, .col-md-12,
.col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2,
.col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7,
.col-sm-8, .col-sm-9, .col-sm-auto, .col-xl,
.col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2,
.col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7,
.col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 10px;
    padding-left: 10px;
}
.nav-box {
    display: inline-block;
    top: 50%;
    left: -9999px;
    position: fixed;
    align-self: center;
    z-index: 100;
}
.full-window-height {
    height: 100vh;
}
.full-window-height.first-row {
    margin-top: -75px;
}
.spacing-rows {
    margin: 0 0 3rem 0;
}
.spacing-rows-special {
    margin: 0 0 200px 0;
}
.spacing-page-titles {
    margin: 3rem 0 5rem 0;
}
.spacing-rows-work {
    margin: 3rem 0 1rem 0;
}

.heart-pos {
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-57%, -50%);
    display:inline-block;
    width:400px;
    height:400px;
}
.mobile-bg {
    background-image: url(../img/mobile.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 308px;
}
.mobile-bg a {
    display: flex;
    height: 240px;
    line-height: 100%;
    font-size: 5em;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    margin: 34px 0;
}
.arrow-big-box {
    position: absolute;
    font-size: 2.2rem;
    left: 0;
}
.arrow-position-nav {
    font-size: 1.1rem;
    left: 0;
    transform: translate(-100%, 0);
    animation: Movement 2000ms infinite ease-out;
}
.arrow-position-numbers {
    bottom: -50px;
    left: -20px;
    transform: translate(-100%, 0);
    animation: Movement 2000ms infinite ease-out;
}
.numbers-position {
    position: relative;
    bottom: -40px;
    text-decoration: underline;
}
.gradient-numbers {
    position: absolute;
    font-size: 30rem;
    line-height: 21.7rem;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: 700;
    bottom: -124px;
    background-image: -webkit-linear-gradient(left, #E0F8F7, #faec95, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #E0F8F7, #585858, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #39bcc2, #39bcc2, #a5a14f, #a5a14f); /* Standard syntax; must be last */
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    z-index: -1;
}
.motherboard {
    padding: 25vh 0 30vh 0;
    background-image: url(../img/motherboard.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: content;
}
.box-motherboard {
    margin: 0 10%;
    background-color: #fff;
    border: solid 2px #000;
    text-align: center;
    padding: 1rem;
}
.box-motherboard p {
    font-weight: 100;
    font-size: 1.5em;
    line-height: 1.5em;
}

/********************************************************** LISTS *********************************************************/

ul {
    margin: 0;
}
ul li {
    list-style-type: none;
}
.columns  {
    display: block;
    list-style: none;
}
.columns h6 {
    font-size: 0.7em;
}
.columns ul {
    padding-left: 0.5em;
}
.columns ul li {
    font-size: 0.7em;
    font-weight: thin;
}
.columns > div > div{
    width: 130px;
    height: auto;
    display: block;
    margin-bottom:15px;
    padding: 0 5px;

}   


/********************************************************** IMAGES ********************************************************/

img {
    max-width: 100%;
}
.img-hello {
    position: absolute;
    max-width: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-90%);
}
.img-works {
    width:250px;
    height:180px;
    margin: 10px;
    background-image: url(../img/sprite_logos.svg);
    background-size: auto 360px;
    background-repeat: no-repeat;
    background-position-y: 0;
    position: relative;
}
.img-works:hover {
    background-position-y: -180px;
}
.img-team {
    width:145px;
    height:145px;
    margin: 5px 5px 5px 5px;
    background-image: url(../../imagens/sprite_team5.png);
    background-repeat: no-repeat;
    background-position-y: -146px;
    position: relative;
    opacity: 0.5;
    filter: grayscale(100%); /* For IE8 and earlier */
}
.img-team:hover {
    filter:grayscale(0%);
    opacity: 1;
}
.img-team:hover a.icon-team {
    display: inline-block;
    margin: 0 4px;
}
.img-team > div {
    padding: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
}
.img-team > div > div {
    position: absolute;
    bottom: 2px;
    width: 85%;
    text-align: center;
}

/********** COMPASS *************/

.avatar-south {
    background-position-x: 0; 
}
.avatar-west {
    background-position-x: -145px;
}
.avatar-nw {
    background-position-x: -290px;
}
.avatar-sw {
    background-position-x: -435px;
}
.avatar-center {
    background-position-x: -580px;
}
.avatar-se {
    background-position-x: -725px;
}
.avatar-ne {
    background-position-x: -870px;
}
.avatar-east {
    background-position-x: -1015px;
}
.avatar-north {
    background-position-x: -1160px;
}

/******************************************************* FORMS *****************************************************************/

.div-bar {
    color: white;
    background-color: black;
    border: none;
    width: 100%;
    height: 25px;
    margin-bottom: 20px;
}
input, textarea {
    max-width: 100%;
    width: 100%;
    margin-bottom: 8px;
    padding: 0 5px 0 5px;
    background: transparent;
    border: 1px solid #141212;
}
textarea {
    height: 200px;
    resize: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: black;
}
::-moz-placeholder { /* Firefox 19+ */
    color: black;
}
:-ms-input-placeholder { /* IE 10+ */
    color: black;
}
:-moz-placeholder { /* Firefox 18- */
    color: black;
}
.error {
	display: none;
	margin-left: 10px;
}		
.error_show {
	color: red;
	margin-left: 10px;
}
input.invalid, textarea.invalid{
    border: 2px solid red;
}

input.valid, textarea.valid{
    border: 2px solid green;
}

#subscription{
    width: 2%;
    position: relative;
    top: 2px;
}

/******************************************************** FOOTER **********************************************************/
.footer-main {
    font-size: 0.8rem;
}
footer ul {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height:1.1rem;
}
footer ul li {
    font-size: 13px;
    display: inline;
}
footer ul li::after {
    content:"\A";
    white-space: pre;
}

/********************************************************** TABLE *************************************************************/

table, td {
    /* border: 1px solid black; */
    padding: 1.2em 0 0 0 ;
}
.table-last {
    padding: 2rem 0 0 0.3em;
    line-height: 1.5rem;
}

/******************************************************** NUMBERS TAB ********************************************************/

ul.tabs{
    margin: 0 0 20px 0;
    padding: 0px;
}
ul.tabs li{
    font-weight: 100;
    display: inline-block;
    padding: 0 10px;
    line-height: 1em;
    cursor: pointer;
    border-right: solid black 2px;
}
ul.tabs li.current{
    font-weight: bold;
    text-decoration: underline;
}
.tab-content{
    display: none;
}
.tab-content.current{
    display: inherit;
}
ul.tabs  li:last-child {
    border-right: none;
}

/******************************************************* NUMBERS RADAR ***********************************************************/

.radar-bg {
    position: absolute;
    width: 100%;
    padding-bottom: 50%;
    overflow: visible;
    left:50%;
    top:0;
    transform: translate(-50%,0);
    z-index: -1;
}
.pointer {
    position: absolute;
    left: 10.5820106%;
    right: 10.5820106%;
    top: 10.5820106%;
    bottom: 50%;
    will-change: transform;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background-image: linear-gradient(135deg, rgba(59, 59, 59, 0.4) 0%, rgba(0, 0, 0, 0.0001) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
    -webkit-animation: rotate360 5s infinite linear;
    animation: rotate360 5s infinite linear;
}
.radar-bg > div {
    position: absolute;
    overflow: hidden;
}
.radar-bg > div:nth-child(1) {
    left: 50%;
    top: 20%;
    width: 30%;
    height: 60%;
    transform: translate(-50%, -50%);
}
.radar-bg > div:nth-child(2) {
    left: 65%;
    top: 50%;
    width: 65%;
    height: 130%;
    transform: translate(-50%, -50%) scaleX(-1);
}
.radar-bg > div:nth-child(3) {
    left: 30%;
    top: 45%;
    width: 60%;
    height: 120%;
    transform: translate(-50%, -50%) ;
}
.radar-bg > div:nth-child(4) {
    left: 50%;
    top: 91%;
    width: 60%;
    height: 120%;
    transform: translate(-50%, -50%)  scaleX(-1);
}
.radar-bg > div:nth-child(5) {
    left: 65%;
    top: 100%;
    width: 30%;
    height: 60%;
    transform: translate(-50%, -50%);
}
.radar-bg > div:nth-child(6) {
    left: 25%;
    top: 100%;
    width: 40%;
    height: 80%;
    transform: translate(-50%, -50%) scaleX(-1);
}
.radar-bg > div:nth-child(7) {
    left: 40%;
    top: 50%;
    width: 30%;
    height: 60%;
    transform: translate(-50%, -50%);
}
.radar-bg > div:nth-child(1) .pointer{
    animation-duration: 2s;
}
.radar-bg > div:nth-child(2) .pointer{
    animation-duration: 30s;
}
.radar-bg > div:nth-child(3) .pointer{
    animation-duration: 10s;
}
.radar-bg > div:nth-child(4) .pointer{
    animation-duration: 20s;
}
.radar-bg > div:nth-child(5) .pointer{
    animation-duration: 7s;
}
.radar .pointer:after {
    content: "";
    position: absolute;
    width: 50%;
    bottom: -1px;
    border-top: 2px solid rgba(22, 18, 18, 0.8);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    border-radius: 9px;
}

/*************************************************** SWIPER SLIDE SHOW *********************************************************/

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background-color:none;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide a {
    width:125px;
    height:90px;
    background-image: url(../img/sprite_logos.svg);
    background-size: auto 180px;
    background-repeat: no-repeat;
    background-position-y: 0;
}
.swiper-slide a:hover {
    background-position-y: -90px;
}
.swiper-button-prev,
.swiper-button-next {
    background-image: url(../img/arrow.svg) !important;
    opacity: 0.3;
}
.swiper-button-prev {
    transform: rotateY(-180deg);
    left: 0 !important;
}
.swiper-button-next {
    right: 0 !important;
}

/********************************************* HAMBURGUER *********************************************************************/

.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    outline: none !important;
}
.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative; 
} 
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; 
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    right: 0;
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.25s;
    transition-timing-function: ease; 
}
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; 
}
.hamburger-inner::before {
    top: -50px;
}
.hamburger-inner::after {
    bottom: -30px;
    width: 20px; 
}
.hamburger-inner {
    width: 30px;
}

/** SLIDER **/

.hamburger--slider .hamburger-inner {
    top: 2px; 
}
.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; 
}
.hamburger--slider .hamburger-inner::after {
    top: 20px; 
}
.hamburger--slider.is-active .hamburger-inner {
    width: 40px;
    transform: translate3d(0, 10px, 0) rotate(45deg); 
}
.hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0; 
}
.hamburger--slider.is-active .hamburger-inner::after {
    width: 40px;
    transform: translate3d(0, -20px, 0) rotate(-90deg); 
}

/***************************************************** EXTRAS **********************************************************/

.reverse {
    padding: 0;
    unicode-bidi: bidi-override;
    direction: rtl;
}
.scroll-box {
    display: inline-flex;
    position: fixed;
    opacity: 1;
    font-size: 0.75rem;
    line-height: 2em;
    width: 52px;
    height: 24px;
    bottom: 50px;
    left: 50%;
    margin-left: -12px;
    transition: all 150ms ease-out;
}
.scroll-box-hidden {
    bottom: 100px;
    opacity: 0;
}
.arrow {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 10px;
}
.hundredthirtyfive-deg {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.ninety-deg {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
.minus-ninety-deg {
    transform: translate(-25%,0) rotate(-90deg);
    -webkit-transform: translate(-25%,0) rotate(-90deg);
}
#map {
    height: 500px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.numbercounter {
    font-family: 'Nova Mono';
    font-size: 6rem;
}
.numbercounter::before {
    content: "+";
}
.brain-wrap {
    background-image: url("/front/img/brain3.svg");
    background-size: cover;
    background-repeat: no-repeat;
    width: 425px;
    height: 490px;                                                                                                                                                                                                                                                                                     
    position: absolute;
    right: 5%;
    top: 0;
}
.no-padding-left {
    padding-left:0;
}
.numbers-margin {
    margin-top: 3rem;
}
.gray-scale {
    opacity: 0.3;
    background-position-y: -180px;
}

/************************************************** MEDIA QUERIES *********************************************************/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .gradient-numbers {
        background-image: none;
        color: #a5a14f;
    }
}
@media (max-width: 767px) {
    body, .gradientFX, header {
        background: #faec95;
        background-size: 100% 100%;
    }
    .nav-box {
        top: 7px !important;
        right: 0 !important;
        left: unset !important;
    }
    .sidenav {
        width: 50vw; 
        left: -50vw;
    }
    .img-hello {
        position: relative;
        top: 0;
        left: 0;
        max-width: 200px;
        transform: translate(0,-20%);
    }
    .mobile-bg {
        background: none;
        height: auto;
    }
    .motherboard {
        padding: 30vh 0 40vh 0;
        background-size: cover;
    }
    .h2-services {
        position: relative;
        padding-right: 3em;
    }
    .h2-services .lottie {
        height:100px;
        width: 100px;
        position: absolute;
        right: 0;
        top: 25%;
        transform: translate(0, -50%);
    }
    .team-grid-margin {
        margin: 0 -5px;
    }
    .img-team {
        opacity: 1; 
        filter: grayscale(0%);
    }
    a.icon-team {
        display: inline-block;
        margin: 0 4px;
        color: white;
    }
    h3, .h3-services {
        font-size: 1rem;
    }
    .numbercounter {
        font-size: 5em;
    }
    .brain-wrap {
        height: 575px;
        width: 238px;
        right: 0;
        background-size: 500px;
    }
    .columns > div {
        justify-content: center;
    }
    .icons-row {
        margin: -70px 0 200px 0;
    }
   

}
@media (max-width: 575px) {
    h1 {
        font-weight: 400;
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.3rem;
    }
    h3 {
        font-size: 0.7rem;
    }
    h6 {
        font-weight: 600;
    }
    .brain-title {
        font-size: 4.7rem;
        line-height: 3.7rem;
    }
    .huge {
        font-size: 200px;
    }
    .numbercounter {
        font-size: 2.5em;
    }
    .sidenav {
        width: 100vw; 
        left: -100vw;
        text-align: center;
    }
    .nav-menu {
        padding-right: 0;
    }
    .special-index {
        font-weight: 100;
        font-size: 1.3rem;
        line-height: 1.7rem;
        margin-bottom: 1.2em;
    }
    .heart-txt-l, .heart-txt-r {
        font-size: 5.3rem;
        float: none;
    }
    .heart-txt-r {
        margin-left: 30px;
    }
    .heart-pos {
        width:150px;
        height:150px;
    }
    .mobile-bg a {
        height: 80px;
    }
    .box-motherboard {
        font-size: 0.7em;
        margin: 0;
        padding-top: 0.5rem;
        border: 1px solid black;
    }
    .icon-services {
        top: -20px;
        right: 50px;
        font-size: 40px;
    }
    .brain-wrap {
        height: 400px;
        width: 120px;
        right: 0;
        background-size: 300px;
    }
    .spacing-rows-special {
        margin: 0 0 40px 0;
    }
    .icons-row {
        margin: -70px 0 40px 0;
    }
    .spacing-page-titles {
        margin: 1.5rem 0 5rem 0;
    }
    .spacing-page-titles p {
        font-size: 16px;
        line-height: 1.6rem;
    }
    .spacing-rows-work {
        margin: 1.5rem 0 2rem 0;
    }
    .spacing-page-titles .special-index,
    .spacing-rows-work .special-index {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }
    .spacing-rows-swiper {
        margin: -2.5rem 0 1.5rem 0;
    }