@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;700;900&display=swap');
*{
    margin: 0;
    padding: 0;
}

html, body {
    overflow: hidden;
    background: none;
    font-family: 'Roboto', sans-serif scroll-behavior: smooth;
    nameToPush color: #555;
}


.table th {
    padding: .35rem;   
    border-top: 1px solid rgb(29, 97, 168);
}
.table td {
    padding: .35rem;
    border-top: 1px dashed #c6c6c6;
}
.borderBottom {
    border-bottom: 3px solid rgb(29, 97, 168) !important;
}

canvas {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, fff 0%, #fff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#fff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,#fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    overflow: hidden;
}

.ts100 {
    text-shadow: 0 1px 0 #111;
}
.ts90 {
    text-shadow: 0 1px 0 #222;
}
.ts20 {
    text-shadow: 0 1px 0 #dedede;
}
.ts00 {
    text-shadow: 0 1px 0 #f9f9f9;
}
.imgThumb {
    max-width: 50px;
    max-height: 50px;
    width: 100%;
    height: auto;
    border: 1px solid #c2c2c2;
    border-radius: 6px;
    box-shadow: 0px 0px 2px #a0a0a0;
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 85%;
    pointer-events: auto;
    background-color: #eaeaea;
    margin-top: 80px;
    border-radius: 10px;
    border: 1px solid #c7c7c7;
    background: linear-gradient(to bottom, rgb(250, 250, 250), rgb(242, 242, 242));
    z-index: 9999 !important;
}

.modal-header {
    background: linear-gradient(to bottom, rgb(48, 48, 48), rgb(33, 33, 33));
}

.modal-backdrop {
    background-color: #333;
    opacity: 0.5 !important;
}

.btn-outline {
    border: 1px solid rgb(37, 113, 193);
}

.btn-outline:hover {
    color: aliceblue !important;
}

.close {
    text-shadow: none !important;
}

#btns {
    position: fixed;
    top: 100px;
    left: 15px;
    z-index: 999 !important;
}

    #btns a:hover {
        text-decoration: none !important;
        color: #78baff !important;
    }

.btn-menu {
    border: 1px solid rgb(26, 112, 202);
    padding: 8px;
    color: #e1e1e1 !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none !important;
    display: inline-block !important;
    min-width: 60px;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
}

    .btn-menu:hover {
        border: 1px solid rgb(36, 125, 219);
        padding: 8px;
        color: #eeeeee !important;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer !important;
        border-radius: 6px;
        text-decoration: none !important;
        background-color: rgb(51, 136, 225, 0.20);
    }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 16rem;
    padding: 5px;
    margin: 10px;
    font-size: 12px;
    color: #e12121;
    text-align: left;
    list-style: none;
    background-color: #eeeeeee7;
    background-clip: padding-box;
    border: 1px solid rgba(200,200,200,.5);
    border-radius: 8px;
    cursor: pointer !important;

}

.dropdown-item {
    color: rgb(18, 65, 116);
    font-size: 13px;
    padding-left: 5px;
    cursor: pointer;    
}

    .dropdown-item:hover {
        color: rgb(14, 78, 147);
        font-size: 13px;
        padding-left: 5px;
        cursor: pointer;
        background-color: rgb(250, 250, 250);
        border-radius: 4px;
    }

.button {
    position: relative;
    display: block;
    width: 230px;
    padding: 10px;
    background: linear-gradient(90deg, #1258a3 220px,#0e64be 0);
    display: flex;
    justify-content: left;
    color: #FFF;
    border-radius: 10px;
    text-shadow: 0 1px 0 #08315c;
    min-height: 50px;
    margin-top: 15px;
    vertical-align: middle !important;
    line-height: 30px;
    font-family: 'Roboto', sans-serif, Arial;
    font-size: 13px;
}

    .button:hover {
        position: relative;
        display: block;
        width: 230px;
        padding: 12px;
        background: linear-gradient(90deg, #454545 220px,#686868 0);
        display: flex;
        justify-content: left;
        color: #FFF;
      
    }

.mostrar {
    display: block;
}

.ocultar {
    display: none;
}

.mb-3 {
    margin-bottom: 0 !important;
}

.Content-Div {
    margin: 1px;
    height: 30px;
    border: none !important;
    background: none;
    float: right;
    position: fixed;
    bottom: 120px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.close-btn {
    width: 100%;
    height: 30px;
    color: #333;
    background: none !important;
    border: none !important;
    font: 16px Arial;
    text-align: right;
    padding-right: 10px !important;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
}
.animatedBtn1 {
    width: initial;
    height: initial;
    animation: crescendo 2s alternate infinite ease-in;
}

.navbar-dark {
    background-color: rgb(10, 82, 159);
}

.navbar {
    z-index: 9999 !important;
    min-height: 90px !important;
}

.ma1 {
    z-index: 9990 !important;
    color: aqua;
    position: absolute;
    top: -20px;
    left: -10px;
}

@keyframes crescendo {
    0% {
        transform: scale(.95);
        opacity: 0.9;    }

    100% {
        transform: scale(1.05);
        opacity: 0.7;
    }
}


.webgl {
    z-index: 500;
    background-color: rgb(255, 255, 255) !important;
}

.loading-bar
{
    position: absolute;
    top: 73px;
    width: 100%;
    height: 100%;
    background: rgb(10, 82, 159);
    transform: scaleX(0.0);
    transform-origin: top left;
    transition: transform 0.75s;
    will-change: transform;
}

.loading-bar.ended
{    
    transform-origin: top right;
    transition: transform 1.5s ease-in-out;
}

.btnMachinery {
    margin-left: 4px !important;
    font-size: 13px;
    border-radius: 4px;
    background-color: #ffffffba;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    color: #222;
    text-decoration: none;
    z-index: 9999 !important;
    border: 2px solid rgb(255, 255, 255);
}

    .btnMachinery:hover {
        margin-left: 4px !important;
        font-size: 13px;
        border-radius: 4px;
        background-color: #333333ff;
        padding-top: 2px;
        padding-bottom: 4px;
        padding-left: 6px;
        padding-right: 6px;
        color: rgb(222, 222, 222);
        text-decoration: none;
        z-index: 9999 !important;
        cursor: pointer;
        border: 2px solid rgb(250, 250, 250);
    }

.myBtn {
    background-color: rgb(240, 240, 240) !important;
    border-radius: 6px;
    border: 1px solid #888;
    padding: 10px;
    font-size: 13px;
    color: rgb(44, 44, 44);
    text-decoration: none;
    z-index: 0 !important;
    margin-right: 10px !important;
}

@media only screen and (max-width: 620px) {
   #buttons {
       display: none !important;    
   }

    .myBtn {
        background-color: transparent !important;
        border-radius: 6px;
        border: none !important;
        padding: 5px;
        font-size: 12px;
        color: rgb(44, 44, 44);
        text-decoration: underline;
        z-index: 0 !important;
        margin-right: 5px !important;
        display: block !important;
    }

}


.Overlay {
    z-index: 0 !important;
    position: fixed;
    top: 10% !important;
    right: 2% !important;
}

.OverlayButtons {
    z-index: 1 !important;
    position: fixed;
    bottom: 100px !important;
    float: right;
    right: 2px !important;
}



/* MED */
.point_med {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 8888 !important;
    /* pointer-events: none; */
}

.botones {
    position: absolute;
    top: 50%;
    left: 50%;
}

    .botones .label {
        position: absolute;
        top: -20px;
        left: -10px;
        min-width: 110px;
        max-width: 350px;
        border-radius: 8px;
        background: rgb(15, 87, 163, 0.9);
        padding: 10px;
        color: #e0e0e0;
        text-shadow: 1px 1px 1px rgb(17, 68, 122);
        text-align: center;
        vertical-align: middle !important;
        font-weight: 600;
        font-size: 18px;
        cursor: pointer;
        transform: scale(0, 0);
        transition: transform 0.3s;
        z-index: 9999 !important;
        border: 1px solid rgb(41, 107, 176);
        text-transform: uppercase;
    }

    .botones.visible .label {
        transform: scale(1, 1);
    }

    .botones:hover {
        opacity: 1;
        background: rgb(5, 96, 191);
        padding: 10px;
        color: #e5e5e5;
        text-shadow: 1px 1px 1px rgb(18, 65, 116);
        transition: transform 0.3s;
        z-index: 9999 !important;
        border: 1px solid rgb(29, 97, 168);
    }

    .point_med .label {
        position: absolute;
        top: -20px;
        left: -10px;
        min-width: 110px;
        max-width: 350px;
        border-radius: 8px;
        background: rgb(15, 87, 163, 0.9);
        padding: 10px;
        color: #e0e0e0;
        text-shadow: 1px 1px 1px rgb(17, 68, 122);
        text-align: center;
        vertical-align: middle !important;
        font-weight: 600;
        font-size: 18px;
        cursor: pointer;
        transform: scale(0, 0);
        transition: transform 0.3s;
        z-index: 8888 !important;
        border: 1px solid rgb(41, 107, 176);
        text-transform: uppercase;
    }

    .point_med .text {
        position: absolute;
        top: 30px;
        left: -225px;
        width: 450px;
        padding: 20px;
        background: #ffffffee;
        border: 1px solid #979797;
        color: #242424;
        border-radius: 8px;
        line-height: 1.3em;   
        font-weight: 100;
        font-size: 14px;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        z-index: 9999 !important;
    }


    .point_med:hover .text {
        opacity: 1;
    }

    .point_med.visible .label {
        transform: scale(1, 1);
    }

.label:hover {
    opacity: 1;
    background: rgb(5, 96, 191);
    padding: 10px;
    color: #e5e5e5;
    text-shadow: 1px 1px 1px rgb(18, 65, 116);
    transition: transform 0.3s;
    z-index: 9999 !important;
    border: 1px solid rgb(29, 97, 168);
}

.botones:hover {
    opacity: 1;
    background: rgb(5, 96, 191);
    padding: 10px;
    color: #e5e5e5;
    text-shadow: 1px 1px 1px rgb(18, 65, 116);
    transition: transform 0.3s;
    z-index: 9999 !important;
    border: 1px solid rgb(29, 97, 168);
}




/*     */

div.stickyBack {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 180px;
    padding-right: 6%;
    z-index: 10000 !important;
}

.imageFilterAbout {
    filter: brightness(1.2) opacity(0.2) saturate(0.0);
    transition: 0.7s;
}

    .imageFilterAbout:hover {
        filter: none;
    }



.padder08 {
    padding-left: 4.0%;
    padding-right: 4.0%;
}

.padder09 {
    padding-left: 9.5%;
    padding-right: 9.5%;
}
.padder10 {
    padding-left: 10%;
    padding-right: 10%;
}
.padder15 {
    padding-left: 15%;
    padding-right: 15%;
}
.padder20 {
    padding-left: 20%;
    padding-right: 20%;
}

  
.txtShadow {
    text-shadow: 0px 0px 2px rgb(20, 20, 20);
}

.img32 {
    max-width: 32px;
    height: auto;
}

.img64 {
    max-width: 64px;
    height: auto;
}

.img128 {
    max-width: 128px;
    height: auto;
}
.img128Fixed {
    border: 1px solid #a4a4a4;
    box-shadow: 0 0 2px #a5a5a5;
    border-radius: 4px;
    width: 128px !important;
    height: 72px !important;
}
.img256Fixed {
    border: 1px solid #ffffff;
    box-shadow: 0 0 2px #a5a5a5;
    border-radius: 5px;
    width: 256px !important;
    height: 144px !important;
}

.img256 {
    max-width: 256px;
    height: auto;
}
.img512 {
    max-width: 512px;
    height: auto;
}

.img1280 {
    max-width: 1280px;
    height: auto;
}

.imgBorder80 {
    max-width: 80%;
    height: auto;
}

.imgBorder100 {
    max-width: 600px;
    height: auto;
}

.imgResponsive {
    max-width: 98% !important;
    height: auto !important;

}

.boxer {
    
    margin: 1px;
    margin-top: 5px;
    border-radius: 6px;
    border: 1px solid #c3c3c3;
    opacity: 0.9;
    transition-duration: 0.2s;
}
.boxer:hover {

    margin: 1px;
    margin-top: 5px;
    border-radius: 6px;
    border: 1px solid rgb(92, 114, 138);
    box-shadow: 2px 2px 8px #bfbfbfb2;
    opacity: 1;
}

.auto {
    margin: auto;
}

.gridderRow {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

.gridderCol {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#background {
    background-size: 100% 100%;
    height: 100%;
    background-repeat: no-repeat;
}
.btn {
    padding: 6px;
    min-width: 30px;
    margin-bottom: 5px;
    margin-top: 3px;
    position: relative;
    z-index: 150 !important;
    font-size: 13px;
    font-family: 'Roboto', sans-serif padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
    box-shadow: 0px 0px 4px 0px rgba(71, 71, 71, 0.2);
    margin-left: 3px;
    color: #cfd1d3;
}

.btn-info {
    font-family: 'Roboto', sans-serif color: rgb(225, 225, 225);
    background-color: rgba(77, 77, 77, 0.90);
    border: 1px solid rgba(214, 19, 19, 0.904);
    box-shadow: 0px 0px 4px 0px rgba(63, 63, 63, 0.2);
}

    .btn-info:hover {
        color: #fff;
        border: 1px solid rgb(25, 60, 78);
        background-color: rgb(181, 181, 181);
    }

.btn-primary {
    color: rgb(235, 235, 235);
    background-color: rgba(214, 19, 19, 0.904);
    border: 1px solid rgb(167, 13, 8);
}

    .btn-primary:hover {
        color: #fff;
        border: 1px solid rgb(150, 22, 13);
        background-color: rgb(163, 17, 17);
    }

.btn-outline-primary {
    color: #ea190c;
    background-color: rgba(30, 30, 30, 0.7);
    background-image: none;
    border-color: #e91313;
}

    .btn-outline-primary:hover {
        color: rgba(200, 200, 200,1);
        background-color: rgba(99, 99, 99, 0.9);
        background-image: none;
        border-color: #e91313;
    }

.btn-danger {
    color: rgb(235, 235, 235);
    background-color: rgba(214, 19, 19, 0.904);
    box-shadow: 0px 0px 4px 0px rgba(71, 71, 71, 0.2);
 
}

    .btn-danger:hover {
        color: #fff;
        background-color: rgb(163, 17, 17);
    }

.btn-outline-dark {
    background-color: rgba(99, 99, 99, 0.5) !important; 
    border-color: #525456 !important;
    color: rgb(247, 57, 57);
}
.btn-outline-dark:hover {
    background-color: rgba(18, 18, 18, 0.1) !important;
    border-color: #525456 !important;
}
.mb5 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr25 {
    padding-right: 25px;
}

.pr50 {
    padding-right: 50px;
}

.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pl25 {
    padding-left: 25px;
}

.pl50 {
    padding-left: 50px;
}

.hh15 {
    height: 15px;
}

.hh-20 {
    height: 20px;
}

.hh-25 {
    height: 25px;
}

.hh-40 {
    height: 40px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-5 {
    margin-top: 5px;
}

.mt1 {
    margin-top: 2px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt50 {
    margin-top: 50px;
}

.mt-50minus {
    margin-top: -36px;
}

.mt100 {
    margin-top: 86px !important;
}

.mt-150 {
    margin-top: 150px;
}

.mt-250 {
    margin-top: 250px;
}
.mt-375 {
    margin-top: 375px;
}

.mt-500 {
    margin-top: 500px;
}

.mt-750 {
    margin-top: 750px;
}

.mt-1000 {
    margin-top: 1000px;
}

.mr50 {
    margin-right: 50px;
}
.ml50 {
    margin-left: 50px;
}


.pt25 {
    padding-top: 25px;
}

.pt50 {
    padding-top: 50px;
}

.pb25 {
    padding-bottom: 25px;
}

.pb50 {
    padding-bottom: 50px;
}
.vtop {
    vertical-align: top;
}



.colorWhite {
    color: #fafafa;
}

.colorDarkGrey {
    color: #646464;
}

.colorFastBlack {
    color: #272727;
}

.colorMedGrey {
    color: #8f8f8f;
}

.colorLightGrey {
    color: #ececec;
}

.colorMedGrey {
    color: #acacac;
}

.colorRed, tr .colorRed {
    color: #e10924;
}
.colorTransparent {
    color: rgba(255, 255, 255, 0.00);
}

.colorBlue, tr .colorBlue {
    color: rgb(20, 77, 139);
}

.colorLightBlue {
    color: rgb(120, 185, 213);
}

.colorYellow {
    color: rgb(230, 171, 46);
}

.colorGreenish {
    color: rgb(179, 222, 0);
}

.colorOrangePurple {
    color: rgb(203, 0, 56);
}

.colorPurple {
    color: rgb(204, 0, 200);
}

.colorGreenNormal {
    color: rgb(0, 172, 25);
}

text {
    font-family: 'Roboto', sans-serif
}

.pbold {
    font-weight: 900;
}

.pbold700 {
    font-weight: 700;
}

.pbold600 {
    font-weight: 600;
}

.p9, .p10, .p11, .p12, .p13, .p14, .p15, .p16, .p17, .p18, .p20, .p21, .p22, .p24, .p25 {
    font-family: 'Roboto', sans-serif ;
    margin-bottom: -4px;
    margin-top: -4px;
}

.p9 {
    font-size: 0.6em;
}
.p10 {
    font-size: 0.7em;
}
.p11 {
    font-size: 0.8em;
}

.p12 {
    font-size: 0.9em;
}

.p13 {
    font-size: 1.0em;
}

.p13s {
    font-size: 1.1em;
}

.p14 {
    font-size: 1.2em;
}

.p15 {
    font-size: 1.3em;
}

.p16 {
    font-size: 1.4em;
}

.p17 {
    font-size: 1.5em;
}

.p18 {
    font-size: 1.6em;
}

.p19 {
    font-size: 1.7em;
}

.p20 {
    font-size: 1.8em;
}

.p21 {
    font-size: 1.9em;
}

.p22 {
    font-size: 2.2em;
}

.p24 {
    font-size: 2.5em;
}

.p25 {
    font-size: 3em;
}

.p40 {
    font-size: 6em;
}

.dropdown-menu a {
    text-decoration: none !important;
}

    .dropdown-menu a:hover {
        text-decoration: none !important;
    }