@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background-image: url("../img/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
ul{
    overflow: hidden;
}

ul>li{
    list-style: none;
    font-size:20px;
    float:left;
    
}

ul>li>a{
    display: block;
    text-decoration: none;
    color: #ffff;
    padding: 10px;
    position: relative;
}
ul li:hover{
    
    background-color: #10DEEF;
   
}


.cabecera{
    background-color: #0000ff;
    height: 49px;
    position:sticky;
}
.giroscopio{
    width: 100%;
}

p{
    text-align: justify;
    color: #ffff;
    padding: 15px;
}
.posImg1{
   display:flex;
   flex-direction:row;
   justify-content: center;
   align-items: center;
}

.edificio{
    width: 100%;
    aspect-ratio: 16 / 9;
    
}
h2{
    text-align: center;
    color: white;
}

.lineaIzquierda{
    height: 5px;
    background-color: #fff;
    width: 25%;
    position: relative;
    top: 68px;
    left: 156px;
}

.lineaDerecha{
    height: 5px;
    background-color: #fff;
    width: 25%;
    position: relative;
    top: -76px;
    left: 679px;
}

#soldador{
    border-radius: 25px;
}

/*Clase usada cuando la página se mueva*/

.menu-fixed{
    position: fixed;
    z-index:1000;
	top:0;
	max-width:1306px;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.5);
}

.card{
    background-color: rgba(0, 0, 255, 0.5) !important;
}
.card-title{
    text-align: center;
    color:#fff;
}

.etiquetas {
    color: #fff;
}

.fa-solid{
    display: none !important;
}

.cookies{
    background-color: rgb(179, 179, 179);
    width: 100%;
    height: 100px;
    position: fixed;
    z-index:2000;
    top:0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#cookies_btn, #cookies_btn2{
    background-color: #0000ff;
    border-radius: 15px;
    padding: 10px;
    color:#fff;
    margin-top:-25px;
    

}
.cookies>p{
    text-align: center;
    color: #000;
}
.cookies_ocultar{
    display:none;
}

label.error {
    color: #fff;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}

input.error{
    border: 2px dashed #ff0000;
}
footer p{
    text-align: center;
}

.avisoSobreCookies{
    width: 50%;
    position: absolute;
    z-index:100;
    left: 444px;
    top:0px;
    background-color: #fff;
    
}
.textoAviso{
    color:#000;
}

#err0,#err1,#err2,#err3{
    color: red;
}
/*Media Queries*/
@media (max-width: 1920px){
    .lineaIzquierda{
        left: 204px;
    }
    .lineaDerecha{
        left: 767px;
    }

    .avisoSobreCookies{
        width: 50%;
        position: absolute;
        z-index:100;
        left: 444px;
        top:0px;
        background-color: #fff;
        
    }
}
@media (max-width: 1366px){
    .lineaIzquierda{
        left:156px;
    }
    .lineaDerecha{
        left:679px;
        top:-73px;
    }
}
@media (max-width: 1200px){
    .lineaIzquierda{
        left: 160px;
    }
    .lineaDerecha{
        left: 676px;
    }
}

@media (max-width: 992px){
    .lineaIzquierda{
        left:123px;
    }
    .lineaDerecha{
        left:580px;
        top:-73px;
    }
  
}
@media (max-width: 800px){
    .lineaIzquierda{
        left:69px;
    }
    .lineaDerecha{
        left:456px;
        top:-71px;
    }
  
}
@media (max-width: 770px){
    .lineaIzquierda{
        left:20px;
    }
    .lineaDerecha{
        left:364px;
        top:-71px;
    }

    .avisoSobreCookies{
        width: 50%;
        position: absolute;
        z-index:100;
        left: 200px;
        top:0px;
        background-color: #fff;
        
    }
}
@media (max-width: 576px){
    #cartas{
        margin:0 163px;
    }
    .col-sm-4 {
  
        width:100%;
    }
    .cabecera{
        display: none;
    }
    .fa-solid{
        display:block !important;
        font-size: 2.5em;
        color: #fff;
        position: fixed;
        top:-45px;
    }

    .menu_desplegado{
        display: block;
        width: 35%;
        
    }
    .cabecera{
        height: 235px;
        position:fixed;
        z-index:1000;
        left:320px;
        top: 32px;
    }
    ul li:hover{
        width: 100%;
    }
   
}
@media screen and (max-width: 400px){
    #cartas{
        margin:0 163px;
    }
    .col-sm-4 {
  
        width:100%;
    }
    .cabecera{
        display: none;
    }
    .fa-solid{
        display:block !important;
        font-size: 2.5em;
        color: #fff;
        position: fixed;
        top:-45px;
    }

    .menu_desplegado{
        display: block;
        width: 50%;
        
    }
    .cabecera{
        height: 235px;
        position:fixed;
        z-index:1000;
        left:156px;
        top: 32px;
    }
    ul li:hover{
        width: 100%;
    }
   .lineaIzquierda{
        left:138px;
        top: 40px;
        
    }
    .lineaDerecha{
        left:138px;
        top:-44px;
    }
    #soldador{
        width: 108%;
    }
    #cartas{
        margin-left: 78px;
    }
    .avisoSobreCookies{
        width: 50%;
        position: absolute;
        z-index:100;
        left: 100px;
        top:0px;
        background-color: #fff;
        
    }
}