@font-face {
    font-family: "sfprodisplaymedium";
    src: url("../media/fonts/SF-Pro-Display-Medium.otf")
  }

@font-face {
    font-family: "sfprodisplaythin";
    src: url("../media/fonts/SF-Pro-Display-Thin.otf")
  }

@font-face {
    font-family: "sfprodisplaymediumtext";
    src: url("../media/fonts/SF-Pro-Text-Medium.otf")
  }

@font-face {
    font-family: "sfprodisplaythintext";
    src: url("../media/fonts/SF-Pro-Text-Thin.otf")
  }

  @font-face {
    font-family: "sfprodisplaybold";
    src: url("../media/fonts/SF-Pro-Display-Bold.otf")
  }


 @font-face {
    font-family: "sfprodisplayregular";
    src: url("../media/fonts/SF-Pro-Display-Regular.otf")
  }

 @font-face {
    font-family: "pairtial";
    src: url("../media/fonts/pair.otf")
  }
body {
    margin: 0;
}

div#_InnerContent {
       background: linear-gradient(152deg, white, #e0e0e0);
    border-radius: 20px;
    top: 15px;
    left: 15px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    overflow: hidden;
    grid-template-rows: 100px auto;
    display: grid;
    box-shadow: -1px -4px 17px #00000012, 11px 9px 10px #fff6, inset 0 0 0 1px #ffffff54;

}

div#_Main {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;
    display: grid;
    background: linear-gradient(0deg, #949494, #c1c1c1);
    transition: .2s;
  }

  div#_Content {
            color: #ff000000;
            border-radius: 20px;
            top: 15px;
            left: 15px;
            position: fixed;
            bottom: 0px;
            right: 15px;
            /* overflow: hidden; */
            grid-template-rows: auto 32px;
            display: grid;
  }

  .nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  div#_Nav {
     /* Margin on all sides */
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     border-radius: 20px;
     background: linear-gradient(0deg, #dadada, white, white);
     transition: .7s;
  }

div#_Footer {
    grid-template-columns: repeat(7, auto);
    display: grid;
}

div#_InnerNav {
    height: 100%;
    width: 100%;
    position: relative;
    box-shadow: 0 0 0 1px #ffffff00, inset 0 0 0 1px #ffffff14;
    border-radius: 20px;
}

div#_NavFrame {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    grid-template-columns: 60% 20px AUTO;
    display: grid;
    /* overflow: hidden; */
    border-radius: 15px;
}

div#_ColumnA {
    display: grid;
    grid-template-rows: 120px auto;
}

div#_NavigatorLeft {
    grid-template-rows: 70px auto;
    display: grid;
}

div#_NavigatorBarLeft {
    grid-template-rows: 10px auto 10px;
    display: grid;
}

div#_NavButtonBar {
    grid-template-columns: 25% 25% 25% 25%;
    display: grid;
}



._NavButton {
    text-align: center;
    font-size: 18px;
    color: #7d7d7d;
    align-items: center;
    display: grid;
    border-radius: 16px;
    transition: .05s;
    background: linear-gradient(86deg, #bcbcbc, #000000);
    -webkit-background-clip: text;
    color: transparent;
    background-clip: text;
    /* grid-template-columns: 50% 50%; */
    filter: opacity(.5);
}

div#_NavigatorContentLeft {
    display: grid;
    width: 100%;
    height: 100%;
    /* background: #e7e7e7; */
    border-radius: 16px;
    position: relative;
}

div#_ServiceButtonC {
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

div#_UpNavigatorContent {
    grid-template-columns: 304px 15px auto;
    display: grid;
    position: relative;
    transition: .2s;
}

div#_ServiceButtonA {
    border-radius: 16px;
    position: absolute;
    display: grid;
    width: 100%;
    height: 100%;
}

div#_ServiceButtonB {
    background: linear-gradient(179deg, #ff7300, #d66e00);
    border-radius: 16px;
    position: absolute;
    width: 100%;
    height: 100%;
}

div#_LogoSection {
    font-size: 87px;
    font-family: pairtial;
    /* background: linear-gradient(1deg, black, #575757); */
    /* -webkit-background-clip: text; */
    /* color: transparent; */
    grid-template-columns: auto 100px;
    display: grid;
    /* z-index: 77; */
    /* cursor: none; */
}

._GreyBar {
    background: #f9f9f9;
    border-radius: 10px;
    font-family: 'sfprodisplayregular';
    border-radius: 10px;
    letter-spacing: .5px;
}

div#_ColumnB {
    display: grid;
    grid-template-rows: 119px auto;
}

div#_NavigatorRight {
    grid-template-rows: 70px auto;
    display: grid;
}

div#_NavigatorBarRight {
    grid-template-rows: 10px auto 10px;
    display: grid;
    height: 100%;
}



div#_ServiceButtonD {
    height: 100%;
    border-radius: 16px;
    WIDTH: 100%;
}



._FooterButton {
    color: black;
    font-family: 'sfprodisplaythin';
    color: #e9e9e9;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
    align-items: center;
    display: grid;
    transition: .05s;
}

._ServiceButtonBorder {
    border-radius: 16px;
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    transition: .3s;
}

._ServiceButtonInnerCentered {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 16px;
    background: linear-gradient(0deg, #1c1c1c, black);
    vertical-align: middle;
    align-items: center;
    display: grid;
    overflow: hidden;
}

._ServiceButtonBorder:hover {
    transform: scale(1.03);
    transition: .2s;
    cursor: pointer;
    Z-INDEX: 33;
    /* box-shadow: inset 0 0 0 1px #000000, 0px 0px 0px 10px #00000008, 0px 0px 0px 4px #0000000a; */
    filter: contrast(1.1) brightness(1.11);
}

._ServiceButtonInnerText {
    height: 122px;
    grid-template-rows: 50%  34% auto;
    display: grid;
    text-align: center;
    color: white;
    z-index: 99;
    text-shadow: 0 1px 2px #00000030;
}

._ServiceButtonInnerTextUp {
    color: white;
}

div#_ServiceButtonInnerCenteredA {}

div#_ServiceButtonInnerCenteredB {
    background: linear-gradient(180deg, #ff9b37, #ffa53c);
    transition: .1s;
}

div#_ServiceButtonABorder {
    background: linear-gradient(0deg, #0057fe, #1647ff);
}

div#_ServiceButtonInnerCenteredC {
    background: linear-gradient(45deg, #838c93, #5b6366);
    transition: .1s;
    grid-template-columns: 70px auto;
}

div#_ServiceButtonCBorder {
    background: linear-gradient(45deg, #6e6e6e, #9b9b9b);
}

div#_ServiceButtonDBorder {
    background: linear-gradient(0deg, #323232, #ffffff00);
}

div#_ServiceButtonInnerCenteredD {
    transition: .1s;
}

._ServiceButtonInnerTextUp {
    font-family: 'sfprodisplaybold';
    font-size: 36px;
}

._ServiceButtonInnerTextDown {
    font-family: 'sfprodisplaythin';
    font-size: 25px;
    letter-spacing: 1px;
}

div#_ServiceButtonInnerTextC {
    text-align: left;
    margin-left: 15px;
    grid-template-rows: 50% 30%;
    float: left;
    width: 148px;
    height: fit-content;
}

div#_NavButtonA {
}

._NavButton:hover {
    color: #3d3d3d;
    transition: .1s;
    cursor: pointer;
    transform: scale(1.05);
    filter: opacity(1);
}

._FooterButton:hover {
    font-weight: bold;
    /* transform: scale(1.05); */
    cursor: pointer;
    transition: .1s;
    color: white;
}

div#_ServiceButtonInnerCenteredB:hover {
    transition: .1s;
    background: linear-gradient(180deg, #f9932e, #fd9f31);
}

div#_ServiceButtonInnerCenteredC:hover {
    background: linear-gradient(45deg, #798085, #454c4f);
    transition: .1s;
}



div#_ServiceButtonInnerCenteredD:hover {
    background: linear-gradient(0deg, #6ba3df, #0091b5);
    transition: .1s;
}

._ServiceButtonInnerCentered:hover {
    background: linear-gradient(180deg, #1c1c1c, black);
    transition: .1s;
}

div#_AccessSection {position: relative;}

div#_AccessSectionFrame {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    grid-template-columns: auto 10px auto;
    display: grid;
}

div#_AccessButtonArea {
    grid-template-rows: auto 15px auto;
    display: grid;
}

div#_AccessInputArea {
    grid-template-rows: auto 15px auto;
    display: grid;
}

div#_AccessButtonReg {
    background: #353535;
    border-radius: 6px;
    color: #bababa;
    align-items: center;
    display: grid;
    text-align: center;
    font-size: 16px;
    font-family: 'sfprodisplaythin';
    letter-spacing: 1px;
    transition: .2s;
}

div#_AccessButtonLogin {
    background: linear-gradient(123deg, #efefef, #ffffff);
    border-radius: 6px;
    color: #666666;
    align-items: center;
    display: grid;
    text-align: center;
    font-size: 18px;
    font-family: 'sfprodisplayregular';
    letter-spacing: 0.2px;
    box-shadow: inset 0 0 0 1px #ffffff, 1px 4px 8px 0px #00000014;
    transition: .15s;
    cursor: pointer;
}

div#_AccessInputAreaTop {
    grid-template-columns: 12% auto;
    display: grid;
    align-items: center;
}

div#_AccessInputTextArea {
    background: #dedede;
    border-radius: 8px;
    color: black;
    text-align: center;
}

input#_emailInput {
    background: #f1f1f1;
    border-radius: 8px;
    color: black;
    text-align: center;
    border: none;
    font-size: 16px;
}

input#_passwordInput {
    background: #f1f1f1;
    border-radius: 8px;
    color: #000000;
    text-align: center;
    border: none;
    font-size: 15px;
}

div#_AccessInputAreaBottom {
    grid-template-columns: 12% auto;
    display: grid;
}

div#_LogoCanvasSection {
    border-radius: 16px;
    position: relative;
    width: 100px;
    height: 100px;
    margin: auto;
}

div#_DownNavigatorContent {
    grid-template-columns: auto 15px 35%;
    display: grid;
}

div#_ServiceButtonEBorder {
    background: linear-gradient(45deg, #ffffff, #b3b3b3);
    box-shadow: 0px 0px 0px 0px #00000008, 0px 0px 0px 0px #0000000a, inset 0 0 0 1px #00000033;
}

div#_ServiceButtonInnerCenteredE {
    background: linear-gradient(45deg, #e8e8e8, #bcbcbc);
}

._ServiceButtonInnerIconHorizontal {
    float: left;
    background-image: url(../media/icons/statistics.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: -webkit-fill-available;
    height: 138px;
    background-size: contain;
    margin: auto;
    width: 171px;
    z-index: 7;
    margin-left: -44px;
}

div#_ServiceButtonInnerTextF {
    grid-template-rows: 50% auto;
}

div#_InsetNavigatorBarRight {
    grid-template-columns: 10% auto;
    display: grid;
    height: 47px;
}

input#_searchInput {
    background: no-repeat;
    border: none;
    font-family: 'sfprodisplaythin';
}

div#_PageOverFrame {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 999;
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    transition: .3s;
    border-radius: 14px;
    background-size: contain;
    /* box-shadow: 0 0 0 9px red; */
    /* top: 111px; */
    /* background: #f80a0a; */
}


#_PageOverFrame.invisible{
    filter: opacity(0);
    transition: .3s;
    transform: translate(0px, 10px);
}

._servicePageButton {
    color: #000000;
    font-family: 'sfprodisplayregular';
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    grid-template-columns: 45px auto;
}

div#_servicePageHeader {
    grid-template-columns: 190px auto;
    display: grid;
}

div#_servicePageTemplate {
    display: grid;
    grid-template-rows: 49px auto;
}

div#_servicePageContent {
    display: grid;
    grid-template-columns: 100%;
    display: grid;
    border-radius: 14px 0 16px 16px;
    background: linear-gradient(0deg, #b5b5b5, #d0d0d0, #b5b5b5, #f7f7f7);
    position: relative;
    width: 100%;
    height: 100%;
}

._servicePageText {
    /* margin: auto; */
    background: linear-gradient(0deg, black, #ffefef);
    -webkit-background-clip: text;
    color: transparent;
    cursor: pointer;
    font-family: 'sfprodisplayregular';
    font-size: 23px;
    transition: .1s;
    height: 100%;
    display: grid;
    align-items: center;
    width: fit-content;
    letter-spacing: .4px;
}

div#_servicePageContentTittle {
    color: white;
    font-family: 'sfprodisplaythin';
    font-size: 40px;
}

b#_boldTittle {
    font-family: 'sfprodisplaybold';
}

div#_servicePageContentTittle {
    display: grid;
    align-items: center;
}

div#_servicePageContentLeft {
    grid-template-rows: 20% auto;
    display: grid;
}

div#_servicePageContentTittleText {
    margin-left: 43px;
}

._servicePageButton.selected {
    cursor: default;
    filter: opacity(0.1);
    background: radial-gradient(#013857, #001a27, #000000, #000000);
    text-shadow: 0 0 16px white;
}



div#_servicePageContentButtonFullServices {
    /* background: red; */
    /* width: 100%; */
    /* height: 100%; */
    position: absolute;
    top: 10px;
    left: 40px;
    right: 10px;
    bottom: 20px;
    grid-template-rows: 50% 15px auto;
    display: grid;
}

._servicePageContentButton {
    border-radius: 12px;
    backdrop-filter: blur(4px);
    background: linear-gradient(45deg, #ffffff12, #003a6545);
    display: grid;
    width: 580px;
    transition: .1s;
}

._servicePageContentButtonBorder {
    position: relative;
    display: grid;
    /* background: linear-gradient(45deg, #030303, #00c1ff00); */
    border-radius: 12px;
}

._servicePageContentButtonover {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(45deg, #000000, transparent);
    display: grid;
    border-radius: 12px;
    grid-template-columns: 25% auto;
}

._servicePageContentButtonTextDescription {
    color: #ffffffc7;
    font-family: 'sfprodisplayregular';
    font-size: 14px;
    letter-spacing: .1px;
    text-align: justify;
    width: 97%;
    background: linear-gradient(275deg, #ffffffb3, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
}

._servicePageContentButtonTextArea {
    font-family: 'sfprodisplayregular';
    font-size: 21px;
}

b {}

b#_bold {
    font-family: 'sfprodisplaybold';
}

._servicePageContentButtonTextTittle {
    grid-template-rows: 6px 64% 8px auto;
    display: grid;
    
}

._servicePageContentButton:hover {
    transform: scale(1.01);
    transition: .1s;
    cursor: pointer;
    background: linear-gradient(45deg, #ffffff78, #003a654d);
}

._servicePageContentButtonTextAreaTiTTLE {
    background: linear-gradient(261deg, #0087ff, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
}

._PageOverFrameGrad {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: grid;
    border-radius: 14px;
    background-image: url(./media/bgs/appprototype.png);
    overflow: hidden;
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
}

#_Main.invisible{
    filter: opacity(0);
    transform: .05s;
}

div#_Main.darkVersion {
    background: linear-gradient(269deg, #0f0f0f, #000000);
}

div#_Nav.darkVersion {
    background: linear-gradient(287deg, #000000, black);
    transition: .5s;
}


._ServiceButtonBorder.invisible {
    filter: opacity(0.0);
    transform: translate(-5px, 0px);
    transition: .3s;
}


div#_LogoSectionText {
}

._LogoSectionLetter {
    float: left;
    transition: 0.3s;
    background: linear-gradient(1deg, black, #575757);
    -webkit-background-clip: text;
    color: transparent;
    z-index: 77;
    position: relative;
}


._LogoSectionLetter.invisible {
    filter: opacity(0);
    transition: .3s;
    transform: translateY(5px);
}

div#_AccessButtonLogin:hover {
    transform: scale(1.05);
    transition: .2s;
    filter: brightness(.96);
}

div#_ServiceButtonEBorderE:hover {
    box-shadow: 0px 0px 0px 10px #00000008, 0px 0px 0px 4px #0000000a, inset 0 0 0 1px #00000033;
}

div#_ServiceButtonEBorder:hover {
    box-shadow: 0px 0px 0px 10px #00000008, 0px 0px 0px 4px #0000000a, inset 0 0 0 1px #00000033;
}

div#_AccessButtonReg:hover {
    transform: scale(1.05);
    transition: .2s;
    filter: brightness(.96);
    cursor: pointer;
}
._servicePageLogoSpace {
    background: #f6f6f6;
}

div#_servicePageHeaderButtons {
    grid-template-columns: auto auto auto;
    display: grid;
    background: linear-gradient(45deg, #f6f6f6, #f6f6f6);
    border-radius: 16px 16px 0 0;
}

._servicePageLogoSpaceOver {
    background: white;
    height: 100%;
    border-radius: 0 0 16px 0;
}

._shaderbg {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: red; */
}

._overshaderbg {
    background: linear-gradient(135deg, #000000, #0000003d, transparent);
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: inset 0 0 30px 14px #0000008a;
}

iframe {
    width: 100%;
    height: 100%;
}

._KeeperShaderBg {
    position: absolute;
    width: 100%;
    height: 100%;
}

._OverShaderBg {
    width: 100%;
    height: 100%;
    background: linear-gradient(182deg, #005cffbd, #004c97a1, #00a2ff91, #023c5400);
    position: absolute;
    box-shadow: inset 0 0 16px #004b8b;
}

div#_orangeShaderSpace {
    position: absolute;
    width: 100%;
    height: 100%;
}

div#_overOrangeBt {
    background: linear-gradient(8deg, #ff850096, #ff63004f), radial-gradient(transparent, #ffaf00b3);
    width: 100%;
    position: absolute;
    z-index: inherit;
    height: 100%;
}

._ShaderSpaceDataAnalysis {
    position: absolute;
    width: 100%;
    height: 100%;
}

._overShaderGrad {
    background: linear-gradient(91deg, #838c93, #888f94e3, #878787d4, #5b636687);
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: inset 0 0 10px 6px #7f878e;
}

._logoLayer {
    height: 100%;
    width: 100%;
    position: absolute;
}

div#_LogoA {
    background-image: url(../media/images/A.png);
    background-size: cover;
    background-position: center;
    animation-name: rotation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

div#_LogoB {
    background-image: url(../media/images/B.png);
    background-size: cover;
    background-position: center;
    animation-name: rotation;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

div#_LogoC {
    background-image: url(../media/images/C.png);
    background-size: cover;
    background-position: center;
    animation-name: rotation;
    animation-duration: 16s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

div#_LogoD {
    background-image: url(../media/images/D.png);
    background-size: cover;
    background-position: center;
    animation-name: rotation;
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


@keyframes rotation {
    0% {
        transform: rotate(-720deg);
    }

    to {
        transform: rotate(0deg)
    }
}

@keyframes flash {
    0% {
        filter: opacity(1) grayscale(0) brightness(2);
    }

    50% {
        filter: opacity(0.8) grayscale(.5)  brightness(1);
    }

      100% {
        filter: opacity(1) grayscale(0) brightness(2);
    }
}



._servicePageText:hover {
    color: white;
    font-weight: lighter;
    -webkit-background-clip: text;
    color: transparent;
    transition: .2s;
    filter: opacity(0.9);
}

._servicePageTextIcon {
    background-image: url(./media/icons/statistics.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 100%;
    position: relative;
    background-size: cover;
    float: left;
    filter: invert(1) opacity(0.6);
}

._btCentContainer {
    /* display: grid; */
    height: 100%;
    width: 80%;
    margin: auto;
}

._servicePageText.selected {
    filter: grayscale(0);
    letter-spacing: 0px;
    background: linear-gradient(0deg, black, #868686);
    -webkit-background-clip: text;
    color: transparent;
    cursor: pointer;
}

div#_OverInfoPanelServices {
    position: absolute;
    top: 20px;
    left: 10px;
    bottom: 20px;
    right: 20px;
    border-radius: 10px;
    /* height: 100%; */
    box-shadow: -11px 1px 66px 10px #d8d8d8;
}

div#_ListOfServices {
    display: grid;
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    bottom: 0px;
    overflow: hidden;
}

div#_InfoOfServices {
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
}

div#_OverInfoPanelGradBord {
    display: grid;
    background: linear-gradient(0deg, #6259a6, #807ba9, #ffffff63, #ffffff42, #ffffff2b, #ffffff17);
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 10px;
}

div#_OverInfoPanelInside {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(0deg, #2c2a31, #0b0b0b);
    border-radius: 10px;
    box-shadow: inset 0 0 33px -3px #ffffff14;
}

div#_ContentInnnerMargin {
    position: absolute;
    top: 20px;
    left: 30px;
    right: 25px;
    bottom: 20px;
}

div#_ContentInnnerTitttle {
    color: white;
    font-family: 'sfprodisplaymediumtext';
    font-size: 47px;
    background: linear-gradient(180deg, #ffffff, #ffffff, #707070);
    -webkit-background-clip: text;
    color: transparent;
}

div#_ContentInnnerTag {
    color: #ffffff6b;
    font-family: 'sfprodisplaythin';
    font-size: 21px;
    letter-spacing: 0.34px;
    background: linear-gradient(0deg, #ffffffcc, #ffffff85);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
}

div#_ContentSeparatorLine {
    background: linear-gradient(45deg, #ffffff, #ffffff78, #ffffff12, transparent, transparent);
    height: 1px;
    margin-top: 11px;
    margin-bottom: 29px;
}

div#_ContentInnnerDescription {
    font-size: 18px;
    color: #ffffff9c;
    font-family: 'sfprodisplaythin';
    letter-spacing: 1px;
    text-align: justify;
}

#_ContentInnnerDescription b {
    color: white;
}

div#_ContentCategorySite {
    width: 100%;
    height: 50px;
    background: linear-gradient(45deg, #00000033, transparent);
    margin-top: 25px;
}

div#_ContentInfoDudas {
    color: white;
    font-family: 'sfprodisplaythin';
    letter-spacing: .6px;
    display: grid;
    align-items: center;
}

div#_BotonAsesoriaGratis {
    background: linear-gradient(45deg, black, transparent);
    padding: 7px;
    border-radius: 23px;
    color: white;
    font-family: 'sfprodisplaythin';
}

div#_ContentInfoAdapt {
    grid-template-columns: 60% 52%;
    display: grid;
    bottom: 0;
    position: absolute;
}
._ListOfServicesInner {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-template-rows: 75px auto;
}

._ServiceButton {
    border-radius: 16px;
    width: 313px;
    height: 327px;
    float: left;
    filter: opacity(1);
    transition: .3s;
}

._ServiceButton.invisible {
    filter: opacity(0);
    transition: .3s;
    transform: translate(0px, 10px);
}

._ServiceButtonInset {
    position: relative;
    height: 100%;
    width: 100%;
    /* margin-top: 27px; */
}

._ServiceButtonOver {
    position: absolute;
    top: 20px;
    bottom: 0px;
    left: 15px;
    right: 15px;
    background: linear-gradient(0deg, #5b1c6640, #1a1a1a, #311827eb, #fff5c40d, #ffffff03);
    border-radius: 16px 16px 20px 16px;
    transition: .15s;
    cursor: pointer;
    box-shadow: 0 0 0 1px #242424;
    filter: brightness(1)  grayscale(.3);
}

._ServiceButtonOverInset {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    background: linear-gradient(0deg, #181818, #1e1121, #0a0a0a, #090709);
    border-radius: 16px 16px 20px 16px;
    grid-template-rows: 100% auto;
    display: grid;
    overflow: hidden;
}

._ServiceButtonImage {
        background: linear-gradient(180deg, #330139, #210820, #150c18, #0e0e0e);
        box-shadow: 0px 10px 20px 0px #00000073, 0px -10px 10px 0px #ffffff0d, inset 0 -1px #ff22cf0a, inset 0 1px #8730b352, 0 -1px #0a0a0a, 0 -2px #ffffff00;
        border-radius: 10px;
        height: 165px;
        background-size: contain;
        background-repeat: no-repeat;
        display: grid;
}

._ServiceButtonInnerMargin {
    position: relative;
    /* background: linear-gradient(45deg, black, transparent); */
}

._ServiceButtonInnerMarginInset {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    grid-template-rows: 180px auto;
}

._zStack {
    position: absolute;
    height: 100%;
    width: 100%;
}

div#_ServicesLayers {position: relative;}

div#_InfoAreaPanel {
    right: 0;
    z-index: 99;
    width: 572px;
    /* display: none; */
    position: absolute;
    height: 87.5%;
    transition: .2s;
    bottom: 0;
}
._ServiceButtonOver:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px #a1a1a108, 0 0 0 10px #5a5a5a08, 0 0 0 19px #81818108, 0 10px 10px #b3009b0d;
    filter: brightness(1.2) grayscale(0);
    background: linear-gradient(0deg, #f19fe082, #ad4b9c82, #ed8aff38, #843da738, #311827eb, #fff5c40d, #ffffff03);
}
._ServiceButtonTittleTextArea {
    color: white;
    font-family: 'sfprodisplaythin';
    letter-spacing: .5px;
    grid-template-rows: 20px 64px;
    display: grid;
}

._ServiceButtonTittleTextTitle {
    font-family: 'sfprodisplayregular';
    letter-spacing: .7px;
    font-size: 16px;
    background: linear-gradient(1deg, #dddddd, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
    width: fit-content;
}

._ServiceButtonTittleTextDescription {
    font-size: 16px;
    letter-spacing: 1.6px;
    font-family: 'sfprodisplaythin';
    color: #cdcdcd;
    margin-top: 8px;
    text-align: justify;
    text-shadow: 0 2px 3px black;
    border-radius: 2px;
    width: 90%;
}

._ServiceButtonTittleTags {
    /* grid-template-rows: 49px 22px; */
    display: grid;
}

._ServiceButtonSeePortfolio {
    padding: 4px 9px 4px 4px;
    font-size: 13px;
    letter-spacing: 1.5px;
    border-radius: 28px;
    float: left;
    transition: .2s;
    width: 75%;
    height: 24px;
    align-items: center;
    display: grid;
    text-align: center;
    background: linear-gradient(138deg, #49255fc7, #180011);
    position: relative;
    box-shadow: -6px -5px 11px 0px #00000042, 3px 4px 11px 2px #ffffff0d;
}



._ServiceButtonSeePortfolio:hover {
    color: black;
    font-weight: bold;
    transition: .2s;
    box-shadow: inset 0 0 0 1px #ffffff1f, 0 0 0 3px #ffffff0d, 0 0 0 8px #ffffff05, 0 0 0 13px #91919105;
    background: linear-gradient(66deg, #ffffff30, #32001e, #ffffff30);
}



._ServiceButtonTagInfo {
    float: left;
    font-size: 12px;
    letter-spacing: 1.5px;
    border-radius: 15px;
    background: linear-gradient(45deg, black, transparent);
    padding: 5px;
    position: absolute;
    background: red;
    top: 1px;
}

._ServiceButtonBottomArea {
    /* text-align: center; */
    align-items: center;
    display: grid;
    position: relative;
    grid-template-columns: 40px 11px 76px;
}

._ServiceButtonTagBorder {
    background: linear-gradient(45deg, black, transparent);
    border-radius: 31px;
    position: relative;
    display: grid;
}

._ServiceButtonTagButton {
    grid-template-columns: 35px 6px 71px;
}

._ServiceButtonTagInfoInset {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(45deg, #25222c, #413954);
    text-align: center;
    align-items: center;
    display: grid;
    font-size: 11px;
    letter-spacing: 1.5px;
    border-radius: 27px;
    box-shadow: inset 0 -1px 0 1px #0000001f;
    z-index: 44;
}

._ServiceButtonTagInfoBorder {
    background: linear-gradient(0deg, #181818f7, #4d4d4d);
    height: 11px;
    display: grid;
    position: relative;
    padding: 4px;
    border-radius: 21px;
}

._ServiceButtonListMA {
    width: 78%;
    height: 327px;
}

._ServiceUpperNavMA {
    background: linear-gradient(0deg, #1e1e1e, black);
    border-radius: 13px 50px 50px 13px;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    display: grid;
    grid-template-columns: 300px auto 300px;
}

._ServiceUpperNavMABorder {
    position: relative;
    background: linear-gradient(360deg, #ffffff2e, #ffffff3b, #ffffff1c, transparent);
    border-radius: 13px 30px 30px 13px;
    z-index: 99;
}

._AsesoramientoButtonMA {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: linear-gradient(360deg, #4f4f4f, transparent);
    border-radius: 8px;
    transition: .2s;
    cursor: pointer;
}

._AsesoramientoButton {
    position: relative;
}

._AsesoramientoButtonMAinset {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(0deg, #292929, #121212e0, #121212);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 50px auto;
}

._CompareServicesButton {
    position: relative;
    border-radius: 51px;
}

._AsesoramientoButtonMAinset.round {
    border-radius: 36px;
}

._AsesoramientoButtonMA.round {
    border-radius: 36px;
    background: linear-gradient(360deg, #4f4f4f, transparent);
}

._SearchServices {
    position: relative;
}

._SearchServicesButton {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: linear-gradient(360deg, #4f4f4f, transparent);
    border-radius: 8px;
    transition: .2s;
    cursor: text;
}

._SearchServicesButtonInset {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(0deg, #292929, #121212e0, #0e0e0e);
    border-radius: 8px;
    color: white;
}

._AsesoramientoButtonMAinsetTextArea {
    color: #ffffffd6;
    font-family: 'sfprodisplayregular';
    grid-template-rows: 50% 40%;
    display: grid;
    align-items: center;
}

._AsesoramientoButtonMAinsetTextArea.round {
    align-items: center;
    display: grid;
    grid-template-rows: 100%;
}

._AsesoramientoButtonMA:hover {
    transform: scale(1.015);
    box-shadow: 0 0 0 3px #6363630d, 0 0 0 8px #ffffff05, 0 0 0 19px #ffffff0d;
    filter: brightness(1.2);
    background: linear-gradient(360deg, #777777, #ffffff3d, #ffffff29);
}

._AsesoramientoButtonMAinset:hover {
    background: linear-gradient(180deg, #1a1a1a, #2D2D2D, #353535);
}

._SearchServicesButton:hover {
    transform: scale(1.01);
    box-shadow: 0 0 0 3px #6363630d, 0 0 0 8px #ffffff05, 0 0 0 19px #ffffff0d;
    filter: brightness(1.2);
    background: linear-gradient(360deg, #666666, #323232);
}

._FavouriteService {
    right: -3px;
    border-radius: 16px;
    background: linear-gradient(360deg, #0e0e0e, #212121, #3f3f3f80, #212121);
    height: 30px;
    width: 30px;
    float: right;
    position: absolute;
    box-shadow: 0 0 0 1px #0000002b;
}

._FavouriteServiceInset {
    background: linear-gradient(0deg, #2b2b2b, #1c1c1c, #121212);
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border-radius: 25px;
}

._ServiceButtonInnerGradient {
    position: absolute;
    background: radial-gradient(#6b0055, #510040d1, #2b0022, #25001db5, #25001d47, #2514218c, transparent, transparent);
    width: 140%;
    height: 150px;
    bottom: -80px;
    left: -50px;
    filter: opacity(.4);
}

._ServiceButtonSeePortfolioInset {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(90deg, #2c1527, #1e0323);
    border-radius: 43px;
    align-items: center;
    display: grid;
}

._SearchServicesButtonInsetIcon {
    background-image: url(../media/icons/search.svg);
    width: 31px;
    height: 124%;
    background-size: cover;
    filter: invert(1) opacity(0.2);
    background-position: center;
    margin-left: 5px;
}

._FavouriteServiceInsetIcon {
    background-image: url(../media/icons/fav.png);
    width: 18px;
    height: 18px;
    margin: auto;
    margin-top: 4px;
}

._AsesoramientoButtonMAinsetIconArea {
        background-image: url(../media/icons/consulta.png);
        width: 37px;
        height: 36px;
        margin: auto;
}

._AsesoramientoButtonMAinsetTextIcon {
    background-image: url(../media/icons/tabla.png);
    width: 21px;
    height: 22px;
    margin: auto;
}

._ServiceButtonImageInnerMainIcon {
    border-radius: 10px;
    height: 144px;
    margin: auto;
    background-image: url(../media/images/bigphone.png);
    background-repeat: no-repeat;
    display: grid;
    animation-name: flash;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-position: center;
}

._ServiceButtonImageInnerMainIcon.phone {
    width: 98px;
    background-image: url(../media/images/bigphone.png);
}

._ServiceButtonImageInnerMiniIcon {
    background-image: url(../media/icons/love.png);
    background-repeat: no-repeat;
    width: 36px;
    height: 30px;
    margin: auto;
    filter: opacity(0.8);
    animation-name: flash;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    background-position: center;
}

._ServiceMiniIconImage {
    position: absolute;
    width: 41px;
    height: 41px;
    background-image: url(../media/icons/devservice.png);
    right: 5px;
    top: 5px;
}

._ServiceMiniIconImage.prototype {
    background-image: url(../media/icons/conceptualservice.png);
}

._ServiceButtonImageInnerMiniIcon.laptop {
    background-image: url(../media/icons/cloud.png);
    width: 33px;
    height: 33px;
}

._ServiceButtonImageInnerMiniIcon.fast {
    background-image: url(../media/icons/fast.png);
    width: 187px;
    height: 92px;
}

._ServiceButtonImageInnerMainIcon.hybrid {
    background-image: url(../media/images/bighybrid.png);
    width: 187px;
    height: 92px;
}

._ServiceButtonImageInnerMainIcon.laptop {
    background-image: url(../media/images/biglaptop.png);
    height: 108px;
    width: 144px;
}

._ServiceButtonImageInnerMiniIcon.focus {
    background-image: url(../media/icons/creative.png);
    width: 25px;
    height: 37px;
}

div#_ContactFrame {
    height: 100%;
    width: 100%;
    background: #181818;
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #060606;
    display: none;
}

div#_OverShaderBg {
    position: absolute;
    height: 100%;
    width: 100%;
    box-shadow: inset 0 0 10px 12px black;
    display: grid;
    grid-template-columns: 40% auto;
    border-radius: 16px;
}

div#_OverShaderFormAreaInner {
    background: linear-gradient(0deg, #060606eb, #313131a1);
    backdrop-filter: blur(20px);
    display: grid;
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    border-radius: 20px 12px 12px 20px;
    box-shadow: inset 0 0 0 1px #ffffff14;
}

div#_OverShaderFormAreaInner {}

div#_OverShaderFormArea {
    position: relative;
    display: grid;
}

div#_OverShaderTextArea {
    grid-template-rows: 170px 104px;
}

div#_OverShaderTextAreaUpperCompanyName {
    color: white;
    font-family: 'sfprodisplaythin';
    font-size: 89px;
    text-align: center;
    letter-spacing: 2px;
}

div#_OverShaderTextAreaUpperCompanySlogan {
    color: white;
    position: relative;
    align-items: center;
    display: flow;
    font-family: 'sfprodisplaythin';
    font-size: 27px;
    text-align: center;
    letter-spacing: 1px;
}

div#_OverShaderTextAreaUpperContactTagg {
    color: white;
    font-family: 'sfprodisplaythin';
    text-align: center;
    letter-spacing: 39.5px;
    font-size: 20px;
    left: 17px;
}

div#_DescriptionArea {
    color: white;
    width: 377px;
    margin: auto;
    text-align: justify;
    font-family: 'sfprodisplaythin';
    letter-spacing: 1px;
    top: 0;
    position: absolute;
    margin-left: 68px;
    font-size: 20px;
}

div#_OverShaderTextAreaUpperCompanySloganFast {
    width: 66%;
    height: 2px;
    background: linear-gradient(275deg, white, #ffffff4f, #ffffff1a, #ffffff00, transparent);
    margin: auto;
    margin-left: 72px;
}

div#_OverShaderFormAreaInnerMargin {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    grid-template-columns: 35% auto;
    display: grid;
}

div#_OverShaderFormAreaInnerLeft {
    grid-template-rows: 251px;
    display: grid;
}

div#_OverShaderFormAreaInnerPhotoBt {
    width: 60%;
    height: 60%;
    border-radius: 137px;
    background: linear-gradient(190deg, #272727, #0e0e0e);
    margin: auto;
    position: relative;
    box-shadow: 0 -1px 0 1px #0000001f;
}

div#_OverShaderFormAreaInnerPhotoArea {
    display: grid;
}

._FormTextTag {
    color: white;
    font-family: 'sfprodisplaythin';
    letter-spacing: 1px;
    text-align: center;
}

._FormReasonMenuSelector {
    position: absolute;
    top: 35px;
    left: 10px;
    right: 10px;
    bottom: 20px;
    display: grid;
}

div#_OverShaderFormAreaInnerReasonOfMessageArea {
    position: relative;
}

._FormReasonMenuSelectorBt {
    background: linear-gradient(180deg, #00000000, #ffffff0d, #ffffff30);
    margin: 6px;
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: .2s;
    filter: brightness(0.8);
}

._FormReasonMenuSelectorBt.selected {
    background: linear-gradient(180deg, #ffffff, #919191);
    filter: brightness(1);
}

._FormReasonMenuSelectorBtInnerGrad {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(180deg, #00000038, #12121294, #232323);
    border-radius: 11px;
    color: white;
    font-family: 'sfprodisplaythin';
    text-align: center;
    align-items: center;
    letter-spacing: 1px;
    display: grid;
}

._FormReasonMenuSelectorBtInnerGrad.selected {
    background: linear-gradient(0deg, #6b6a6a, white);
    color: #1e1e1e;
    align-items: center;
    display: grid;
    font-family: 'sfprodisplaymedium';
}

._FormReasonMenuSelectorBtInnerGrad {}

._FormReasonMenuSelectorBt:hover {
    transform: scale(1.05);
    transition: .15s;
    box-shadow: inset 0 0 0 1px #f5f5f51f, 0 0 0 4px #ffffff05, 0 0 0 10px #93939305, 0 0 0 16px #b5b5b503;
    filter: brightness(1.2);
}

._FormReasonMenuSelectorBt.selected:hover {
    cursor: default;
    transform: none;
    box-shadow: none;
    filter: none;
}

div#_OverShaderFormAreaInnerPhotoBtInsetBorder {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(0deg, #212121, black);
    border-radius: 108px;
    display: grid;
}

div#_OverShaderFormAreaInnerPhotoBtInsetMiniIconArea {
    width: 40px;
    height: 40px;
    background: linear-gradient(0deg, #1c1c1c7a, #0202026b, #040404);
    border-radius: 34px;
    margin: auto;
    box-shadow: inset 0 1px 0 1px #ffffff0d, inset 0 -1px 0 1px #00000033;
    transition: .2s;
}

div#_OverShaderFormAreaInnerPhotoBtInsetMiniIconArea:hover {
    transform: scale(1.1);
    cursor: pointer;
    box-shadow: inset 0 1px 0 1px #ffffff0d, inset 0 -1px 0 1px #00000033, 0 0 0px 3px #69696903, 0 0 0px 12px #7d7d7d03, 0 0 0px 22px #79797903;
    transition: .15s;
    filter: brightness(1.5);
}

div#_OverShaderFormAreaInnerPhotoBt:hover {
    filter: brightness(1.2);
}

div#_ProductsNavRight {
    width: 100%;
    height: 100%;
    background: #e7e7e7;
    border-radius: 16px;
    grid-template-rows: 55% 45%;
    display: grid;
}

div#_ProductsNavLeft {
    width: 100%;
    height: 100%;
    position: absolute;
    grid-template-columns: 33.333% 33.333% 33.333%;
    display: grid;
    grid-template-rows: auto auto;
}

div#_ProductsNavInnerButtonMargin {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: red;
    border-radius: 16px;
}

div#_ProductsNavInnerButton {
    position: relative;
}

div#_ProductsPreview {
    position: relative;
    border-radius: 16px;
}

div#_ProductsPreviewInnerMargin {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    background: red;
    border-radius: 16px;
}

div#_ProductsDescriptionInnerMargin {
    background: red;
    position: absolute;
    top: 0px;
    left: 15px;
    right: 15px;
    bottom: 20px;
    border-radius: 16px;
}

div#_ProductsDescription {
    position: relative;
}

._NavButton.selected {
    background: linear-gradient(345deg, #ffffff, #cccccc36);
    box-shadow: inset 0px 1px 0 1px #f8f8f8, inset -1px -1px 0 1px #f7f7f7;
    color: #565656;
    transform: scale(1.05);
    font-size: 19px;
    align-items: center;
    display: grid;
    color: #3d3d3d;
    filter: opacity(1);
}

div#_UpNavigatorContent.invisible {
    filter: opacity(0);
    transform: translate(0px, 20px);
}

#_OverUpNavigatorContentLeft.invisible{
    display: none;
}
#_OverUpNavigatorContentRight.invisible{
    display: none;
}


#_DownNavigatorContent.invisible {
    filter: opacity(0);
    transform: translate(0px, 20px);
}

#_NavigatorContentRight.invisible {
    display: none;
}

div#_OverUpNavigatorContentLeft.invisible {
    display: none;
}


div#_NosotrosNavLeft {
    width: 100%;
    height: 100%;
    position: absolute;
    grid-template-columns: 33.333% 33.333% 33.333%;
    display: grid;
}

._NosotrosNavBt {position: relative;}

._NosotrosNavBtInnerMargin {
    top: 20px;
    left: 20px;
    FONT-WEIGHT: 200;
    bottom: 20px;
    right: 20px;
    position: absolute;
    background: #d9d9d9;
    border-radius: 16px;
}

div#_NosotrosNavRight {
    width: 100%;
    height: 100%;
    background: #e7e7e7;
    border-radius: 16px;
    grid-template-columns: 25% 45%;
    display: grid;
    position: relative;
}

div#_NosotrosNavRightInnerMargin {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-template-rows: 111px auto;
    color: black;
    font-family: 'sfprodisplayregular';
}

div#_NosotrosPhoto {
    width: 100px;
    height: 100px;
    background: linear-gradient(0deg, #bbbbbb, transparent);
    border-radius: 78px;
}

div#_NosotrosNombre {
    color: black;
    font-size: 20px;
}

div#_NosotrosDatosArea {
    font-family: 'sfprodisplaymedium';
    color: black;
}

div#_NosotrosEdad {
    float: left;
    margin-right: 7px;
}

div#_NosotrosProfesion {
    color: #797979;
}

div#_TopArea {
    grid-template-columns: 100px 15px auto;
    display: grid;
}

._ServiceButton.unselected {
    filter: opacity(0.2) grayscale(1);
    transform: translate(0px, 50px);
}

._ServiceButton.unselected:hover {
    filter: opacity(.5) grayscale(1);
}

div#_InfoAreaPanel.invisible {
    filter: opacity(0);
    display: none;
}

div#_ContentInnnerClose {
    color: #ffffff85;
    font-family: 'sfprodisplaythin';
    letter-spacing: 1px;
    box-shadow: inset 0 0 0 1px #ffffff38, 0 0 0 1px #353535;
    width: 69px;
    text-align: center;
    border-radius: 5px;
    padding-left: 6px;
    font-size: 15px;
    padding-right: 6px;
    padding-bottom: 2px;
    transition: .15s;
    margin-bottom: 29px;
}

div#_ContentInnnerClose:hover {
    cursor: pointer;
    color: white;
    box-shadow: inset 0 0 0 2px #ffffff7d, 0 0 0 5px #ffffff08, 0 0 0 12px #ffffff05;
}

._ServiceUpperNavMABorder.invisible {filter: opacity(0);}


div#_gradientbar {
    width: 312px;
    height: 14px;
    background: linear-gradient(279deg, #ff8d00, #ffbc00, #fad07d, #ffffff00, #ffffff00);
    margin-left: 3.2px;
    margin-top: 73.5px;
    transform: skewX(-11deg);
    z-index: 2;
    position: absolute;
    letter-spacing: 0px;
}

div#_logopairtial {
    font-family: pairtial;
    font-size: 94px;
    letter-spacing: -13px;
    word-spacing: 6px;
    z-index: 4;
    position: relative;
    width: fit-content;
    color: black;
}
div#engranajelogo {
    font-size: 15.2vh;
    text-align: center;
    width: 17vh;
    text-align: center;
    margin-left: 129px;
    margin-top: -6.4vh;
    position: absolute;
    height: 5.8vh;
    width: 18vh;
    overflow: hidden;
    padding-top: 10px;
}


div#engranajelogodentro {
    font-size: 100px;
    text-align: center;
    background: linear-gradient(45deg, #ff8100, #fbbc09);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 100px;
    width: 100px;
    overflow: hidden;
    animation-name: rotation;
    animation-duration: 33s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    padding-top: 10px;
}
#_cajalogoHOME {
    width: 404PX;
    height: 25vh;
    /* margin: auto; */
    font-family: pairtial;
    margin-left: -59px;
}
div#logoCentrado {
    width: 100px;
    height: 100px;
    margin: auto;
}

input#_searchInput::placeholder {
    color:red;
}

input#_passwordInput::placeholder{
    color:#b2b2b2;
}

input#_emailInput::placeholder{
    color:#b2b2b2;
}

div#_NavButtonA.selected:hover {
    /* transform: none; */
}

._NavButtonTextandIco {width: fit-content;margin: auto;}

._NavButtonIco {
    float: left;
    width: 21px;
    background-image: url(../media/icons/services.png);
    background-size: cover;
    background-position: center;
    height: 21px;
    margin-top: 1px;
}

._NavButtonText {
    float: left;
    margin-left: 5px;
    /* margin-top: 5px; */
}

input#_searchInput::placeholder {
    color: #939393;
}

input#_searchInput::placeholder {
    color: #e1e1e1;
}

._AccessButtonLoginText {
    background: linear-gradient(86deg, #c9c9c9, #414141);
    -webkit-background-clip: text;
    color: transparent;
}

._AccessButtonLoginText.Reg {
    background: linear-gradient(180deg, #cbcbcb, #b1b1b1);
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'sfprodisplayregular';
    font-size: 15px;
}

._AccessButtonLoginIcon {
    float: left;
}

._AccessButtonLoginText.Reg {
    float: left;
    margin-left: 6px;
}

._AccessButtonLoginIconAndText {
    width: fit-content;
    margin: auto;
}

._AccessButtonLoginText {float: left;margin-left: 6px;}

div#_ScreenServices {
    grid-template-rows: 54% 15px auto;
    display: grid;
    width: 100%;
    height: 100%;
    /* background: #e7e7e7; */
    border-radius: 16px;
    position: relative;
}

div#_ScreenServices.invisible {
    display: none;
}

div#_ScreenProductsMaIn {
    /* width: 100%; */
    /* height: 100%; */
    border-radius: 21px;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 50% 50%;
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
}
div#_ScreenProducts.invisible{
display: none;
}


._ScreenProductButton {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
}

._ScreenProductButtonMaIn {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: linear-gradient(180deg, #e0e0e0, #dcdcdc, #dcdcdc);
    border-radius: 31px;
}

div#_navigatorContentRightProductsShow {
    background: #ececec;
    border-radius: 13px;
    grid-template-rows: 60% auto;
    display: grid;
}

div#_navigatorContentRightProductsShowScreenMa {
    position: absolute;
    background: #ffffff;
    top: 50px;
    left: 30px;
    right: 30px;
    bottom: 20px;
    border-radius: 12px;
}

div#_navigatorContentRightProductsShowScreenImage {
    position: relative;
}

div#_navigatorContentRightProductsShowInfoInMa {
    position: absolute;
    top: 10px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    /* background: red; */
}

div#_navigatorContentRightProductsShowInfo {
    position: relative;
}

div#_TittleProduct {
    color: black;
    font-size: 31px;
    text-align: center;
    font-family: 'sfprodisplaybold';
    background: linear-gradient(180deg, #5c5c5c, #000000);
    -webkit-background-clip: text;
    color: transparent;
}

div#_TittleDescriptionUnderTittle {
    color: #6b6b6b;
    font-size: 22px;
    text-align: center;
    font-family: 'sfprodisplayregular';
}

div#_TittleDescription {
    color: black;
    text-align: center;
    font-size: 19px;
    margin-top: 30px;
    font-family: 'sfprodisplayregular';
    height: 90px;
}

._ScreenProductButtonMaInBorderIn {
    position: absolute;
    top: 1px;
    right: 1px;
    left: 1px;
    bottom: 1px;
    background: linear-gradient(1deg, #e2e2e2, #ffffff, transparent);
    border-radius: 29px;
}

._ScreenProductButtonMaInBorderInIn {
    position: absolute;
    top: 0px;
    left: 1px;
    bottom: 1px;
    right: 1px;
    background: linear-gradient(180deg, #ffffff, #e6e6e6);
    border-radius: 28px;
}

._ScreenProductButton.selected {
    transform: scale(1.06);
    filter: brightness(1.1);
}

div#_TittleUnderButtonsSect {
    width: 100%;
    height: 60px;
    /* background: blue; */
}

div#_demoProductButton {
    height: 100%;
    background: linear-gradient(360deg, #a1a1a1, #c6c6c6);
    width: 200px;
    float: right;
    border-radius: 15px;
    position: relative;
}

div#_demoProductButtonBorderIn {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(360deg, #d0d0d0, #e0e0e0, #eeeeee, #f7f7f7);
    border-radius: 13px;
}

div#_demoProductButtonIn {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(360deg, #cecece, #e3e3e3);
    border-radius: 11px;
}

div#_demoProductButtonInText {
    color: #757575;
    text-align: center;
    font-family: 'sfprodisplayregular';
    font-size: 18px;
    margin-top: 6px;
}

div#_demoProductButtonInTextDg {
    background: linear-gradient(180deg, #767676, #000000);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    font-family: 'sfprodisplayregular';
    font-size: 20px;
}

div#_navigatorContentRightProductsShow.invisible {
    display: none;
}

._ServiceButtonImageInnerMainIcon.chatbot {
    background-image: url(../media/images/dualmessage.png);
    width: 190px;
}

._ServiceButtonImageInnerMiniIcon.chatbot {
    background-image: url(../media/icons/dual.png);
    width: 151px;
    height: 81px;
    background-position: center;
    margin-left: 24px;
}

._ServiceButtonImageInnerMainIcon.correos {
    background-image: url(../media/images/correos.png);
    width: 151px;
}

._ServiceButtonImageInnerMiniIcon.correos {
    background-image: url(../media/icons/email.png);
    width: 51px;
    height: 41px;
    margin-left: 76px;
    margin-top: 72px;
}

._ServiceButtonImageInnerMiniIcon.empleados {
    background-image: url(../media/icons/empleados.png);
    width: 111px;
    height: 111px;
    margin-top: 10px;
}

._ServiceButtonImageInnerMainIcon.empleados {
    background-image: url(../media/images/empleados.png);
    width: 191px;
}

._ServiceButtonImageInnerMainIcon.road {
    background-image: url(../media/images/road.png);
    width: 191px;
}

._ServiceButtonImageInnerMiniIcon.road {
    background-image: url(../media/icons/overroad.png);
    width: 189px;
    height: 53px;
}

._ServiceButtonListMA.pulledup {
    display: none;
}

._ServiceButtonImageInnerMainIcon.clientes {
    background-image: url(../media/images/lupausuario.png);
    width: 191px;
}

._ServiceButtonImageInnerMiniIcon.clientes {
    background-image: url(../media/icons/usuario.png);
    width: 161px;
    height: 111px;
    margin-left: 22px;
    margin-top: 14px;
}

._ServiceButtonImageInnerMainIcon.talacha {
    background-image: url(../media/images/automated.png);
    width: 201px;
}

._ServiceButtonImageInnerMiniIcon.talacha {
    background-image: url(../media/icons/done.png);
}

._ServiceButtonImageInnerMainIcon.assistant {
    background-image: url(../media/images/assistant.png);
    width: 191px;
}

._ServiceButtonImageInnerMiniIcon.assistant {
    width: 64px;
    background: url(../media/icons/eyes.png);
    background-repeat: no-repeat;
    height: 41px;
    margin-top: 61px;
}

._ServiceButtonImageInnerMainIcon.docs {
    background-image: url(../media/images/documents.png);
    width: 132px;
}

._ServiceButtonImageInnerMiniIcon.decide {
    background-image: url(../media/icons/decision.png);
    width: 100px;
    height: 104px;
    margin-top: 10px;
    margin-left: 14px;
}

._ServiceButtonImageInnerMainIcon.decide {
    background-image: url(../media/images/decisions.png);
    width: 131px;
}

._ServiceButtonImageInnerMainIcon.inventario {
    background-image: url(../media/images/inv.png);
    width: 131px;
}

._ServiceButtonImageInnerMiniIcon.inventario {
    background-image: url(../media/icons/todo.png);
    width: 61px;
    height: 71px;
}

._ServiceButtonImageInnerMainIcon.projects {
    background-image: url(../media/images/projects.png);
    width: 151px;
}

._ServiceButtonImageInnerMiniIcon.projects {
    background-image: url(../media/icons/empresa.png);
}

._ServiceButtonListMA.empresarial {
    filter: hue-rotate(644deg)grayscale(.4);
}

._ServiceButtonListMAOut {
    /* overflow-y: auto; */
}

._ServiceButtonImageInnerMiniIcon.docs {
    margin-top: 81px;
    margin-left: 72px;
    background-image: url(../media/icons/docs.png);
}

._ServiceButtonImageInnerMainIcon.phoneproto {
    background: url(../media/images/bigprototype.png);
    width: 111px;
    height: 151px;
}
._ServiceButtonOverInsetWhite {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    background: linear-gradient(46deg, #cfcfcf, #dfdfdf);
    border-radius: 16px 16px 20px 16px;
    grid-template-rows: 100% auto;
    display: grid;
    overflow: hidden;
}

._ServiceButtonOverWhite {
    position: absolute;
    top: 20px;
    bottom: 0px;
    left: 15px;
    right: 15px;
    background: linear-gradient(163deg, #ffffff, #ebe7e7, #cfc7c7);
    border-radius: 16px 16px 20px 16px;
    transition: .15s;
    cursor: pointer;
    box-shadow: 12px -4px 20px 7px #0000001f, -9px -9px 20px 7px #ffffff73;
    filter: brightness(1) grayscale(.3);
}

._ServiceButtonOverInsetWhiteIn {
    position: absolute;
    top: 10px;
    bottom: 0px;
    left: 10px;
    right: 10px;
    /* background: linear-gradient(22deg, #b9b9b9, #ffffff); */
    border-radius: 16px 16px 20px 16px;
    grid-template-rows: 60% auto;
    display: grid;
    /* overflow: hidden; */
}

._ServiceButtonTittleTextTitle.white {
    /* color: black; */
    font-size: 20px;
    background: linear-gradient(0deg, #150015, #b10098);
    -webkit-background-clip: text;
    color: transparent;
    height: 24px;
}

._ServiceButtonTittleTextDescriptionWhite {
    color: black;
}

._ServiceButtonImage.white {
    background: linear-gradient(0deg, #78378c, #7c4b82, #71376f, #4f1e5f, #25002c);
    box-shadow: 0px 10px 20px 0px #b64ddc91, 0px -10px 10px 0px #afafaf, inset 0 -1px #9400b5, inset 0 1px #000000, 0 -1px #ffffff, 0 -2px #00000000;
    filter: brightness(1.3);
}

._ServiceButtonOverWhite:hover {
    transform: scale(1.06);
    box-shadow: 0px 0px 0px 0px #ff00e700, -9px -9px 20px 7px #ffffff73, 0 0 0 6px #0000000a, 0 0 0 18px #0000000a;
    background: linear-gradient(180deg, #ff93f4, #ff3fcd, #ffa0e6);
    z-index: 77;
    filter: brightness(1.05);
}

._ServiceButtonImageInnerMiniIcon.hybrid {
    width: 151px;
}

._ServiceButtonOverInsetWhite:hover {
    background: linear-gradient(360deg, #d8d8d8, #ffffff);
}

._servicePageTextIcon.selected {
    filter: invert(1) opacity(.7);
}

div#_ServiceButtonBBorder {
    filter: hue-rotate(241deg);
}


.silvanaSphere {
    width: 407px;
    height: 400px;
    overflow: hidden;
    border-radius: 271px;
    /* float: right; */
    filter: invert(1);
    margin-left: 0px;
    margin-top: 0px;
}

.silvanaOverSphere {
    width: 400px;
    height: 400px;
    z-index: 999;
    position: absolute;
    box-shadow: inset 0 0 23px #ffffffe6, 0 0 10px #0000002b, inset 20px -20px 10px 6px #00000014, inset 36px -38px 10px 20px #00000005;
    border-radius: 261px;
    margin-top: -6px;
    margin-left: 0px;
}

.silvanaUnderSphere {
    background: #f0f0f0;
    width: 100%;
    height: 100%;
    /* margin-left: -119px; */
    position: absolute;
    padding: 10px;
    margin-left: -11px;
    margin-top: -15px;
    border-radius: 281px;
    box-shadow: inset 0 0 0 1px #eaeaea;
}

.silvanaAssistantBubble {
    float: left;
    width: 400px;
    height: 400px;
    margin-left: 51px;
    position: relative;
    box-shadow: -9px 10px 21px 10px #0000000d, 13px -12px 21px 10px #ffffff12;
    border-radius: 1411px;
    position: absolute;
    transform: scale(0.28);
    margin-left: 779px;
    margin-top: -149px;
}
canvas#silvanaBubble {
    margin: -87px auto auto -664px;
    align-items: center;
    display: grid;
    z-index: 19;
    position: absolute;

}