.p-button {
    border: none;
}

.p-button:enabled:hover {
    background: inherit;
    border-color: inherit;
}

.p-inputtext:enabled:focus {
    border-color: #00afcc;
}

button.invert:enabled:hover {
    background: inherit;
    border-color: inherit;
}

input:enabled:hover {
    border-color: inherit;
}


    nav {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        height: 8vh;
        padding: 0 10rem;

        background: rgba(255, 255, 255, 0.25);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        backdrop-filter: blur(10px);
    }

    nav a {
        color: #131313;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    nav a:hover {
        color: #00afcc;
    }

    .nav-links .a-container {
        max-width: 15rem;
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) {
        .nav-links .a-container {
            font-size: 0.7rem;
        }
    }

    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        .nav-links .a-container {
            font-size: 0.7rem;
        }
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        nav {
            padding: 0 1rem;
        }
        nav .logo img {
            height: 40px;
        }
        nav .login img {
            height: 30px;
        }
    }
    @media only screen and (min-width: 550px) and (max-width: 1024px) {
        nav {
            padding: 0 1rem;
        }
        nav .logo img {
            height: 40px;
        }
        nav .login img {
            height: 30px;
        }
    }
    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        nav {
            padding: 0 1rem;
        }
        nav .logo img {
            height: 40px;
        }
        nav .login img {
            height: 30px;
        }
    }

    
    .search {
        border-radius: 8px;
    }
    .search .input {
        width: 75%;
    }
    .search button {
        background-color: #00afcc;
    }
    .p-button:enabled:hover {
        background-color: #00afcc;
    }
    .search .button {
        border-radius: 8px;
        width: 25%;
        height: 3rem;
        font-size: 1.5rem;
    }
    .search label {
        font-size: 1.5rem;
        color: darkgray;
        margin-top: 0;
        transform: translateY(-50%);
    }
    .search .p-inputtext {
        border-color: lightgray;
        border-radius: 8px;
        background-color: white;
        height: 3rem;
    }
    .search .p-float-label input:focus ~ label {
        font-size: 1rem;
        left: 0;
    }
    @media only screen and (min-width: 280px) and (max-width: 500px) {
        .search .input {
            width: 100%;
        }
        .search label {
            font-size: 0.8rem;
        }
        .search .p-float-label input:focus ~ label {
            font-size: 0.8rem;
        }
        .search .button {
            width: 100%;
            font-size: 1rem;
        }
    }
    @media only screen and (min-width: 550px) and (max-width: 1024px) {
        .search .input {
            width: 100%;
        }
        .search label {
            font-size: 0.8rem;
        }
        .search .p-float-label input:focus ~ label {
            font-size: 0.8rem;
        }
        .search .button {
            font-size: 1rem;
        }
    }
    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        .search label {
            font-size: 0.9rem;
        }
        .search .button {
            font-size: 1rem;
        }
    }
    
    
    header {
        height: 92vh;
        background-color: #131313;
        color: white;
        position: relative;
        background-position: center;
        background-size: cover;
        background-image: url("/images/homepage/header-bg.jpg");
    }

    header .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50vw;
    }

    header .content .title {
        width: 65%;
        margin-bottom: 5rem;
        font-size: 1.2rem;
    }

    header .content .title span {
        color: #00afcc;
        font-weight: normal !important;
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        header {
            height: 70vh;
        }

        header .content {
            width: 90vw;
        }

        header .content .title {
            width: 100%;
        }
    }

    @media only screen and (min-width: 280px) and (max-width: 375px) {
        header {
            height: 90vh;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) and (orientation: portrait) {
        header {
            height: 70vh;
        }

        header .content {
            width: 90vw;
        }

        header .content .title {
            width: 100%;
        }
    }

    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        header .content {
            width: 70vw;
        }

        header .content .title {
            width: 100%;
        }
    }
    
    footer {
        background-color: #666666;
        color: white;
        padding: 0 10rem;
        margin-top: 5rem;
    }

    footer a {
        color: white;
        text-decoration: none;
    }

    footer .bar {
        height: 1rem;
        border-right: 2px solid white;
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        footer {
            padding: 0 1rem;
        }

        footer .copy {
            text-align: center;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) and (orientation: portrait) {
        footer {
            padding: 0 1rem;
        }

        footer .copy {
            text-align: center;
        }
    }

    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        footer {
            padding: 3rem 1rem;
        }
    }
    
    
    .more-visited {
        background-color: #00afcc;
        padding: 0 10rem;
    }

    .more-visited h3 {
        font-size: 2.5rem;
    }

    .more-visited .case-container {
        padding: 0.1rem;
        perspective: 1000px;
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        .more-visited {
            padding: 0 1rem;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) {
        .more-visited {
            padding: 0 1rem;
        }
    }

    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        .more-visited {
            padding: 3rem 1rem;
        }
    }

    .last-cases {
        padding: 0 10rem;
    }

    .last-cases h3 {
        color: #00afcc;
        font-size: 2.5rem;
    }

    .last-cases .image-container {
        padding: 0.1rem;
    }

    .last-cases .image-container img {
        width: 100%;
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        .last-cases {
            padding: 0 1rem;
        }

        .last-cases .image-container {
            padding: 0 !important;
            margin-bottom: 1rem;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) {
        .last-cases {
            padding: 0 1rem;
        }
    }

    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        .last-cases {
            padding: 3rem 1rem;
        }
    }

    .banner {
        padding: 0 10rem;
        margin-top: 12rem;
        margin-bottom: 7rem;
    }

    .banner .content {
        width: 100%;
        position: relative;
        padding: 0 0 1rem 7rem;
    }

    .banner .content img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: -1;
    }

    .banner .content .texts {
        width: 50%;
    }

    .banner .content .texts h3 {
        color: #00afcc;
        font-size: 4rem;
        line-height: 3rem;
    }

    .banner .content .texts p {
        font-size: 1.3rem;
    }

    .banner .content .texts .escribenos {
        background-color: #00afcc;
        width: fit-content;
        border-radius: 8px;
        font-size: 1.5rem;
        padding: 0.5rem 4rem;
    }

    .banner .content .texts small {
        color: gray;
        font-style: italic;
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        .banner {
            margin-top: 5rem;
            padding: 0 1rem;
        }

        .banner .content {
            padding: 0;
        }

        .banner .content img {
            position: relative;
            transform: unset;
            top: unset;
            left: unset;
            margin-top: 1.5rem;
        }

        .banner .content .texts {
            width: 100%;
        }

        .banner .content .texts h3 {
            font-size: 3rem;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) {
        .banner {
            margin-top: 5rem;
            padding: 0 1rem;
        }

        .banner .content {
            padding: 0;
        }

        .banner .content img {
            position: relative;
            transform: unset;
            top: unset;
            left: unset;
            margin-top: 1.5rem;
        }

        .banner .content .texts {
            width: 100%;
        }

        .banner .content .texts h3 {
            font-size: 3rem;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1400px) and (orientation: landscape) {
        .banner {
            margin-top: 5rem;
            padding: 0 1rem;
        }

        .banner .content {
            padding: 1rem;
        }

        .banner .content .texts {
            width: 60%;
        }

        .banner .content .texts h3 {
            font-size: 2rem;
            line-height: 2rem;
            margin-bottom: 0.5rem;
        }

        .banner .content .texts p {
            font-size: 1rem;
            margin-bottom: 0.5rem;
        }

        .banner .content .texts .escribenos {
            font-size: 1.2rem;
            padding: 0.2rem 4rem;
        }
    }

    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        .banner {
            padding: 0 1rem;
        }

        .banner .content {
            padding: 1rem;
        }

        .banner .content .texts {
            width: 60%;
        }

        .banner .content .texts h3 {
            font-size: 3rem;
            line-height: 3rem;
        }

        .banner .content .texts p {
            font-size: 1rem;
            margin-bottom: 0.5rem;
        }

        .banner .content .texts .escribenos {
            font-size: 1.2rem;
            padding: 0.2rem 4rem;
        }
    }
 
     #scroll-top {
        background-color: #00afcc;
        z-index: 1040 !important;
    }
    #scroll-top:hover {
        background-color: hsl(189, 100%, 30%);
    }
    
    
    .results {
        padding: 0 10rem;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .results #results {
        transform: translateY(-130px);
    }

    .results h3 {
        color: #00afcc;
        font-weight: bold;
    }

    .results .load-more {
        color: #00afcc;
        font-weight: bold;
        cursor: pointer;
    }

    .results .case-container {
        perspective: 500px;
    }

    .view-button {
        background-color: #00afcc;
        padding: 0.6rem;
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        .results {
            padding: 3rem 1rem;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) {
        .results {
            padding: 3rem 1rem;
        }
    }

    @media only screen and (min-width: 1080px) and (max-width: 1600px) {
        .results {
            padding: 3rem 1rem;
        }
    }
    
    .results .case {
        aspect-ratio: 1;
        height: auto;
    }

    .results .p-button {
        border-radius: 8px;
    }

    .menubar {
        z-index: 50;
        border: none;
        background: transparent;
        padding-left: 0;
    }

    .menubar .title {
        color: #00afcc;
        font-weight: bold;
        font-size: 1.3rem;
    }

    .menubar :deep(.p-submenu-list) {
        z-index: 50;
    }

    .menubar :deep(.p-menuitem-link) {
        flex-direction: row-reverse;
    }

    .menubar :deep(.p-submenu-list .p-menuitem-link) {
        flex-direction: row;
    }

    .menubar :deep(.p-menuitem-link):focus {
        box-shadow: none !important;
    }

    .menubar :deep(.p-menuitem-icon),
    .menubar :deep(.p-submenu-icon) {
        color: #00afcc !important;
        margin-left: 0;
        margin-right: 0.5rem;
        font-size: 1.5rem;
        transform: rotate(-90deg);
        transition: all 0.3s ease;
    }

    .menubar :deep(.p-menuitem.p-menuitem-active .p-submenu-icon) {
        transform: none;
    }

    @media only screen and (min-width: 280px) and (max-width: 500px) {
        .menubar :deep(.p-menuitem-link) {
            flex-direction: row;
        }
    }

    @media only screen and (min-width: 550px) and (max-width: 1024px) and (orientation: portrait) {
        .menubar :deep(.p-menuitem-link) {
            flex-direction: row;
        }
    }
    
    
        .case-details {
            margin: 0 10rem;
            margin-top: 6rem;
            background-color: white;
        }
    
        .case-details.maximized {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: 0;
            z-index: 1050;
        }
    
        .case-details.maximized .actions {
            padding: 0 1.5rem;
        }
    
        .case-details .custom-btn {
            background-color: #19adc7;
            color: white;
            padding: 1rem 0;
            border-radius: 0;
            border-top: 5px solid #9bd3e8;
        }
    
        .case-details .custom-btn.custom-border-top {
            border-top: 5px solid #03759a;
        }
    
        .case-details .custom-btn:enabled:hover {
            color: white;
            background-color: #13869a;
        }
    
        .case-details .custom-btn span {
            width: 60%;
            text-align: center;
        }
    
        .case-details .tabs-content {
            height: 750px;
            border: 1px solid black;
            border-bottom: none;
        }
    
        .case-details .p-button.p-component {
            background-color: #00afcc;
        }
    
        @media only screen and (min-width: 280px) and (max-width: 500px) {
            .case-details {
                margin: 0 1rem;
                margin-top: 3rem;
            }
    
            .tabs-content {
                height: auto;
                padding-top: 1rem;
            }
        }
    
        @media only screen and (min-width: 550px) and (max-width: 1024px) {
            .case-details {
                margin: 0 1rem;
                margin-top: 3rem;
            }
    
            .case-details .tabs-content {
                height: auto;
                padding-top: 1rem;
            }
        }
    
        @media only screen and (min-width: 1080px) and (max-width: 1600px) {
            .case-details {
                margin: 0 1rem;
                margin-top: 3rem;
            }
        }
    
        .case-details .p-tabmenu .p-tabmenu-nav {
            border: none;
            border-radius: 0;
            padding: 0;
        }
    
        .case-details .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
            flex: 1 0 0%;
        }
    
        @media only screen and (min-width: 280px) and (max-width: 500px) {
            .case-details .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
                flex: none;
                width: 50%;
            }
        }
    
        @media only screen and (min-width: 550px) and (max-width: 1024px) {
            .case-details .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
                flex: none;
                width: 33%;
            }
        }
    
        @media only screen and (min-width: 1080px) and (max-width: 1600px) {
            .case-details .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
                flex: none;
                width: 15%;
            }
        }
    
        @media only screen and (min-width: 280px) and (max-width: 500px) {
            .logo img {
                height: auto;
                width: 100%;
            }
    
            .title {
                flex-direction: row-reverse;
            }
        }
    
        @media only screen and (min-width: 550px) and (max-width: 1024px) and (orientation: portrait) {
            .logo img {
                height: auto;
                width: 100%;
            }
    
            .title {
                flex-direction: row-reverse;
            }
        }


    .p-sidebar a {
        color: white;
        text-decoration: none;
    }