﻿
.burger-wrapper{
    border:1px solid lightgray;
    border-radius:8px;
    margin-bottom:3px;
    background-color:white;
}
.burger-button {
    display: none;
    background-color: #c5002e;
    color: white;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.mobile-header{
    display:none;
}

.info_grid {
    display: grid;
    grid-template-columns: 23% 75%;
    grid-gap: 2%;
    grid-row-gap: 0;
    margin-bottom: 2%;
    height: auto;
    align-items: flex-start;
}

.docs {
    margin-bottom: 3%;
    -webkit-box-shadow: 4px 4px 22px -2px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 4px 4px 22px -2px rgba(34, 60, 80, 0.2);
    box-shadow: 4px 4px 22px -2px rgba(34, 60, 80, 0.2);
    border-radius: 8px;
    padding-left: 1%;
    padding-right: 1%;
    padding: 1%;
    border:1px solid lightgray;
}

.select_categ {
    margin-bottom: 0;
    -webkit-box-shadow: 4px 4px 22px -2px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 4px 4px 22px -2px rgba(34, 60, 80, 0.2);
    box-shadow: 4px 4px 22px -2px rgba(34, 60, 80, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.categ {
    border-bottom: 1px solid lightgray;
    padding: 2%;
    padding-left: 2.5%;
}

    .categ:last-child {
        border: none;
    }

    .categ a {
        font-size: calc(12px + 8 * (100vw / 1900));
        margin: 0;
        color: black;
        text-decoration: none;
        font-weight: 500;
    }

        .categ a:hover {
            color: #c5002e;
            cursor: pointer;
        }

        .categ a:after {
            color: #c5002e;
            cursor: pointer;
        }

.docs h1 {
    font-size: calc(12px + 14 * (100vw / 1900));
    margin-top: 1%;
    margin-bottom: 0;
}

.docs a {
    text-decoration: none;
    color: black;
}

    .docs a:hover {
        text-decoration: none;
        color: #c5002e;
    }

@media (max-width: 900px) {
    .mobile-header {
        display: flex;
    }
    .info_grid {
        display: block;
    }

    .burger-button {
        display: block;
        margin:0;
    }
    .categ{
        padding:1px;
        padding-left:1rem;
    }
    .docs{
        margin-top:0;
        padding-top:0;
    }
        .categ a{
            font-weight:400;

        }
    .select_categ {
        display: block;
        max-height: 0;
        transform: translateY(-10px);
        transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
        margin-bottom:0;
    }

        .select_categ.open {
            max-height: 1000px;
            opacity: 1;
            transform: translateY(0);
        }
}
