* {

    margin: 0px;
    padding: 0px;

}

body {
    overflow: auto;
}

.labelsp {
    cursor: auto !important;
    padding-bottom: 1px !important;
    margin-bottom: 1px !important;
    vertical-align: bottom!important;
}

#divkb {
    position: absolute;
    z-index: 999;
    top: 50%;
    margin-top: -45vh;
    left: 50%;
    margin-left: -35vw;
    display: block;
    width: 70vw;
    height: 70vh;
    background-color: white;
    border-radius: 10px;
}

#framekb {
    box-shadow: 1px 2px 10px;
    border-radius: 10px;
}

#divmodalkb {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgba(159, 159, 183, 0.79);
    z-index: 12;
}

#navbar {
    background: black;
    margin: auto;
    border-radius: 0px 0px 0px 0px;
}


#myNavbar {

    display: table;
    margin: 0;

}

.margin5 {
    display: table-cell !important;
    vertical-align: middle;
    padding: 5px;
}

.as {
    font-weight: 800;
    color: #3177a3;
    text-decoration: none !important;
    cursor: pointer;
}

.as:hover {
    font-weight: 800;
    color: #3177a3;
    text-decoration: none !important;
}

#divlogo {
    position: relative;
    left: 0px;

}

#logo {

    position: relative;
    height: 35px;
}

#divimg {
    position: relative;
    left: 20px;
}

#botoesnav {
    position: relative;
    left: 33.5vw;
    margin-left: -10vw;
    width: 20vw;
    padding: 10px !important;
    display: flex !important;
    align-content: center !important;
    justify-content: center !important;
    align-items: center !important;
}

#botoesnav div {
    padding-left: 10px;
    padding-right: 10px;
}

#btnLogin {
    position: relative;
    width: 10vw !important;
    left: 76vw;
}

#btnLogin:hover {
    background-color: rgba(10, 10, 123, 0.56);
    cursor: pointer;
}


/*//////////////////////////////CSS DA TELA SITE//////////////////////////////////////////////////*/

@media only screen and (orientation: portrait) {
    #botoesnav {
        font-size: 1.7vh;
    }

    #geral {
        padding: 0;
        margin: 0;
    }

    #div1 {
        position: relative;
        height: 35vh;
        background-blend-mode: difference;
        background-image: radial-gradient(circle at center, rgba(234, 236, 242, 0.7) 46%, rgba(108, 142, 191, 0.4) 77%), url(images/imagem1Site.jpg) !important;
        background-color: inherit !important;
        background-repeat: round;
        display: flex;
        align-content: center;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    #div11 {
        position: relative;
        /*        background-image: url(images/imagem2Site.png);*/
        background-image: url(images/HERO%20slogon%20db-01.png);
        mix-blend-mode: overlay;
        background-position: center;
        background-size: contain;
        background-blend-mode: multiply;
        background-repeat: no-repeat;
        width: 86%;
        height: 100%;
    }

    #div2 {
        position: relative;
        background-color: #343434;
        height: auto;
        margin: 0;
        padding: 0;
    }

    #div21 {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 1vh;
    }

    #titleExcutiveSummary {
        background-color: #eaecf2;
        position: relative;
        padding-top: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 20px !important;
        text-align-last: center;
        box-shadow: 0px 2px 9px 0px rgba(234, 236, 242, .3);
        margin-bottom: 5.82%;
    }

    #titleExcutiveSummary h1 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 250%;
        color: #343434 !important;
        text-align: left;
        text-shadow: 0em 0em 0.07em #50617a;
        padding-top: 20px !important;
        padding-right: 0px !important;
        padding-bottom: 20px !important;
        padding-left: 0px !important;
    }

    .summaryP {
        color: #eaecf2 !important;
        font-size: 280% !important;
        font-family: 'Geneva', sans-serif;
        font-weight: 50 !imporntant;
        line-height: 1.5em;
    }

    p {
        padding-bottom: 1em;
        text-align: left;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    #div22 {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 1vh;
        padding-top: 0;
        background-color: #343434;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    #title2div2 {

        background-color: #eaecf2;
        position: relative;
        box-shadow: 0px 2px 9px 0px rgba(234, 236, 242, .3);
        text-align: center;
        width: 100% !important;
        height: 8%;
    }

    #title2div2 h1 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 210%;
        color: #343434 !important;
        text-align: center;
        text-shadow: 0em 0em 0.07em #50617a;
        padding-top: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 5px !important;
        padding-left: 0px !important;
    }

    .div22cima {
        position: relative;
        background-color: aqua;
        width: 33.3%;
        height: auto;
        padding: 10px;
    }

    .div22cima p {
        color: #eaecf2 !important;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        font-size: 220%;
        color: #eaecf2 !important;
        line-height: 1.2em;
    }

    .div22meio {
        position: relative;
        background-color: red;
        width: 33.3%;
        padding: 2vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .div22meio p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 270%;
        color: #eaecf2 !important;
        letter-spacing: 2px;
        line-height: 1em;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .div22baixo {
        position: relative;
        background-color: yellow;
        width: 33.3%;
        height: auto;
    }

    .div22baixo p {

        color: #eaecf2 !important;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        font-size: 220%;
        color: #eaecf2 !important;
        line-height: 1.2em;
        padding: 10px;

    }

    #title3div2 {

        background-color: #eaecf2;
        position: relative;
        box-shadow: 0px 2px 9px 0px rgba(234, 236, 242, .3);
        text-align: center;
        width: 100% !important;
        height: 8%;
    }

    #title3div2 h1 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 210%;
        color: #343434 !important;
        text-align: center;
        text-shadow: 0em 0em 0.07em #50617a;
        padding-top: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 5px !important;
        padding-left: 0px !important;
    }

    #div222 {
        position: relative;
        top: 2.5vh;
        left: 0.7vh;
        margin-bottom: 5vh;
        background-color: transparent;
        height: 30vh;
        width: 100%;
        display: flex;

    }

    #div2221 {
        position: relative;
        left: 0;
        top: -2%;
        height: 100%;
        background-color: #eaecf2;
        background-image: url(images/IIC-1.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 1;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2221:hover {
        top: -12%;
        flex: 15;
        height: 120%;
        background-position: center right;
        transition: 0.8s;
    }

    #div2221 h4 {
        display: none;
    }

    #div2221:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2221 p {
        display: none;
    }

    #div2221:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div2222 {
        position: relative;
        left: -1%;
        top: -4%;
        height: 100%;
        background-color: #eaecf2;
        background-image: url(images/plattform-industrie-4.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 1;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2222:hover {
        top: -13%;
        height: 120%;
        transition: 0.8s;
        flex: 15;
        background-position: center right;
    }

    #div2222 h4 {
        display: none;
    }

    #div2222:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2222 p {
        display: none;
    }

    #div2222:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div2223 {
        position: relative;
        left: -2%;
        top: -6%;
        height: 100%;
        background-color: #eaecf2;
        background-image: url(images/Mask-Group-92.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 1;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2223:hover {
        top: -14%;
        flex: 15;
        background-image: linear-gradient(90deg, #eaecf2 80%, rgba(0, 0, 0, 0) 100%), url(images/Mask-Group-92.png);
        background-position: center right;
        height: 120%;
        transition: 0.8s;
    }

    #div2223 h4 {
        display: none;
    }

    #div2223:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2223 p {
        display: none;
    }

    #div2223:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div2224 {
        position: relative;
        left: -3%;
        top: -8%;
        height: 100%;
        background-color: #E3010F;
        background-image: url(images/hannover-cis.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 2;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2224:hover {
        top: -15%;
        flex: 15;
        background-image: linear-gradient(90deg, #E3010F 76%, rgba(0, 0, 0, 0) 95%), url(images/hannover-cis.jpg);
        background-position: center right;
        height: 120%;
        transition: 0.8s;
    }

    #div2224 h4 {
        display: none;
    }

    #div2224:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        color: #eaecf2 !important;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2224 p {
        display: none;
    }

    #div2224:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        color: #eaecf2 !important;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div3 {
        position: relative;
        background-color: #6c8ebf;
        height: auto;
    }

    #div31 {
        position: relative;
        height: 100%;
        width: 100%;
        padding: 1vh;
    }

    #div31 h1 {
        text-align-last: left;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 450%;
        color: #eaecf2 !important;
        letter-spacing: 1px;
        line-height: 1.5em;
        text-align-last: center;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div32 {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1vh;
        padding-top: 3vh;
    }

    #div321 {
        position: relative;
        height: 90%;
        width: 100%;
        background-color: #eaecf2;
        padding: 5vh 1vh 1vh 1vh;
    }

    #div321:before {
        color: #eaecf2;
        background-color: #6c8ebf !important;
        border-radius: 100%;
        height: 5vh;
        width: 5vh;
        top: -2.5vh;
        ;
        margin-left: -2.5vh;
        position: absolute;
        z-index: 2;
        left: 50%;
        background-image: url(images/aspas.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 45px;
        border: 4px solid #eaecf2;
        box-shadow: 1px 1px 10px #7ea5aa;
        content: '';
        line-height: 1;
        text-transform: none;
        speak: none;
    }

    #div321 p {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
    }

    #div4 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
    }

    #div41 {
        position: relative;
        height: 100%;
        width: 100%;
        text-align-last: center;
        padding: 1vh;
        padding-top: 0;
    }

    #div41 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 360%;
        width: 100%;
        word-wrap: break-word;
        color: #6c8ebf !important;
        line-height: 1.1em;
        text-align-last: center;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div42 {
        position: relative;
        height: 100%;
        width: 100%;
        border-left: 2px solid #6c8ebf;
        padding: 1vh;
    }

    #div42 p,
    #div42 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
    }

    li {
        margin-left: 5vh;
    }

    #abrirdiv5 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
        text-align-last: center;
    }

    #abrirdiv5 div {
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 230%;
        text-align-last: center;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
    }

    #div5 {
        position: relative;
        animation-name: animacaodiv5;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: auto;
        z-index: 1;
    }

    #div5 div {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;
    }

    #div5 p,
    #div5 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
        animation-name: animacaodiv5;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv5 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 80vh;
            font-size: 290%;
        }
    }

    #abrirdiv6 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv6 div {
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 230%;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div6 {
        position: relative;
        animation-name: animacaodiv6;
        animation-duration: 0.5s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: auto;
        z-index: 1;
    }

    #div6 div {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1vh !important;
    }

    #tabeladiv6 {
        position: relative;
        width: 100%;
        border: 1px solid #6c8ebf;
    }

    td {
        text-align-last: left;
        padding: 6px 30px !important;
    }

    #div6 p,
    #div6 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
        animation-name: animacaodiv6;
        animation-duration: 0.5s;
    }

    li {
        margin-left: 1vh !important;
        text-align-last: left;
    }

    @keyframes animacaodiv6 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 120vh;
            font-size: 290%;
        }
    }

    #abrirdiv7 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv7 div {
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 230%;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div7 {
        position: relative;
        animation-name: animacaodiv7;
        animation-duration: 0.5s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: auto;
        z-index: 1;
    }

    #div7 div {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;

    }

    #div7 p,
    #div7 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #6c8ebf !important;
        font-size: 290%;
        animation-name: animacaodiv7;
        animation-duration: 0.5s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv7 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 130vh;
            font-size: 290%;
        }
    }


    #div8 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
        padding-top: 0;
    }

    #div81 {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 1vh;
    }

    #div81 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 100%;
        text-align-last: center;
        word-wrap: break-word;
        color: #6c8ebf !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div82 {
        position: relative;
        height: 100%;
        width: 100%;
        border-left: 2px solid #6c8ebf;
        padding: 1vh;
    }

    #div82 p,
    li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
    }

    li {
        margin-left: 5vh;
    }


    #abrirdiv9 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv9 div {
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 230%;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div9 {
        position: relative;
        animation-name: animacaodiv9;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: auto;
        z-index: 1;
    }

    #div9 div {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;
        padding-top: 3vh !important;

    }

    #div9 p,
    #div9 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
        animation-name: animacaodiv9;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv9 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 150vh;
            font-size: 290%;
        }
    }

    #div911 {
        position: relative;
        width: 100%;
        height: auto;
        background-color: #6c8ebf;
        padding: 10vh 1vh 1vh 1vh;
    }

    #div911:before {
        color: #eaecf2;
        background-color: #eaecf2 !important;
        border-radius: 100%;
        height: 5vh;
        width: 5vh;
        top: -2.5vh;
        margin-left: -2.5vh;
        position: absolute;
        z-index: 2;
        left: 50%;
        background-image: url(images/aspas2.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 45px;
        border: 4px solid #6c8ebf;
        box-shadow: 1px 1px 10px #7ea5aa;
        content: '';
        line-height: 1;
        text-transform: none;
        speak: none;
    }

    #div911 p {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
    }

    #div912 {
        position: relative;
        width: 100%;
        height: 15vh;
        margin-top: 5vh;
        background-position: center;
        background-image: url(images/ASSET-2.0.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    #div921 {
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 0vh !important;

    }


    #abrirdiv10 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv10 div {
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 230%;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div10 {
        position: relative;
        animation-name: animacaodiv10;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: auto;
        z-index: 1;
    }

    #div10 div {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;

    }

    #div10 p,
    #div10 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
        animation-name: animacaodiv10;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv10 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 150vh;
            font-size: 290%;
        }
    }

    #div1021 {
        position: relative;
        width: 100vw;
        height: 40vh;
        background-position: center;
        background-image: url(images/latency-awareness.png);
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 5vh;
    }


    #abrirdiv11 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv11 div {
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 230%;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div-11 {
        position: relative;
        animation-name: animacaodiv11;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: auto;
        z-index: 1;
    }

    #div-11 div {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;

    }

    #div-11 p,
    #div-11 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
        animation-name: animacaodiv11;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv11 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 120vh;
            font-size: 290%;
        }
    }

    #div1121 {
        position: relative;
        width: 100%;
        height: 50vh;
        background-position: center;
        background-image: url(images/Edge-Server-Edge-Architecture-transp-bl.png);
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 5vh;
    }


    #abrirdiv12 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv12 div {
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 230%;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div-12 {
        position: relative;
        animation-name: animacaodiv12;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: auto;
        z-index: 1;
    }

    #div-12 div {

        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;
        padding-top: 3vh !important;

    }

    #div-12 p,
    #div-12 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #6c8ebf !important;
        animation-name: animacaodiv12;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv12 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 145vh;
            font-size: 290%;
        }
    }


    #div-13 {
        position: relative;
        background-color: #6c8ebf;
        height: auto;
    }

    #div-13 div {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;
        background-color: #6c8ebf;
        height: auto;
    }

    #div-131 {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 820px;
        width: 100%;
        z-index: 2;
    }

    #div-1311 {
        position: relative;
        margin-left: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/product-clustering-continuous-production-mix.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-1311:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/product-clustering-continuous-production-mix.png);
        transition: 0.4s !important;

    }

    #div-1311 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 360%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-1311:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 200%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1311 p {
        display: none;
    }

    #div-1311:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;
    }

    #div-1312 {
        position: relative;
        margin-top: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/extr1202-1-7-min.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-1312:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/extr1202-1-7-min.png);
        transition: 0.4s;
    }

    #div-1312 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 360%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-1312:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 200%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1312 p {
        display: none;
    }

    #div-1312:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div-1313 {
        position: relative;
        margin-left: 2%;
        margin-top: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/OEE-1204.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-1313:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/OEE-1204.png);
        transition: 0.4s;
    }

    #div-1313 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 360%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
    }

    #div-1313:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 200%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1313 p,
    #div-1313 li {
        display: none;
    }

    #div-1313:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div-1313:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 220%;
    }

    #div-1314 {
        position: relative;
        margin-top: -2%;
        margin-left: 4%;
        height: 100%;
        width: 100%;
        background-color: #E3010F;
        background-image: linear-gradient(180deg, rgba(234, 236, 242, 0.8) 0%, rgba(234, 236, 242, 0.4) 100%), url(images/Image-2.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-top-right-radius: 30px;
        flex: 1;
        position: relative !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        transition: 0.4s;
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
    }

    #div-1314:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/Image-2.png);
        transition: 0.4s;
    }

    #div-1314 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 360%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-1314:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 200%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1314 p,
    #div-1314 li {
        display: none;
    }

    #div-1314:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div-1314:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 220%;
    }

    #div-132 {
        align-items: center;
        color: #eaecf2 !important;
        height: 100%;
    }

    #div-132 p {
        font-size: 290% !important;

    }

    #div-14 {
        position: relative;
        background-color: #9673a6;
        height: 100%;
        width: 100%;
        padding: 1vh;
    }

    #div-141 {
        position: relative;
        height: 100% !important;
        width: 100%;
        margin-bottom: 5vh;
    }

    #div-141 h1 {

        text-align-last: left;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 450%;
        width: 100% !important;
        color: #eaecf2 !important;
        letter-spacing: 1px;
        line-height: 1.5em;
        text-align-last: center;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-142 {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    #div-1421 {
        position: relative;
        height: 90%;
        width: 100%;
        background-color: #eaecf2;
        padding: 5vh 1vh 3vh 1vh;
    }

    #div-1421:before {
        color: #eaecf2;
        background-color: #9673a6 !important;
        border-radius: 100%;
        height: 5vh;
        width: 5vh;
        top: -2.5vh;
        margin-left: -2.5vh;
        position: absolute;
        z-index: 2;
        left: 50%;
        background-image: url(images/aspas3.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 45px;
        border: 4px solid #eaecf2;
        box-shadow: 1px 1px 10px #7ea5aa;
        content: '';
        line-height: 1;
        text-transform: none;
        speak: none;
    }

    #div-1421 p {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-15 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
        padding-top: 2vh;
    }

    #div-151 {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2vh;
    }

    #div-151 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 100%;
        text-align-last: center;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-152 {
        position: relative;
        height: 100%;
        width: 100%;
        border-left: 2px solid #9673a6;
        padding-left: 1vh;
    }

    #div-152 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-16 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
    }

    #div-161 {
        position: relative;
        height: 30vh;
        background-image: url(images/1-dbscan%20vs%20other%20clusterizations.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #div-162 {
        position: relative;
        height: 100%;
        width: 100%;
        padding-top: 5vh;
    }

    #div-162 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-17 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
        padding-top: 2vh;
    }

    #div-171 {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2vh;
    }

    #div-171 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 100%;
        text-align-last: center;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-172 {
        position: relative;
        height: 100%;
        width: 100%;
        border-left: 2px solid #9673a6;
        padding-left: 1vh;
    }

    #div-172 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-18 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
    }

    #div-181 {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #div-181 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 360%;
        width: 100%;
        text-align-last: center;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-181 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-182 {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #div-182 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-19 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
    }

    #div-191 {
        position: relative;
        height: 100%;
        padding-right: 1vh;
        width: 100%;
    }

    #div-191 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 350%;
        text-align-last: center;
        width: 100%;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-191 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-192 {
        position: relative;
        height: 100%;
        width: 100%;
        padding-left: 1vh;
    }

    #div-192 p,
    #div-192 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #9673a6 !important;
    }

    #div-20 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 1vh;
        padding-top: 0;
    }

    #div-201 {
        height: 25vh;
        width: 100%;
        background-image: url(images/ASSET-2.0.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }


    #div-21 {
        position: relative;
        background-color: #9673a6;
        height: auto;
    }

    #div-21 div {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        padding: 1vh !important;
        padding-bottom: 0 !important;
        background-color: #9673a6;
        height: auto;
    }

    #div-211 {
        align-items: center;
        color: #eaecf2 !important;
        height: 700px;
    }

    #div-211 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
    }

    #div-212 {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        z-index: 2;
    }

    #div-2121 {
        position: relative;
        margin-left: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/product-clustering-continuous-production-mix.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-2121:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/product-clustering-continuous-production-mix.png);
        transition: 0.4s !important;

    }

    #div-2121 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 360%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2121:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2121 p {
        display: none;
    }

    #div-2121:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;
    }

    #div-2122 {
        position: relative;
        margin-top: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/extr1202-1-7-min.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-2122:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/extr1202-1-7-min.png);
        transition: 0.4s;
    }

    #div-2122 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 360%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2122:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2122 p {
        display: none;
    }

    #div-2122:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div-2123 {
        position: relative;
        margin-left: 2%;
        margin-top: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/OEE-1204.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-2123:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/OEE-1204.png);
        transition: 0.4s;
    }

    #div-2123 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 360%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2123:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2123 p,
    #div-2123 li {
        display: none;
    }

    #div-2123:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div-2123:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 290%;
    }

    #div-2124 {
        position: relative;
        margin-top: -2%;
        margin-left: 4%;
        height: 100%;
        width: 100%;
        background-color: #E3010F;
        background-image: linear-gradient(180deg, rgba(234, 236, 242, 0.8) 0%, rgba(234, 236, 242, 0.4) 100%), url(images/Image-2.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-top-right-radius: 30px;
        flex: 1;
        position: relative !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        transition: 0.4s;
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
    }

    #div-2124:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/Image-2.png);
        transition: 0.4s;
    }

    #div-2124 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        font-size: 340%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2124:hover h4 {
        display: block;
        text-align-last: center;
        margin-bottom: 2vh;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2124 p,
    #div-2124 li {
        display: none;
    }

    #div-2124:hover p {
        display: block;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        font-size: 220%;
        line-height: 1.2em;

    }

    #div-2124:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 290%;
    }

    #div-22 {
        position: relative;
        background-color: #343434;
        height: auto;
        padding: 1vh;
    }

    #div-221 {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #div-221 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 320%;
        width: 100%;
        word-wrap: break-word;
        color: #eaecf2 !important;
        text-align-last: center;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-221 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
    }

    #div-222 {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #div-222 td,
    #div-222 tr {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 160%;
        font-family: "Arial";
        border: 1px solid #eaecf2;
        color: #eaecf2 !important;
    }

    #div-23 {
        position: relative;
        background-color: #343434;
        height: auto;
        padding: 1vh;
    }

    #div-232 div {
        align-content: center;
        align-items: center;
        justify-content: center;
        text-align-last: left;
        line-height: 3vh;
    }

    #div-231 {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #div-231 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 280%;
        width: 100%;
        word-wrap: break-word;
        color: #eaecf2 !important;
        text-align-last: center;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-231 p,
    #div-231 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        color: #eaecf2 !important;
    }

    #div-232 {
        position: relative;
        height: 100%;
        width: 100%;
        padding-left: 1vh;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
    }

    #div-232 img {
        max-width: 100%;
        height: 5%;
    }

    #div-232 p,
    #div-232 span,
    #div-232 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 280%;
        font-family: "Arial";
        padding: 0;
        margin: 0;
        color: #eaecf2 !important;
    }

    #div-24 {
        position: relative;
        background-color: #343434;
        height: auto;
        padding: 1vh;
        display: flex;
    }

    #div-241 {
        width: 100%;
        text-align: center;
        color: #eaecf2 !important;
        height: 100%;
    }

    #div-241 p,
    #div-241 span,
    #div-241 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        font-family: "Arial";
        color: #eaecf2 !important;
    }

    #div-242 {
        text-align: center;
        color: #eaecf2 !important;
        width: 100%;
        height: 100%;
    }

    #div-242 p,
    #div-242 span,
    #div-242 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 290%;
        font-family: "Arial";
        color: #eaecf2 !important;
    }

    #div-25 {
        position: relative;
        background-color: #343434;
        height: 50vh;
        padding: 0;
        display: flex;
    }

    #div-251 {
        width: 100%;
        text-align: center;
        color: #eaecf2 !important;
        height: 100%;
        padding: 2vh;
    }

    #div-251 iframe {
        width: 100%;
        height: 100%;
    }

    #div-252 {
        width: 100%;
        text-align: center;
        color: #eaecf2 !important;
        height: 100%;
        padding: 2vh;
    }

    #div-252 iframe {
        width: 100%;
        height: 100%;
    }
}

/*//////////////////////   LANDSCAPE  /////////////////////////////////////////*/


@media only screen and (orientation: landscape) {

    #botoesnav {
        font-size: 1.1pp;
    }

    #geral {
        padding: 0;
        margin: 0;
    }

    #div1 {
        position: relative;
        height: 100vh;
        background-blend-mode: difference;
        background-image: radial-gradient(circle at center, rgba(234, 236, 242, 0.7) 46%, rgba(108, 142, 191, 0.4) 77%), url(images/imagem1Site.jpg) !important;
        background-color: inherit !important;
        background-repeat: round;
        display: flex;
        align-content: center;
        justify-content: center;
        padding: 5vh;
        margin: 0;
    }

    #div11 {
        position: relative;
        /*        background-image: url(images/imagem2Site.png);*/
        background-image: url(images/HERO%20slogon%20db-01.png);
        mix-blend-mode: overlay;
        background-position: center;
        background-size: contain;
        background-blend-mode: multiply;
        background-repeat: no-repeat;
        width: 86%;
        height: 100%;
    }

    #div2 {
        position: relative;
        background-color: #343434;
        height: auto;
        margin: 0;
        padding: 0;
        display: flex;
    }

    #div21 {
        position: relative;
        top: 0vh;
        width: 50%;
        height: 100%;
        padding: 10vh;
        padding-right: 5vh;
    }

    #titleExcutiveSummary {
        background-color: #eaecf2;
        position: relative;
        padding-top: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 40px !important;
        box-shadow: 0px 2px 9px 0px rgba(234, 236, 242, .3);
        margin-bottom: 5.82%;
    }

    #titleExcutiveSummary h1 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 250%;
        color: #343434 !important;
        text-align: left;
        text-shadow: 0em 0em 0.07em #50617a;
        padding-top: 20px !important;
        padding-right: 0px !important;
        padding-bottom: 20px !important;
        padding-left: 0px !important;
    }

    .summaryP {
        color: #eaecf2 !important;
        font-size: 125% !important;
        font-family: 'Geneva', sans-serif;
        font-weight: 50 !imporntant;
        line-height: 1.5em;
    }

    p {
        padding-bottom: 1em;
        text-align: left;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    #div22 {
        position: relative;
        width: 50%;
        height: 100%;
        padding: 10vh;
        padding-left: 5vh;
        background-color: #343434;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    #title2div2 {

        background-color: #eaecf2;
        position: relative;
        box-shadow: 0px 2px 9px 0px rgba(234, 236, 242, .3);
        text-align: center;
        width: 100% !important;
        height: 8%;
    }

    #title2div2 h1 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 140%;
        color: #343434 !important;
        text-align: center;
        text-shadow: 0em 0em 0.07em #50617a;
        padding-top: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 5px !important;
        padding-left: 0px !important;
    }

    .div22cima {
        position: relative;
        background-color: aqua;
        width: 33.3%;
        height: auto;
        padding: 10px;
    }

    .div22cima p {
        color: #eaecf2 !important;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        font-size: 125%;
        color: #eaecf2 !important;
        line-height: 1.2em;
    }

    .div22meio {
        position: relative;
        background-color: red;
        width: 33.3%;
        padding: 5vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .div22meio p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 130%;
        color: #eaecf2 !important;
        letter-spacing: 2px;
        line-height: 1em;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .div22baixo {
        position: relative;
        background-color: yellow;
        width: 33.3%;
        height: auto;
    }

    .div22baixo p {

        color: #eaecf2 !important;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        font-size: 125%;
        color: #eaecf2 !important;
        line-height: 1.2em;
        padding: 10px;

    }

    #title3div2 {

        background-color: #eaecf2;
        position: relative;
        box-shadow: 0px 2px 9px 0px rgba(234, 236, 242, .3);
        text-align: center;
        width: 100% !important;
        height: 8%;
    }

    #title3div2 h1 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 140%;
        color: #343434 !important;
        text-align: center;
        text-shadow: 0em 0em 0.07em #50617a;
        padding-top: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 5px !important;
        padding-left: 0px !important;
    }

    #div222 {
        position: relative;
        top: 5vh;
        background-color: transparent;
        height: 50vh;
        width: 100%;
        display: flex;

    }

    #div2221 {
        position: relative;
        left: 0;
        top: -2%;
        height: 100%;
        background-color: #eaecf2;
        background-image: url(images/IIC-1.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 1;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2221:hover {
        top: -12%;
        flex: 15;
        height: 120%;
        background-position: center right;
        transition: 0.8s;
    }

    #div2221 h4 {
        display: none;
    }

    #div2221:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 120%;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2221 p {
        display: none;
    }

    #div2221:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        font-size: 115%;
        line-height: 1.2em;

    }

    #div2222 {
        position: relative;
        left: -1%;
        top: -4%;
        height: 100%;
        background-color: #eaecf2;
        background-image: url(images/plattform-industrie-4.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 1;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2222:hover {
        top: -13%;
        height: 120%;
        transition: 0.8s;
        flex: 15;
        background-position: center right;
    }

    #div2222 h4 {
        display: none;
    }

    #div2222:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 120%;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2222 p {
        display: none;
    }

    #div2222:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        font-size: 115%;
        line-height: 1.2em;

    }

    #div2223 {
        position: relative;
        left: -2%;
        top: -6%;
        height: 100%;
        background-color: #eaecf2;
        background-image: url(images/Mask-Group-92.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 1;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2223:hover {
        top: -14%;
        flex: 15;
        background-image: linear-gradient(90deg, #eaecf2 80%, rgba(0, 0, 0, 0) 100%), url(images/Mask-Group-92.png);
        background-position: center right;
        height: 120%;
        transition: 0.8s;
    }

    #div2223 h4 {
        display: none;
    }

    #div2223:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 115%;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2223 p {
        display: none;
    }

    #div2223:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        font-size: 115%;
        line-height: 1.2em;

    }

    #div2224 {
        position: relative;
        left: -3%;
        top: -8%;
        height: 100%;
        background-color: #E3010F;
        background-image: url(images/hannover-cis.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex: 2;
        position: relative !important;
        transition: flex 400ms !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
    }

    #div2224:hover {
        top: -15%;
        flex: 15;
        background-image: linear-gradient(90deg, #E3010F 76%, rgba(0, 0, 0, 0) 95%), url(images/hannover-cis.jpg);
        background-position: center right;
        height: 120%;
        transition: 0.8s;
    }

    #div2224 h4 {
        display: none;
    }

    #div2224:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 115%;
        color: #eaecf2 !important;
        width: 75%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div2224 p {
        display: none;
    }

    #div2224:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 300;
        width: 70%;
        color: #eaecf2 !important;
        font-size: 125%;
        line-height: 1.2em;

    }

    #div3 {
        position: relative;
        background-color: #6c8ebf;
        height: auto;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    #div31 {
        position: relative;
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        padding: 10vh;
        padding-right: 5vh;
    }

    #div31 h1 {
        text-align-last: left;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 450%;
        color: #eaecf2 !important;
        letter-spacing: 1px;
        line-height: 1.5em;
        text-align: center;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div32 {
        position: relative;
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10vh;
        padding-left: 5vh;
    }

    #div321 {
        position: relative;
        height: 90%;
        width: 100%;
        background-color: #eaecf2;
        padding: 10vh 3vh 5vh 3vh;
    }

    #div321:before {
        color: #eaecf2;
        background-color: #6c8ebf !important;
        border-radius: 50%;
        height: 10vh;
        width: 10vh;
        top: -30px;
        margin-left: -30px;
        position: absolute;
        z-index: 2;
        left: 50%;
        background-image: url(images/aspas.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 45px;
        border-radius: 31px;
        border: 4px solid #eaecf2;
        box-shadow: 1px 1px 10px #7ea5aa;
        content: '';
        line-height: 1;
        text-transform: none;
        speak: none;
    }

    #div321 p {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
    }

    #div4 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 10vh;
        padding-left: 12vh;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
    }

    #div41 {
        position: relative;
        height: 100%;
        width: 40%;
    }

    #div41 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 90%;
        word-wrap: break-word;
        color: #6c8ebf !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div42 {
        position: relative;
        height: 100%;
        width: 57%;
        border-left: 2px solid #6c8ebf;
        padding-left: 5vh;
    }

    #div42 p,
    #div42 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
    }

    li {
        margin-left: 5vh;
    }

    #abrirdiv5 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv5 div {
        padding-left: 5vh;
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 25px;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 50% !important;
        display: flex;
        align-items: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div5 {
        position: relative;
        animation-name: animacaodiv5;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: 85vh;
        z-index: 1;
    }

    #div5 p,
    #div5 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
        animation-name: animacaodiv5;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv5 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 80vh;
            font-size: 125%;
        }
    }

    #abrirdiv6 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv6 div {
        padding-left: 5vh;
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 25px;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 50% !important;
        display: flex;
        align-items: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div6 {
        position: relative;
        animation-name: animacaodiv6;
        animation-duration: 0.5s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: 130vh;
        z-index: 1;
    }

    #tabeladiv6 {
        position: relative;
        width: 100%;
        border: 1px solid #6c8ebf;
    }

    td {
        text-align-last: left;
        padding: 6px 6px !important;
    }

    #div6 p,
    #div6 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
        animation-name: animacaodiv6;
        animation-duration: 0.5s;
    }

    li {
        margin-left: 5vh;
        text-align-last: left;
    }

    @keyframes animacaodiv6 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 120vh;
            font-size: 125%;
        }
    }

    #abrirdiv7 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv7 div {
        padding-left: 5vh;
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 25px;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 50% !important;
        display: flex;
        align-items: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div7 {
        position: relative;
        animation-name: animacaodiv7;
        animation-duration: 0.5s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: 140vh;
        z-index: 1;
    }

    #div7 p,
    #div7 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #6c8ebf !important;
        font-size: 125%;
        animation-name: animacaodiv7;
        animation-duration: 0.5s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv7 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 130vh;
            font-size: 125%;
        }
    }


    #div8 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 10vh;
        padding-left: 5vh;
        display: flex;
    }

    #div81 {
        position: relative;
        height: 100%;
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #div81 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 300%;
        width: 100%;
        word-wrap: break-word;
        color: #6c8ebf !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div82 {
        position: relative;
        height: 100%;
        width: 60%;
        border-left: 2px solid #6c8ebf;
        padding-left: 5vh;
    }

    #div82 p,
    li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
    }

    li {
        margin-left: 5vh;
    }


    #abrirdiv9 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv9 div {
        padding-left: 5vh;
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 25px;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 50% !important;
        display: flex;
        align-items: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div9 {
        position: relative;
        animation-name: animacaodiv9;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: 150vh;
        z-index: 1;
    }

    #div9 p,
    #div9 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
        animation-name: animacaodiv9;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv9 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 150vh;
            font-size: 125%;
        }
    }

    #div911 {
        position: relative;
        width: 100%;
        height: auto;
        background-color: #6c8ebf;
        padding: 10vh 3vh 5vh 3vh;
    }

    #div911:before {
        color: #eaecf2;
        background-color: #eaecf2 !important;
        border-radius: 50%;
        height: 10vh;
        width: 10vh;
        top: -30px;
        margin-left: -30px;
        position: absolute;
        z-index: 2;
        left: 50%;
        background-image: url(images/aspas2.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 45px;
        border-radius: 31px;
        border: 4px solid #6c8ebf;
        box-shadow: 1px 1px 10px #7ea5aa;
        content: '';
        line-height: 1;
        text-transform: none;
        speak: none;
    }

    #div911 p,
    #div911 a {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #eaecf2 !important;
    }

    #div912 {
        position: relative;
        width: 100%;
        height: 35%;
        background-position: center;
        background-image: url(images/ASSET-2.0.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    #div921 {
        position: relative;
        width: 100%;
        height: auto;
        padding: 10vh 3vh 5vh 3vh;
    }


    #abrirdiv10 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv10 div {
        padding-left: 5vh;
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 25px;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 50% !important;
        display: flex;
        align-items: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div10 {
        position: relative;
        animation-name: animacaodiv10;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: 150vh;
        z-index: 1;
    }

    #div10 p,
    #div10 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
        animation-name: animacaodiv10;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv10 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 150vh;
            font-size: 125%;
        }
    }

    #div1021 {
        position: relative;
        width: 100%;
        height: 50%;
        background-position: center;
        background-image: url(images/latency-awareness.png);
        background-repeat: no-repeat;
        background-size: contain;
    }


    #abrirdiv11 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv11 div {
        padding-left: 5vh;
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 25px;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 50% !important;
        display: flex;
        align-items: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div-11 {
        position: relative;
        animation-name: animacaodiv11;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: 120vh;
        z-index: 1;
    }

    #div-11 p,
    #div-11 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
        animation-name: animacaodiv11;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv11 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 120vh;
            font-size: 125%;
        }
    }

    #div1121 {
        position: relative;
        width: 100%;
        height: 100%;
        background-position: center;
        background-image: url(images/Edge-Server-Edge-Architecture-transp-bl.png);
        background-repeat: no-repeat;
        background-size: contain;
    }


    #abrirdiv12 {
        position: relative;
        background-color: #eaecf2;
        height: 8vh;
    }

    #abrirdiv12 div {
        padding-left: 5vh;
        cursor: pointer;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        position: relative;
        font-size: 25px;
        font-weight: 500;
        background-color: #6c8ebf;
        height: 100% !important;
        width: 50% !important;
        display: flex;
        align-items: center;
        color: #eaecf2 !important;
        box-shadow: 0px 4px 4px rgba(90, 98, 114, 0.46);
        z-index: 2;
    }

    #div-12 {
        position: relative;
        animation-name: animacaodiv12;
        animation-duration: 0.6s;
        background-color: #eaecf2;
        border-bottom: 1px solid #6c8ebf;
        height: 150vh;
        z-index: 1;
    }

    #div-12 p,
    #div-12 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #6c8ebf !important;
        animation-name: animacaodiv12;
        animation-duration: 0.6s;
    }

    li {
        margin-left: 5vh;
    }

    @keyframes animacaodiv12 {
        from {
            height: 0px;
            font-size: 0px;
        }

        to {
            height: 145vh;
            font-size: 125%;
        }
    }


    #div-13 {
        position: relative;
        background-color: #6c8ebf;
        height: auto
    }

    #div-131 {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 900px;
        z-index: 2;
    }

    #div-1311 {
        position: relative;
        left: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/product-clustering-continuous-production-mix.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-1311:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/product-clustering-continuous-production-mix.png);
        transition: 0.4s !important;

    }

    #div-1311 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 85%;
        padding-left: 7vh;
        font-size: 360%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-1311:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1311 p {
        display: none;
    }

    #div-1311:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
        line-height: 1.2em;
    }

    #div-1312 {
        position: relative;
        top: -4%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/extr1202-1-7-min.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-1312:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/extr1202-1-7-min.png);
        transition: 0.4s;
    }

    #div-1312 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 85%;
        padding-left: 7vh;
        font-size: 360%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-1312:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1312 p {
        display: none;
    }

    #div-1312:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 120%;
        line-height: 1.2em;

    }

    #div-1313 {
        position: relative;
        left: 2%;
        top: -8%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/OEE-1204.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-1313:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/OEE-1204.png);
        transition: 0.4s;
    }

    #div-1313 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        padding-left: 7vh;
        font-size: 320%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-1313:hover h4 {
        display: block;
        margin: 30px;
        padding: 0;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1313 p,
    #div-1313 li {
        display: none;
    }

    #div-1313:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
        line-height: 1.2em;

    }

    #div-1313:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
    }

    #div-1314 {
        position: relative;
        top: -12%;
        left: 4%;
        height: 100%;
        width: 100%;
        background-color: #E3010F;
        background-image: linear-gradient(180deg, rgba(234, 236, 242, 0.8) 0%, rgba(234, 236, 242, 0.4) 100%), url(images/Image-2.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-top-right-radius: 30px;
        flex: 1;
        position: relative !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        transition: 0.4s;
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
    }

    #div-1314:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/Image-2.png);
        transition: 0.4s;
    }

    #div-1314 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 85%;
        padding-left: 7vh;
        font-size: 310%;
        color: #6c8ebf !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-1314:hover h4 {
        display: block;
        margin: 30px;
        padding: 0;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-1314 p,
    #div-1314 li {
        display: none;
    }

    #div-1314:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
        line-height: 1.2em;

    }

    #div-1314:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
    }

    #div-132 {
        align-items: center;
        padding-top: 15vh;
        color: #eaecf2 !important;
        height: 100%;
    }

    #div-132 p {
        font-size: 125%;
    }

    #div-14 {
        position: relative;
        background-color: #9673a6;
        height: auto;
        display: flex;
        align-items: center;
    }

    #div-141 {
        position: relative;
        height: 100% !important;
        width: 50%;
        padding: 10vh;
        padding-right: 5vh;
    }

    #div-141 h1 {
        text-align-last: left;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 360%;
        height: 100%;
        color: #eaecf2 !important;
        letter-spacing: 1px;
        line-height: 1.5em;
        text-align: center;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-142 {
        position: relative;
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10vh;
        padding-left: 5vh;
    }

    #div-1421 {
        position: relative;
        height: 90%;
        width: 100%;
        background-color: #eaecf2;
        padding: 10vh 3vh 5vh 3vh;
    }

    #div-1421:before {
        color: #eaecf2;
        background-color: #9673a6 !important;
        border-radius: 50%;
        height: 10vh;
        width: 10vh;
        top: -30px;
        margin-left: -30px;
        position: absolute;
        z-index: 2;
        left: 50%;
        background-image: url(images/aspas3.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 45px;
        border-radius: 31px;
        border: 4px solid #eaecf2;
        box-shadow: 1px 1px 10px #7ea5aa;
        content: '';
        line-height: 1;
        text-transform: none;
        speak: none;
    }

    #div-1421 p {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-15 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 10vh;
        padding-right: 5vh;
        padding-left: 12vh;
        display: flex;
    }

    #div-151 {
        position: relative;
        height: 100%;
        width: 40%;
    }

    #div-151 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 260%;
        width: 70%;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-152 {
        position: relative;
        height: 100%;
        width: 57%;
        border-left: 2px solid #9673a6;
        padding-left: 5vh;
    }

    #div-152 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-16 {
        position: relative;
        background-color: #eaecf2;
        height: 90vh;
        padding: 10vh;
        padding-right: 10vh;
        padding-left: 10vh;
        display: flex;
    }

    #div-161 {
        position: relative;
        height: 100%;
        background-image: url(images/1-dbscan%20vs%20other%20clusterizations.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #div-162 {
        position: relative;
        height: 100%;
        width: 50%;
        padding-left: 5vh;
    }

    #div-162 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-17 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 10vh;
        padding-right: 5vh;
        padding-left: 12vh;
        display: flex;
    }

    #div-171 {
        position: relative;
        height: 100%;
        width: 40%;
    }

    #div-171 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 260%;
        width: 70%;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-172 {
        position: relative;
        height: 100%;
        width: 57%;
        border-left: 2px solid #9673a6;
        padding-left: 5vh;
    }

    #div-172 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-18 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 10vh;
        padding-right: 5vh;
        display: flex;
    }

    #div-181 {
        position: relative;
        height: 100%;
        width: 50%;
    }

    #div-181 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 360%;
        width: 70%;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-181 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-182 {
        position: relative;
        height: 100%;
        width: 50%;
        padding-left: 5vh;
    }

    #div-182 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-19 {
        position: relative;
        background-color: #eaecf2;
        height: auto;
        padding: 10vh;
        padding-right: 5vh;
        display: flex;
    }

    #div-191 {
        position: relative;
        height: 100%;
        padding-right: 5vh;
        width: 50%;
    }

    #div-191 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 350%;
        width: 100%;
        word-wrap: break-word;
        color: #9673a6 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-191 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-192 {
        position: relative;
        height: 100%;
        width: 50%;
        padding-left: 5vh;
    }

    #div-192 p,
    #div-192 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #9673a6 !important;
    }

    #div-20 {
        position: relative;
        background-color: #eaecf2;
        height: 80vh;
        padding: 10vh;
    }

    #div-201 {
        height: 100%;
        width: 100%;
        background-image: url(images/ASSET-2.0.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }


    #div-21 {
        position: relative;
        background-color: #9673a6;
        padding: 3vw !important;
        height: auto;
    }

    #div-211 {
        align-items: center;
        padding-top: 15vh;
        width: 90%;
        margin-right: 0;
        color: #eaecf2 !important;
        height: 730px;
    }

    #div-211 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #eaecf2 !important;
    }

    #div-212 {
        display: flex;
        margin-left: -5%;
        flex-direction: column;
        align-items: center;
        width: 95%;
        height: 100%;
        z-index: 2;
    }

    #div-2121 {
        position: relative;
        left: -2%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/product-clustering-continuous-production-mix.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-2121:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/product-clustering-continuous-production-mix.png);
        transition: 0.4s !important;

    }

    #div-2121 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        padding-left: 6vh;
        font-size: 360%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2121:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2121 p {
        display: none;
    }

    #div-2121:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
        line-height: 1.2em;
    }

    #div-2122 {
        position: relative;
        top: -4%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/extr1202-1-7-min.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-2122:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/extr1202-1-7-min.png);
        transition: 0.4s;
    }

    #div-2122 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        padding-left: 6vh;
        font-size: 360%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2122:hover h4 {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2122 p {
        display: none;
    }

    #div-2122:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
        line-height: 1.2em;

    }

    #div-2123 {
        position: relative;
        left: 2%;
        top: -8%;
        height: 100%;
        width: 100%;
        background-color: #eaecf2;
        background-image: radial-gradient(circle at top left, rgba(234, 236, 242, 0.8) 50%, rgba(234, 236, 242, 0.4) 100%), url(images/OEE-1204.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top-right-radius: 30px;
        flex: 1;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
        transition: 0.4s;
    }

    #div-2123:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/OEE-1204.png);
        transition: 0.4s;
    }

    #div-2123 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 100%;
        padding-left: 7vh;
        font-size: 360%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2123:hover h4 {
        display: block;
        margin: 30px;
        padding: 0;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2123 p,
    #div-2123 li {
        display: none;
    }

    #div-2123:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
        line-height: 1.2em;

    }

    #div-2123:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
    }

    #div-2124 {
        position: relative;
        top: -12%;
        left: 4%;
        height: 100%;
        width: 100%;
        background-color: #E3010F;
        background-image: linear-gradient(180deg, rgba(234, 236, 242, 0.8) 0%, rgba(234, 236, 242, 0.4) 100%), url(images/Image-2.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-top-right-radius: 30px;
        flex: 1;
        position: relative !important;
        box-shadow: -12px 0px 18px -6px rgba(0, 0, 0, 0.3);
        transition: 0.4s;
        padding: 10px;
        padding-left: 0;
        overflow: hidden;
    }

    #div-2124:hover {
        flex: 20;
        height: 120%;
        background-image: linear-gradient(180deg, rgba(80, 97, 122, 0.8) 0%, rgba(108, 142, 191, 0.6) 100%), url(images/Image-2.png);
        transition: 0.4s;
    }

    #div-2124 h4 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        width: 85%;
        padding-left: 7vh;
        font-size: 290%;
        color: #9673a6 !important;
        text-shadow: 0em 0em 0.07em #50617a;
        word-wrap: break-word;
    }

    #div-2124:hover h4 {
        display: block;
        margin: 30px;
        padding: 0;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 170%;
        color: #eaecf2 !important;
        width: 100%;
        text-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0);
    }

    #div-2124 p,
    #div-2124 li {
        display: none;
    }

    #div-2124:hover p {
        display: block;
        margin: 30px;
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        color: #eaecf2 !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
        line-height: 1.2em;

    }

    #div-2124:hover li {
        display: list-item;
        color: #eaecf2 !important;
        margin-left: 8vh !important;
        font-weight: 300;
        width: 100%;
        padding-right: 10vh;
        font-size: 125%;
    }

    #div-22 {
        position: relative;
        background-color: #343434;
        height: auto;
        padding: 10vh;
        padding-right: 5vh;
        display: flex;
    }

    #div-221 {
        position: relative;
        height: 100%;
        padding-right: 5vh;
        width: 40%;
    }

    #div-221 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 320%;
        width: 100%;
        word-wrap: break-word;
        color: #eaecf2 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-221 p {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #eaecf2 !important;
    }

    #div-222 {
        position: relative;
        height: 100%;
        width: 60%;
        padding-left: 5vh;
    }

    #div-222 td,
    #div-222 tr {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 100%;
        font-family: "Arial";
        border: 1px solid #eaecf2;
        color: #eaecf2 !important;
    }

    #div-23 {
        position: relative;
        background-color: #343434;
        height: auto;
        padding: 10vh;
        padding-right: 5vh;
        display: flex;
    }

    #div-231 {
        position: relative;
        height: 100%;
        padding-right: 5vh;
        width: 50%;
    }

    #div-231 h2 {
        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: 280%;
        width: 100%;
        word-wrap: break-word;
        color: #eaecf2 !important;
        line-height: 1.1em;
        text-shadow: 0em 0em 0.07em #50617A;
    }

    #div-231 p,
    #div-231 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        color: #eaecf2 !important;
    }

    #div-232 {
        position: relative;
        height: 100%;
        width: 50%;
        padding-left: 5vh;
        padding-right: 10vh;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
    }

    #div-232 div {
        align-content: center;
        align-items: center;
        justify-content: center;
        text-align-last: left;
        line-height: 5vh;
    }

    #div-232 img {
        max-width: 100%;
        height: 5%;
    }

    #div-232 p,
    #div-232 span,
    #div-232 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 115%;
        font-family: "Arial";
        padding: 0;
        margin: 0;
        color: #eaecf2 !important;
    }

    #div-24 {
        position: relative;
        background-color: #343434;
        height: 55vh;
        padding: 10vh;
        padding-top: 5vh;
        display: flex;
    }

    #div-241 {
        width: 100%;
        text-align: center;
        color: #eaecf2 !important;
        height: 100%;
    }

    #div-241 p,
    #div-241 span,
    #div-241 li {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        font-family: "Arial";
        color: #eaecf2 !important;
    }

    #div-242 {
        text-align: center;
        color: #eaecf2 !important;
        width: 100%;
        height: 100%;
    }

    #div-242 p,
    #div-242 span,
    #div-242 li,
    #div-242 a {

        font-family: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
        font-size: 125%;
        font-family: "Arial";
        color: #eaecf2 !important;
    }

    #div-25 {
        position: relative;
        background-color: #343434;
        height: 60vh;
        padding: 0;
        display: flex;
    }

    #div-251 {
        width: 100%;
        text-align: center;
        color: #eaecf2 !important;
        height: 100%;
        padding: 2vh;
    }

    #div-251 iframe {
        width: 100%;
        height: 100%;
    }

    #div-252 {
        width: 100%;
        text-align: center;
        color: #eaecf2 !important;
        height: 100%;
        padding: 2vh;
    }

    #div-252 iframe {
        width: 100%;
        height: 100%;
    }

    .linha2 {
        padding-left: 7vw !important;
        top: -4vh !important;
    }


}

/*////////////////////////////////////////////////////////////////////////////////*/

#powered {
    position: absolute;
    animation-name: animacaopowered;
    animation-duration: 2s;
    top: 63vh;
    left: 50%;
    text-align-last: center;
    width: 28vw;
    margin-left: -14vw;
    font-size: 18px;
    color: black;
}

@keyframes animacaopowered {
    from {
        width: 0px;
        font-size: 0px;
        left: 64vw;
        top: 60vh;
    }

    to {
        width: 28vw;
        left: 50%;
        font-size: 18px;
        margin-left: -14vw;
        top: 63vh;
    }
}

#centerimg {
    position: absolute;
    animation-name: animacaoimagem;
    animation-duration: 2s;
    top: 50vh;
    left: 50%;
    width: 24%;
    margin-left: -12%;
    margin-top: -18.333%;
}

@keyframes animacaoimagem {
    from {
        width: 0px;
        left: 62vw;
        top: 80vh;
    }

    to {
        width: 24%;
        left: 50%;
        margin-left: -12%;
        top: 50vh;
        margin-top: -18.333%;
    }
}

#centerimg2 {
    position: absolute;
    animation-name: animacaoimagem2;
    animation-duration: 2s;
    top: 70%;
    left: 50%;
    width: 24%;
    margin-left: -12%;
}

#centerimg2:hover {

    transform: scale(1.3);
    transition: 0.5s;
}

@keyframes animacaoimagem2 {
    from {
        width: 0px;
        left: 62vw;
        top: 80vh;
    }

    to {
        width: 24%;
        left: 50%;
        margin-left: -12%;
        top: 70%;
    }
}

/*88888888 VIDEO DA PAGINA 8888888888*/

#videovid {
    position: absolute;
    animation-name: animacaovideo;
    animation-duration: 2s;
    width: 27%;
    left: 30px;
    top: 38vh;
    border: 2px #185ca0;
    border-style: double;
    box-shadow: 1px 0px 7px 1px #3232c6;
    border-radius: 10px;
    z-index: 10;
}

#videovid:hover {

    box-shadow: 0px 0px 7px black;
    transform: scale(1.1);
    transition: 0.5s;
}

@keyframes animacaovideo {
    from {
        width: 0px;
        left: 100vw;
        top: 60vh;
    }

    to {
        width: 27%;
        left: 30px;
        top: 38vh;
    }
}

/*888888888888888888888888888888888888888888888888*/

/*88888888 DIV ANIMADA DA PAGINA 8888888888*/

#divsite {
    position: absolute;
    animation-name: animacaosite;
    animation-duration: 2s;
    height: 31.85%;
    width: 27%;
    right: 30px;
    top: 38vh;
    border: 2px #185ca0;
    border-style: double;
    box-shadow: 1px 0px 7px 1px #3232c6;
    border-radius: 10px;
    z-index: 10;
    background-color: rgba(160, 155, 155, 0.87);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(images/databot%20simples.png);
    cursor: pointer;
}

#divsite:hover {

    box-shadow: 0px 0px 7px black;
    transform: scale(1.1);
    transition: 0.5s;
}

@keyframes animacaosite {
    from {
        display: none;
        height: 0;
        width: 0px;
        right: 100vw;
        top: 60vh;
    }

    to {
        display: block;
        width: 27%;
        height: 31.85%;
        right: 30px;
        top: 38vh;
    }
}

/*888888888888888888888888888888888888888888888888*/

#Limg {

    position: absolute;
    top: 53%;
    left: 0%;
    margin-top: -20%;
    margin-right: -20%;
    max-width: 22%;
    height: auto;
}

#Rimg {

    position: absolute;
    top: 53%;
    right: 0%;
    margin-top: -20%;
    margin-left: -20%;
    max-width: 22%;
    height: auto;
}

#gif {
    position: absolute;
    height: 7vh;
    top: 50%;
    left: 50%;
    margin-top: -3.5vh;
    margin-left: -3.5vh;
    z-index: 1000;
}