/*
    La hoja maestra de CSS
*/

html {
    scroll-behavior: smooth;
    max-width: 100vw;
}

body * {
    margin: 0;
    padding: 0;
}

main {
    margin: 40px 0 0 0;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.bg-darker {
    background-color: #181818;
}

.justificado {
    text-align: justify;
}

.subtitulo {
    font-size: 46px;
    font-weight: 300;
}

.cabecera {
    padding-top: 16px;
    padding-bottom: 16px;
    backdrop-filter: blur( 5px );
    position: relative;
    z-index: 1;
    /*border-bottom-left-radius: 30% 10%;
    border-bottom-right-radius: 30% 10%; */   
}

.icono {
    vertical-align: baseline !important;
}

.redondeado {
    border-radius: 15px;
}

.curvado {
    border-bottom-left-radius: 80% 10%;
    border-bottom-right-radius: 80% 10%;
}

.elevado {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.bordeado {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.appbar {
    backdrop-filter: blur(4px);
}

.appbar-label{
    font-size: 18px;
    font-weight: 500;
}

.paperbook {
    font-size: 24px;
    text-align: justify !important;
}

.paperbook.centrado {
    text-align-last: center;
}

footer p::selection {
    color:#f2f2f2;
    background: #1a1a1a;
}

.nav-link {
    font-weight: 500;
}

.nav-link.active {
    font-weight: bold;
}

/* ESTILIZADO DE LA BARRA DE BUSQUEDA*/
.height {
    height: 100vh
}

.search {
    position: relative;
    box-shadow: 0 0 40px rgba(51, 51, 51, .1)
}

.search input {
    height: 60px;
    text-indent: 25px;
    /*border: 2px solid #d6d4d4*/
}
.search input:focus {
    box-shadow: none;
    border: 2px solid gray; 

}

.search .oi-magnifying-glass {
    position: absolute;
    top: 20px;
    left: 16px
}

.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    width: 110px;
}

.link-blanco{
    color: white !important; 

}

.link-blanco:hover{
    color: lightgray !important; 
}

ul.resumen{
    list-style-type: none;
}

.card-simple{
    height: 256px;
    text-align: center;
    font-size: 20px; 
}

.card-simple-sm{
    height: 156px;
    text-align: center;
    font-size: 20px;
    
}

.card-nm{
    border-radius: 5px;
}


.center{
    margin: 0; 
    position:absolute; 
    top: 50%;
    left: 50%; 
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.bg-working{
    background-image: url("../../thumbs/img/constructionpic.webp");
    background-size: cover;
}

.bg-maintenance{
    background-image: url("../../thumbs/img/maintenance.webp");
    background-size: cover;
}

.text-shadow{
    text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.6);
}

.card:not(.login) {
    transform: scale(1.0);
    transition: transform 120ms;
}

.card:not(.login):hover {
    transform: scale(1.03);
}

.btn, .nav-link:not(.active) {
    transform: scale(1.0);
    transition: transform 80ms;
}

.btn:hover, .nav-link:not(.active):hover {
    transform: scale(1.02);
}

iframe.video {
    margin: 0 auto;
    background: black;
    aspect-ratio: 4/2.25;
    width: 75%;
}


@media (max-width: 992px) {
    .paperbook {
        font-size: 22px;
    }

    .cabecera{
        background-attachment: fixed;
    }

    .error{
        font-size: 186px;
    }

    iframe.video {
        width: 100%;
        aspect-ratio: 4.25/4;
    }
}

input:invalid{
    animation: shake 300ms;
}

@keyframes shake {
    25% {transform: translateX(3px);}
    50% {transform: translateX(-3px);}
    75% { transform: translateX(3px);}
}

@media (min-width: 993px) and (max-width: 1199px) {
    .error{
        font-size: 286px;
    }
}

@media (min-width: 1200px) {
    .error{
        font-size: 386px;
    }
}