/* barra de navegacion responsive mode */

@media (min-width: 769px){
    nav.navigation__bar {
        display: flex;
        position: fixed;
    }
    
}

/* Colores responsive */

@media (max-width: 768px){
    .bg-movil-blanco {
        background-color: #ffffff !important ;
    }
    #app {
        min-height: 400px;
        margin: 0;
    }
    body {
        background-color: #40BFEF;
    }
    .container__color {
        background-color: #40BFEF !important;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0;
    }
    
    .btn-custom {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background-color: #578AC8;
        border-color:  #578AC8;
    }
    .btn-custom:hover {
        background-color: #9156A2;
        border-color:  #9156A2;
    }
    .btn-custom:active {
        background-color: #9156A2 !important;
        border-color:  #9156A2 !important;
    }
    .btn-custom:focus {
        background-color: #9156A2;
        border-color:  #9156A2;
    }
}
/* Ancho responsivas
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap */
.w-fit-content {
    width: auto;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .w-fit-content-sm {
        width: fit-content;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .w-fit-content-md {
        width: fit-content;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .w-fit-content-lg {
        width: fit-content;
    }
} 

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .w-fit-content-xl {
        width: fit-content;
    }
}

/* Colores de background responsivos */
/* Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .bg-none-sm {
        background-color: rgba(0,0,0,0) !important;
    }
} 

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .bg-none-md {
        background-color: rgba(0,0,0,0) !important;
    }
} 

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .bg-none-lg {
        background-color: rgba(0,0,0,0) !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .bg-none-xl {
        background-color: rgba(0,0,0,0) !important;
    }
} 

/* Posiciones responsivas */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .position-absolute-sm {
        position: absolute !important;
    }
} 

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .position-absolute-md {
        position: absolute !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .position-absolute-lg {
        position: absolute !important;
    }
    
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .position-absolute-xl {
        position: absolute !important;
    }
}
@media (max-width: 1362px) {
    .img-position {
        display: none;
    }
    .r-min {
        margin-top: 2rem !important;
    }
}

@media (max-width: 1262px) {
    
    .r-min {
        margin-top: 4rem !important;
    }
}
@media (max-width: 992px) {
    .footer-space {
        height: 50px !important;
    }
    .text-m-center {
        text-align: center;

    }
    .mt-m-3 {
        margin-top: 3rem;
    }
    .sosten-top-navbar {
        position: absolute;
        width: 100%;
        z-index: 100;
    }
}


/* animaciones y especiales */
@media (max-width: 768px){
    
    .bg-movil{
        width: 100% !important;
        background: url("/./././assets/images/Recurso7.webp"); 
        background-repeat: no-repeat;
        background-size: cover;
        animation-name: move-bg;
        animation-duration:60s;
        animation-direction: alternate;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        
    }
    @keyframes move-bg {
        0% {background-position-x: right;}
        100% {background-position-x: left;}
    }

}
@media (min-width: 768px) {
        .container__color {
            background-color: #40BFEF;
        }
}
@media (min-width: 769px) {
    .img__movil--none{
        display: none;
    }
}
@media (max-width: 768px) {
    .movil-none {
        display: none;
    }
    .img__movil{
        width: 50%;
        padding: 10px 5%;
        background-color: #ffffff;
        border-radius: 14px;
        
    }
    .img__desktop--none {
        display: none;
    }
    .text-custom-weight-sm {
        font-size: 1rem !important;
    }
    .relativo-flechas-movil {
        top: 200px;
        position: relative;
    }
}

/* Muestra de */
@media (max-width: 768px) {
    .movil-numbers {
        width: 100%;
        position: absolute;
        display: flex;
        flex-wrap: wrap;
    }
    .movil-numbers > p{
        max-width: 30px;
        margin-right: 5px !important;
    }
    .container-board{
        margin-top: 40px !important;
    }
}