:root {
    /*  ----- COLORES ----- */

    --GeneralSystem_TimeLine: #4d3595;
    --GeneralSystem_TimeLine_secondary: #531ef0;

    --GeneralSystem_btn_primary: #4488D3;
    --GeneralSystem_btn_primary_hover: #559de9;
    --GeneralSystem_btn_secondary: #DCE8FC;
    --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;
}

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

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

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

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

.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
*/

/* CELULARES */
@media (min-width: 0px) and (max-width: 575.98px) {
    .img-carousel {
        height: 250px;
    }
    #demo{
        margin-top: 73px;
    }
}

/* TABLET */
@media (min-width: 576px) and (max-width: 767.98px) and (orientation: landscape) {

}

/* TABLET */
@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait) {

}

/* 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) {

}