:root{
    --container-width: 96vw;

    --media-medium: 800px;

    --border-color: gray; 

    --menu-display: block;
    --menu-flex-direction: none;
    --menu-flex-basis: none;

    --slide-title-bgcolor: slateblue;
    --slide-title-color: white;

    --card-bgcolor: white;
    --card-img-bgcolor: slategray;
    --card-title-color: navy;
    --card-title-bgcolor: transparent;
    --card-descr-color: black;
    --card-descr-bgcolor: transparent;

    --contact-form-message-bgcolor: slateblue;
    --contact-form-message-color: white;
}

html{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: rgb(244,244,244,0.5);
}



.navbar{    
    width: var(--container-width);
    border: none;
    margin: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.navbar > .logo{
    display: flex;
    flex-direction: row;
}

.navbar > .toggler{
    margin-left: auto;
    margin-top: 0.5rem;
    margin-right: 2rem;
    padding: 0.5rem;
    display: none;
}
.navbar > .toggler > label{
    font-size: xx-large;
    height: 40px;
    display: block;
    cursor: pointer;
}
.navbar > .toggler > input{
    display: none;
}


.navbar > .menu{
    display: none;
    margin-top: 2rem;
    cursor: pointer;
}
.navbar > .menu-orientation{
    margin-left: auto;
    display: none;
    flex-direction: none;
    flex-basis: none;
}
.navbar > .menu-horizontal{
    display: var(--menu-display);
    flex-direction: none;
    flex-basis: none;
}
.navbar > .menu-vertical{
    display: flex !important;
    flex-basis: 100%;
    flex-direction: column;
}
.navbar > .menu > a{
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem;
}
.navbar > .menu > .active{
    background-color: slategray;
    color: white;
    transition: .5s;
}
.navbar > .menu > a:hover{
    background-color: lightgray;
    color: navy;
    transition: .5s;
}



@media (width>=800px){
    .navbar > .menu-orientation{
        margin-left: auto;
        display: block;
        flex-direction: none;
        flex-basis: none;
    }
}


@media (width<800px){
    .navbar > .menu-orientation{
        display: flex;
        flex-basis: 100%;
        flex-direction: column;
    }    
    .navbar > .toggler{
        display: block;
        transition: .5s;
    }
    /*
    .navbar:has(.toggler>input[type=checkbox]:checked)  .menu{
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
    }
    */
    /*
    .navbar>.toggler>input[type=checkbox]:checked{
        --menu-display: flex;
        --menu-flex-basis: 100%;
        --menu-flex-direction: column;
    }
    */

}


.container{
    margin-top: 2rem;
    width: var(--container-width);

    border: none;
}
.lpanel{
    height: 2.5rem;
    padding-top: 1rem;
    padding-left: 1rem;

    text-align: left;
    vertical-align: middle;
}


.flexlist{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1rem;
    /*justify-content: center;*/
    justify-content: space-evenly;
}
.flexlist > .card{
    margin: 4px;
    max-width: 384px;
    background-color: var(--card-bgcolor);
}
.flexlist > .card > .image{
    background-color: var(--card-img-bgcolor);
}
.flexlist > .card > .title{
    font-size: large;
    background-color: var(--card-title-bgcolor);
    color: var(--card-title-color);
}
.flexlist > .card > .descr{
    background-color: var(--card-descr-bgcolor);
    color: var(--card-descr-color);
    font-size: medium;
}
.flexlist > .card > .specs{
    font-size: small;
}
.flexlist > .card > div> img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}


.row{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}
.col{
    text-align: left;
    word-break: normal;
    word-spacing: normal;
    word-wrap:normal;

    min-width: 2rem;
    height: auto;
    overflow: hidden;
    overflow-wrap: break-word;
}
.hm-logo{
    width: auto;
    height: 5rem;
    float: left;
    text-shadow: 5px 5px 10px rgb(144, 162, 255);
}
.b-1{
    border-width: 1px;
    border-color: var(--border-color);
}
.shadowed{
    -webkit-box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.25);
}
.rounded{
    border-width: 0px;
    border-radius: 0.25rem;
}
.bgcolor-darkblue{
    background-color: darkblue;
    color: white;
}
.bgcolor-lightgray{
    background-color: slategray;
    color: white;
}
.text-title{
    color: navy !important;
}


.paragraph{
    text-align: justify;
    margin-bottom: 1rem;
}

.slideshow{
    text-align: center;
}
.slideshow .title{
    font-size: large;
    background-color: var(--slide-title-bgcolor);
    color: var(--slide-title-color);
}
.slideshow .image{
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 400px;
    opacity: 1;
}

.show{
    visibility: visible;
    /*animation: fadeIn 2s;*/
}
.hide{
    visibility: hidden;
    display: none !important;
    /*animation: fadeOut 2s;*/
}


button{
    font-size: medium;
    background-color: slategray;
    color: white;
    margin: 0;
    padding: 0.5rem;
    min-width: 10rem;
    border-width: 0px;
    border-radius: 0.25rem;
    -webkit-box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.25);
}
button:hover{
    cursor: pointer;
}
button:active{
    background-color: rgb(143, 162, 182);
    transform: translateX(2px) translateY(2px);
}


.w-25{
    width: 25%;
}
.w-50{
    width: 50%;
}
.w-100{
    width: 100%;
}

.contact-form{
    margin: 0.5rem;
    padding: 1rem;
    border-width: 1px;
    border-color: lightgray;
    border-radius: 0.25rem;
    -webkit-box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
}
.contact-form label{
    width: 100%;
}
.contact-form input, textarea, select{
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: large;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    box-sizing: border-box;
    resize: vertical;
}
.contact-form input:invalid{
    border-color: gray;
}
.contact-form input:valid{
    border-color: green;
}
.contact-form .message{
    margin-top: 2rem;
    padding: 1rem;
}
.contact-form .normal{
    background-color: var(--contact-form-message-bgcolor);
    color: var(--contact-form-message-color);
}
.contact-form .success{
    background-color: darkcyan;
    color: white;
}
.contact-form .error{
    background-color: red;
    color: white;
}


@-webkit-keyframes fadeOut {
    0% { opacity: 1; display: block;}
    99% { opacity: 0.5;}
    100% { opacity: 0; display: none;}
}  
@keyframes fadeIn {
    0% { opacity: 0; display: block;}
    99% { opacity: 0.5;}
    100% { opacity: 1; display: block;}
}