:root {

    /*  ----- COLORES ----- */



    --GeneralSystem_TimeLine: #4d3595;

    --GeneralSystem_TimeLine_secondary: #531ef0;



    --GeneralSystem_btn_primary: #4488D3;

    --GeneralSystem_btn_primary_hover: #559de9;

    --GeneralSystem_btn_secondary: #c8d6ee;

    --GeneralSystem_btn_secondary_hover: #e9f0fc;

    --GeneralSystem_btn_tertiary: #2A5F7F;

    --GeneralSystem_btn_tertiary_hover: #224e69;

    --GeneralSystem_btn_quaternary: #6DC3FE;

    --GeneralSystem_btn_quaternary_hover: #92d4ff;



    --GeneralSystem_bg_orange: #FF6500;

    --GeneralSystem_bg_orange_hover: #ff8c00;

    --GeneralSystem_bg_orange_dark: #FC4100;

    --GeneralSystem_bg_orange_light: #ffa435;

    --GeneralSystem_estado_orange: #ffd188;



    --GeneralSystem_bg_info: #0dcaf0;

    --GeneralSystem_bg_info_hover: #05b9dd;

    --GeneralSystem_bg_info_dark: #01a9ca;

    --GeneralSystem_bg_info_light: #8fdeee;

    --GeneralSystem_estado_info: #e1f6fc;



    --GeneralSystem_bg_danger: #e22235;

    --GeneralSystem_bg_danger_hover: #f3283c;

    --GeneralSystem_bg_danger_dark: #d61c2f;

    --GeneralSystem_bg_danger_light: #ff98a2;

    --GeneralSystem_estado_danger: #ffccd1;



    --GeneralSystem_bg_warning: #ffc107;

    --GeneralSystem_bg_warning_hover: #ffd207;

    --GeneralSystem_bg_warning_dark: #ffa600;

    --GeneralSystem_bg_warning_light: #fbf492;

    --GeneralSystem_estado_warning: #fff9c1;



    --GeneralSystem_bg_success: #01a31c;

    --GeneralSystem_bg_success_hover: #02b620;

    --GeneralSystem_bg_success_dark: #04911b;

    --GeneralSystem_bg_success_light: #94fda6;

    --GeneralSystem_estado_success: #baffce;



    --GeneralSystem_bg_purple: #6600ff;

    --GeneralSystem_bg_purple_hover: #781fff;

    --GeneralSystem_bg_purple_dark: #5000c8;

    --GeneralSystem_bg_purple_light: #8145dc;

    --GeneralSystem_estado_purple: #c29aff;



    --GeneralSystem_bg_primary: #4074c7;

    --GeneralSystem_bg_primary_hover: #628dd2;

    --GeneralSystem_bg_primary_dark: #2757a5;

    --GeneralSystem_bg_primary_light: #6d9deb;

    --GeneralSystem_estado_primary: #9abfff;



    --GeneralSystem_bg_plomo: #9bbdcb;

    --GeneralSystem_bg_plomo_hover: #afcedb;

    --GeneralSystem_bg_plomo-dark: #7aa2b1;

    --GeneralSystem_bg_plomo-light: #e4e4e4;

    --GeneralSystem_body_plomo: #ecf0f5;



    /*  -----  COLORES ----- */

}

body {
    min-height: 100%;
    background-color: #fff;
}

nav#navPrincipal:not(.nav-scrolled) {
    box-shadow: none !important;
}

#navPrincipal {
    transition: background-color 0.3s ease, color 0.3s ease;
}

#navPrincipal.nav-scrolled {
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.new-shadow{
    box-shadow: 0 20px 45px rgba(20, 30, 60, 0.08);
}

.parent-box {
    /* background-color: var(--GeneralSystem_btn_secondary); */
    display: flex;
}

.box {
    background-color: #fff;
    margin: 10px;
    height: auto;
}

.rounded-18 {
    border-radius: 18px;
}

.rounded-12 {
    border-radius: 12px;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-new-lef {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.rounded-new-right {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.rounded-new-top {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.rounded-new-bottom {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.text-justificado {
    text-align: justify !important;
    text-justify: inter-word !important;
}

.img-carousel {
    width: 100%;
    /* height: 100vh; */
}

.btn-circle {
    position: absolute;
    top: -22px;
    right: -22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #5b9bff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(91, 155, 255, 0.4);
    z-index: 2;
}

.btn-circle i {
    color: #fff;
    font-size: 22px;
}


.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px #00000033;

    z-index: 1;

}



.dropdown:hover .dropdown-content {

    display: block;

}



.desc {

    padding: 15px;

    text-align: center;

}



.bg-new-primary {

    background-color: var(--GeneralSystem_btn_primary);

}



.bg-new-secondary {

    background-color: var(--GeneralSystem_btn_secondary);

}



.bg-new-tertiary {

    background-color: var(--GeneralSystem_btn_tertiary);

}



.bg-new-quaternary {

    background-color: var(--GeneralSystem_btn_quaternary);

}



.btn-new-primary {

    background-color: var(--GeneralSystem_btn_primary);

    color: var(--bs-white);

}



.btn-new-primary:hover {

    background-color: var(--GeneralSystem_btn_primary_hover);

    color: var(--bs-white);

}



.btn-new-secondary {

    background-color: var(--GeneralSystem_btn_secondary);

    color: var(--GeneralSystem_btn_tertiary);

}



.btn-new-secondary:hover {

    background-color: var(--GeneralSystem_btn_secondary_hover);

    color: var(--GeneralSystem_btn_tertiary_hover);

}



.btn-new-tertiary {

    background-color: var(--GeneralSystem_btn_tertiary);

    color: #fff;

}



.btn-new-tertiary:hover {

    background-color: var(--GeneralSystem_btn_tertiary_hover);

    color: #fff;

}



.btn-new-quaternary {

    background-color: var(--GeneralSystem_btn_quaternary);

    color: var(--GeneralSystem_btn_primary);

}



.btn-new-quaternary:hover {

    background-color: var(--GeneralSystem_btn_quaternary_hover);

    color: var(--GeneralSystem_btn_primary_hover);

}



.text-new-primary {

    color: var(--GeneralSystem_btn_primary) !important;

}



.text-new-secondary {

    color: var(--GeneralSystem_btn_secondary) !important;

}



.text-new-tertiary {

    color: var(--GeneralSystem_btn_tertiary) !important;

}



.text-new-quaternary {

    color: var(--GeneralSystem_btn_quaternary) !important;

}



.btn-outline-new-boton-rounded {

    background-color: var(--bs-white) !important;

    border: 1px solid var(--GeneralSystem_btn_quaternary) !important;

    color: var(--GeneralSystem_btn_quaternary) !important;

    border-radius: 20px;

    font-size: 11px;

    transition: 0.7s;

}



.btn-outline-new-boton-rounded:hover {

    background-color: var(--GeneralSystem_btn_quaternary) !important;

    color: var(--bs-white) !important;

    transition: 0.7s;

}



.btn-outline-new-boton-rounded:active {

    background-color: var(--GeneralSystem_btn_quaternary) !important;

    color: var(--bs-white) !important;

}



/* ------ */



.btn-outline-danger-rounded {

    background-color: var(--bs-white) !important;

    border: 1px solid var(--GeneralSystem_bg_danger) !important;

    color: var(--GeneralSystem_bg_danger) !important;

    border-radius: 20px;

    font-size: 11px;

    transition: 0.7s;

}



.btn-outline-danger-rounded:hover {

    background-color: var(--GeneralSystem_bg_danger_hover) !important;

    color: var(--bs-white) !important;

    transition: 0.7s;

}



.btn-outline-danger-rounded:active {

    background-color: var(--GeneralSystem_bg_danger_dark) !important;

    color: var(--bs-white);

}



/* ------ */



.btn-outline-warning-rounded {

    background-color: var(--bs-white) !important;

    border: 1px solid var(--GeneralSystem_bg_warning) !important;

    color: var(--GeneralSystem_bg_warning) !important;

    border-radius: 20px;

    font-size: 11px;

    transition: 0.7s;

}



.btn-outline-warning-rounded:hover {

    background-color: var(--GeneralSystem_bg_warning_hover) !important;

    color: var(--bs-white) !important;

    transition: 0.7s;

}



.btn-outline-warning-rounded:active {

    background-color: var(--GeneralSystem_bg_warning_dark) !important;

    color: var(--bs-white);

}



/* ------ */



.btn-outline-info-rounded {

    background-color: var(--bs-white) !important;

    border: 1px solid var(--GeneralSystem_bg_info) !important;

    color: var(--GeneralSystem_bg_info) !important;

    border-radius: 20px;

    font-size: 11px;

    transition: 0.7s;

}



.btn-outline-info-rounded:hover {

    background-color: var(--GeneralSystem_bg_info_hover) !important;

    color: var(--bs-white) !important;

    transition: 0.7s;

}



.btn-outline-info-rounded:active {

    background-color: var(--GeneralSystem_bg_info_dark) !important;

    color: var(--bs-white) !important;

}



/* ------ */



.btn-outline-primary-rounded {

    background-color: var(--bs-white) !important;

    border: 1px solid var(--GeneralSystem_bg_primary) !important;

    color: var(--GeneralSystem_bg_primary) !important;

    border-radius: 20px;

    font-size: 11px;

    transition: 0.7s;

}



.btn-outline-primary-rounded:hover {

    background-color: var(--GeneralSystem_bg_primary_hover) !important;

    color: var(--bs-white) !important;

    transition: 0.7s;

}



.btn-outline-primary-rounded:active {

    background-color: var(--GeneralSystem_bg_primary_dark) !important;

    color: var(--bs-white);

}



/* ------ */



.btn-outline-success-rounded {

    background-color: var(--bs-white) !important;

    border: 1px solid var(--GeneralSystem_bg_success) !important;

    color: var(--GeneralSystem_bg_success) !important;

    border-radius: 20px;

    font-size: 11px;

    transition: 0.7s;

}



.btn-outline-success-rounded:hover {

    background-color: var(--GeneralSystem_bg_success_hover) !important;

    color: var(--bs-white) !important;

    transition: 0.7s;

}



.btn-outline-success-rounded:active {

    background-color: var(--GeneralSystem_bg_success_dark) !important;

    color: var(--bs-white) !important;

}



/* ------ */



.btn-outline-purple-rounded {

    background-color: var(--bs-white) !important;

    border: 1px solid var(--GeneralSystem_bg_purple) !important;

    color: var(--GeneralSystem_bg_purple) !important;

    border-radius: 20px;

    font-size: 11px;

    transition: 0.7s;

}



.btn-outline-purple-rounded:hover {

    background-color: var(--GeneralSystem_bg_purple_hover) !important;

    color: var(--bs-white) !important;

    transition: 0.7s;

}



.btn-outline-purple-rounded:active {

    background-color: var(--GeneralSystem_bg_purple_dark) !important;

    color: var(--bs-white) !important;

}



/*

 * Component: Movimientos

*/

.movim {

    cursor: pointer;

    transition: 0.7s;

}



.movim:hover {

    -webkit-transform: scale(0.9);

    -moz-transform: scale(0.9);

    -ms-transform: scale(0.9);

    -o-transform: scale(0.9);

    transform: scale(0.9);

    transition: 0.7s;

}



.movzoom {

    cursor: pointer;

    transition: 0.7s;

}



.movzoom:hover {

    -webkit-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -ms-transform: scale(1.2);

    -o-transform: scale(1.2);

    transform: scale(1.2);

    transition: 0.7s;

}



.img3drotate {

    background-color: transparent;

    transition: 1s;

}



.img3drotate:hover {

    transform: rotateY(180deg);

    transition: 1s;

}



.mov-derecha {

    cursor: pointer;

    transition: 0.5s;

}



.mov-derecha:hover {

    -webkit-transform: translate(10%);

    transform: translate(10%);

    transition: 0.5s;

}



.mov-pequeño {

    cursor: pointer;

    transition: 0.5s;

}



.mov-pequeño:hover {

    -webkit-transform: scale(0.5);

    -moz-transform: scale(0.5);

    -ms-transform: scale(0.5);

    -o-transform: scale(0.5);

    transform: scale(0.5);

    transition: 0.5s;

}



.mov-360 {

    cursor: pointer;

    transition: 0.5s;

}



.mov-360:hover {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

}



.mov-mover-derecha {

    cursor: pointer;

    transition: 0.5s;

}



.mov-mover-derecha:hover {

    /* -webkit-transform: skew(10deg);

    transform: skew(10deg); */

    -webkit-transform: translateX(30px);

    transform: translateX(30px);

}



.mov-mover-abajo {

    cursor: pointer;

    transition: 0.5s;

}



.mov-mover-abajo:hover {

    -webkit-transform: translateY(20px);

    transform: translateY(20px);

    transition: 0.5s;

}



.mov-mover-arriba {

    cursor: pointer;

    transition: 0.5s;

}



.mov-mover-arriba:hover {

    -webkit-transform: translateY(-20px);

    transform: translateY(-20px);

    transition: 0.5s;

}



.mov-mover-izquierda {

    cursor: pointer;

    transition: 0.5s;

}



.mov-mover-izquierda:hover {

    -webkit-transform: translateX(-30px);

    transform: translateX(-30px);

}



.mov-inclinar-arriba {

    cursor: pointer;

    transition: 0.5s;

}



.mov-inclinar-arriba:hover {

    -webkit-transform: skewY(10deg);

    transform: skewY(10deg);

}



.mov-inclinar-derecha {

    cursor: pointer;

    transition: 0.5s;

}



.mov-inclinar-derecha:hover {

    -webkit-transform: skewX(-5deg);

    transform: skewX(-5deg);

}



.mov-inclinar-abajo {

    cursor: pointer;

    transition: 0.5s;

}



.mov-inclinar-abajo:hover {

    -webkit-transform: translateY(30px);

    transform: translateY(30px);

}



.mov-3dhechado {

    cursor: pointer;

    transition: 0.5s;

}



.mov-3dhechado:hover {

    -webkit-transform: perspective(150px) rotateX(20deg);

    transform: perspective(150px) rotateX(20deg);

}



.mov-sobresalido-izq {

    cursor: pointer;

    transition: 0.5s;

}



.mov-sobresalido-izq:hover {

    -webkit-transform: perspective(150px) rotateY(45deg);

    transform: perspective(150px) rotateY(45deg);

}

/*

 * Component: Movimientos

*/

/*
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
} */


/* CELULARES */

@media (min-width: 0px) and (max-width: 575.98px) {

    .img-carousel {

        height: 250px;

    }

    .hidden-xs {
        display: none !important;
    }

    /* #demo{

        margin-top: 73px;

    } */

}



/* TABLET */

@media (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) {
    .hidden-sm {
        display: none !important;
    }
}



/* TABLET */

@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait) {
    .hidden-sm {
        display: none !important;
    }
}



/* PC */

@media (min-width: 768px) and (max-width: 991.98px) {}



/* PC */

@media (min-width: 992px) and (max-width: 1199.98px) {}



/* PC */

@media (min-width: 1200px) and (max-width: 1399.98px) {}



/* PC */

@media (min-width: 1400px) {}