@font-face {
    font-family: RawsonSemiBold;
    src: url("../font/Rawson-SemiBold.otf") format("opentype");
}

@font-face {
    font-family: RawsonMedium;
    src: url("../font/Rawson-Medium.otf") format("opentype");
}

body {
    min-width: 400px;
}

.card {
    margin-right:1rem;
}

#home{
    background: url('../img/isp-bg.png') no-repeat #000 !important;
}

.index-card {
    background-color: #272727 ;
    border: #5A5A5A 1px solid;
    padding: 1rem;
    padding-bottom: 0;
}

.index-card-access {
    position: absolute;
    width: 90%;
    bottom: 0.2rem;
    border-top: #5A5A5A solid 0.1px;
    margin-top: 1rem;
    padding-top: 1rem;
    font-size: 1rem;
    font-family: RawsonSemiBold;
}

.index-card-arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.index-card:hover {
    animation: menuHover 0.5s forwards;
    color: white;
}

.index-card:hover .index-card-text {
    animation: menuHover 0.5s forwards;
}
.index-card:hover .index-card-access {
    animation: menuLineHover 0.5s forwards;
}

.index-card-text {
    color: #5A5A5A;
    font-size: 1rem;
    margin-top: 1rem;
    font-family: RawsonMedium;
    margin-bottom: 5rem;
}

.index-card-title {
    color:white;
    font-size: 1.5rem;
    margin-left: 1rem;
    margin-bottom: 0rem;
    font-family: RawsonSemiBold;
}

#index-footer-info {
    margin-bottom: 2rem;
    font-size: 1rem;
    font-family: RawsonMedium;
}

#index-main-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    margin-top: 5rem;
}

#logo-area {
    margin-bottom: 10rem;
}

@media (max-width: 991px) {
    .index-card {
        margin-bottom: 0.5rem;
        width: 70%
    }

    #index-footer {
        margin-top: 10rem;
    }
    
    #index-main-logo {
        width: 50%;
    }

    #logo-area {
        margin-bottom: 5rem;
    }
}

@media (min-width: 992px) {
    #index-footer-info {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}

@keyframes menuHover {
    0% {
        background-color: #272727;
        color:#5A5A5A
    }
    100% {
        background-color: #00A6E2;
        color: white;
    }
}

@keyframes menuLineHover {
    0%{border-top: #5A5A5A solid 0.1px;}
    100% {border-top: white solid 0.1px;}
}


/* ### Bryston specific ### */

#home.bryston{
    background: #282828 !important;
}

.bryston li{
    background: #282828;
    border: 4px solid #f5f5f5;
    border-radius: 0px;
    padding: 15px;
}

.bryston li a{
    color: #f5f5f5;
}

.bryston li a:hover{
    opacity: 1;
    color: #5e74dd;
}

.bryston #wrapper img{
    margin-bottom: 40px;
    float: none;
    margin-right: 0;
}

/* focal */
.focal #wrapper img{
    margin-bottom: 40px;
    float: right;
    margin-right: 27.4%;
}

/* Info popup style */
#info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#info-popup {
    background: #000;
    color: white;
    padding: 2rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    max-width: 90vw;
    max-height: 80vh;
    text-align: center;
    font-size: 1rem;
    font-family: 'RawsonMedium', sans-serif;
        border: #00A6E2 3px solid;
}

#info-popup-ok {
    margin-top: 1rem;
    padding: 0.5rem 1.5rem;
    border: none;
    background: #00A6E2;
    color: #fff;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

#info-popup-link {
    color: #00A6E2;
    text-decoration: none;
}

#info-popup-title {
    margin-bottom: 2rem;
}