body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
canvas {
    position: absolute;
}
#userValid{
    font-size: 25em;
}
.fa-user-check{                
    animation: usercheckanimation 4s infinite;
}
.fa-user-pen{                
    animation: usercheckanimation 4s infinite;
}
.fa-user-xmark{
    animation: usertimesanimation 4s infinite;
}
@keyframes usercheckanimation{                  
    from    {color: #4FFFB0;opacity: 0.25}
    to      {color: #018749;opacity: 1}
}
@keyframes usertimesanimation{
    from    {color: #fd5c63;opacity: 0.25}                
    to      {color: #BA0021;opacity: 1}
}            

#buttonsdiv button {
    min-width: 25em; 
    max-width: 50em; 
    min-height: 10em; 
    margin: 0em 5em; 
}

#footer{                
    position: relative;                
}

#carouselWithControls{
    max-width: 60em;
}


a.help{
    color: #fff;
    background-color: #c41821;
    display: inline-block;
    border-radius: 100%;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    -webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    align-content: center;
    top: -3em;
    position: relative;
    left: 80em;
    width: 3em;
    height: 3em;
}

a.help:hover {
    transform: scale(1.2);
    color: #3c3436;
    box-shadow: 0 0 5px #0d0000;
    text-shadow: 0 0 5px #383131;
}

a.help-navbar{
    color: #fff;
    /* background-color: #c41821; */
    display: inline-block;
    border-radius: 100%;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    -webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
    align-content: center;
    /* top: -3em; */
    position: relative;
    /* left: 80em; */
    width: 3em;
    height: 3em;
}

a.help-navbar:hover {
    transform: scale(1.2);
    color: #3c3436;
    box-shadow: 0 0 5px #0d0000;
    text-shadow: 0 0 5px #383131;
}

#leftdiv {
    justify-content: center;
    display: grid;          
    top:-2em;
}

#leftdiv strong{
    font-size: 0.75em;    
    font-weight: bolder;
}

#leftdiv img{
    max-width: 28em;
}

#rightdiv {
    /* left: 1em;
    position: absolute;
    width: 5em;
    top: 30em; */            
    justify-content: center;
    display: flex;           
    
}

/*pedro*/
#logo-um-pie {
    display: flex; 
    margin: 0 auto; 
    align-items: center;        
}

.logo-um-pie img, 
.logo-dierm.img-responsive, 
.logo-hr.img-responsive {
    height: auto; 
}


 /* Pedro Salinas: Estilos para dispositivos móviles */
 @media (max-width: 768px) {
    
    #buttonsdiv button {
        min-width: 8em; 
        max-width: 16em; 
        min-height: 3em; 
        margin: 0.2em; 
        font-size: 0.4em; 
        height: 18em;
    }

    #buttonsdiv span{
        font-size: 4.5em;
    }

    #buttonsdiv p{
        font-size: 1.5em;
    }
    
    header {
        display: flex; 
        align-items: center; 
        justify-content: space-between;
    }

    #username {
    font-size: 1em;
    }   
    .col {
        padding: 0.5em 0; 
        justify-content: center; 
        text-align: center; 
    }
    #videodiv {
        width: 100%; 
        max-width: 100%; 
        height: auto; 
    }
    #inputVideo {
        max-height: 250px; 
    }

    canvas {
        height: auto; 
    }
    #showlandmarks {
        height: auto; 
    }
    #userdiv  {
       position: relative;
       max-height: 250px; 
       height: 250px;   
    }
    .fa-user-check, .fa-user-pen, .fa-user-xmark {
        position: absolute; 
        top: 50%;                 
        left: 50%;                  
        transform: translate(-50%, -50%) scale(0.5);
    }

    #leftdiv,
    #rightdiv {
        display: none; /* Ocultar imágenes laterales en móviles */
    }

    .col-md-3 {
        display: none !important; 
    }

    #carouselWithControls {
        height: 20em; 
    }
    #loadprogress {
        font-size: 0.9em; 
        max-width: 80%;
    }   

    #loadingMsg {
        font-size: 0.9em; 
        width: 80%;
    }   

    #footer {
        flex-direction: column; 
        align-items: center; 
    }

    .banda-pie {
        width: 100%; 
        justify-content: center; 
    }

    .col-md-7, .col-sm-5, .copyright-pie {
        width: 100%;
        text-align: center; 
        float: center;
    }

    .redes-pie {
        float: center;

    }

    .redes-pie a {
        float: center;
    }

    .copyright-pie-titulo {
        font-size: 1em; 
    }

    .logo-um-pie img, .logo-dierm.img-responsive, .logo-hr.img-responsive {
        display: flex; 
        margin: 0 auto; 
        align-items: center; 
    }
}

/*Pedro Salinas: Tablets*/

 @media (min-width: 769px) and (max-width: 1024px) {

    #buttonsdiv button {
        min-width: 8em; 
        max-width: 16em; 
        min-height: 3em; 
        margin: 0.2em; 
        font-size: 0.6em; 
        height: 18em;
    }

    #buttonsdiv span{
        font-size: 4.5em;
    }

    #buttonsdiv p{
        font-size: 1.5em;
    }

    header {
        display: flex; 
        align-items: center; 
        justify-content: space-between;
    }

    #username {
    font-size: 1em;
    }   
    .col {
        padding: 0.5em 0; 
        justify-content: center; 
        text-align: center; 
    }
    #videodiv {
        width: 100%; 
        max-width: 100%; 
        height: auto; 
    }
    #inputVideo {
        max-height: 350px; 
    }

    canvas {
        height: auto; 
    }
    #showlandmarks {
        height: auto; 
    }
    #userdiv  {
        position: relative;
        max-height: 250px; 
        height: 250px;   
     }
     .fa-user-check, .fa-user-pen, .fa-user-xmark {
         position: absolute; 
         top: 50%;                    
         left: 50%;                   
         transform: translate(-50%, -50%) scale(0.5);
     }

    #leftdiv,
    #rightdiv {
        display: none; /* Ocultar imágenes laterales en móviles */
    }
    
    .col-md-3 {
        display: none !important; 
    }

    #carouselWithControls {
        height: 50em; 
    }
    #loadprogress {
        font-size: 0.9em; 
        max-width: 80%;
    }   

    #loadingMsg {
        font-size: 0.9em; 
        width: 80%;
    }   

    #footer {
        flex-direction: column; 
        align-items: center; 
    }

    .banda-pie {
        width: 100%; 
        justify-content: center; 
    }

    .col-md-7, .col-sm-5, .copyright-pie {
        width: 100%;
        max-width: 100%;
    }

    .redes-pie {
        display: flex;              
        justify-content: center;      
        align-items: center;          
        width: 100%;                
        max-width: 100%;            
  
    }

    .redes-pie a {
        font-size: 0.8em;  

    }

    .copyright-pie-titulo {
        font-size: 1em; 
    }

    .logo-um-pie img, .logo-dierm.img-responsive, .logo-hr.img-responsive {
        display: flex; 
        margin: 0 auto; 
        align-items: center; 
    }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1024px) {

    #leftdiv,
    #rightdiv {
        display: none;
    }
    #col-md-3  {
        display: none;
    }

    #buttonsdiv button {
        min-width: 7em; 
        max-width: 15em; 
        min-height: 3em; 
        margin: 0.2em; 
        font-size: 0.6em; 
        display: inline-block; 
    }

    #buttonsdiv {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5em;
    }
}


@media (min-width: 1025px) and (max-width: 1280px) {

    #buttonsdiv button {
        min-width: 8em; 
        max-width: 16em; 
        min-height: 3em; 
        margin: 0.2em; 
        font-size: 0.6em; 
        height: 18em;
    }

    #buttonsdiv span{
        font-size: 4.5em;
    }

    #buttonsdiv p{
        font-size: 1.5em;
    }

    header {
        width: 100%;
    }

    #username {
        font-size: 1.2em;
    }   

    /* #buttonsdiv button {
        font-size: 0.8em; 
        min-width: 10em; 
    } */

    header {
        flex-direction: row; 
        justify-content: space-between; 
    }

    #videodiv {
        max-width: 80%; 
    }

    .col {
        padding: 1em; 
    }

 
    #leftdiv {
        width: 100px; 
        position: relative; 

    }
    #leftdiv img {
        width: auto; 
        height: auto;
        max-width: 100%; 
        max-height: 100px; 
    }

    #maindiv {
        width: auto; 
        height: auto;
    }
    .adyvlogo {
        width: auto; 
        height: auto;
        max-width: 100%; 
        max-height: 100px; 
    }

    #carouselWithControls {
        position: center;
    }

    #footer {
        flex-direction: row; 
        justify-content: space-between; 
        width: 100%; 
    }

    .redes-pie {
        font-size: 1em;  
    }

    .logo-um-pie img, .logo-dierm.img-responsive, .logo-hr.img-responsive {
        display: flex; 
        margin: 0 auto; 
        align-items: center; 
    }
}

@media (min-width: 1500px) and (max-width: 1600px) {

    #buttonsdiv button {
        min-width: 16em; 
        max-width: 32em; 
        min-height: 3em; 
        margin: 0.2em; 
        font-size: 0.6em; 
        height: 18em;
    }

    #buttonsdiv span{
        font-size: 4.5em;
    }

    #buttonsdiv p{
        font-size: 1.5em;
    }

    header {
        width: 100%;
    }

    #username {
        font-size: 1.2em;
    }   

    header {
        flex-direction: row; 
        justify-content: space-between; 
    }

    #videodiv {
        max-width: 80%; 
    }

    .col {
        padding: 1em; 
    }

 
    #leftdiv {
        width: 100px; 
        position: relative; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    #leftdiv img {
        width: auto; 
        height: auto;
        max-width: 100%; 
        max-height: 100px;

    }

    #maindiv {
        width: auto; 
        height: auto;
    }
    .adyvlogo {
        width: auto; 
        height: auto;
        max-width: 100%; 
        max-height: 100px; 
    }

    #carouselWithControls {
        position: center;
    }

    #footer {
        flex-direction: row; 
        justify-content: space-between; 
        width: 100%; 
    }

    .redes-pie {
        font-size: 1em;  
    }

    .logo-um-pie img, .logo-dierm.img-responsive, .logo-hr.img-responsive {
        display: flex; 
        margin: 0 auto; 
        align-items: center; 
    }
}