body{
    position: relative;
    margin: 0;
    background-color: var(--background-color);
    font-family: var(--font1);
    overflow-x: hidden;
    background-color: var(--debug-color-bl);
}

.background{
    position: absolute;

    display: grid;
    grid-template-columns: calc(100vw + calc(var(--background-blur) * 4));
    grid-template-rows: minmax(70vh, var(--unit7)) auto;/* 30%;*/

    left: calc((var(--background-blur) * 2) * -1);
    top: calc((var(--background-blur) * 2) * -1);
    height: 100%;
    z-index: -1;
}

.background::before{
    content: '';

    background: var(--background-img) repeat;
    /*background-size: cover;*/
    /*filter: blur(2px);*/
    -webkit-filter: blur(var(--background-blur)) grayscale(50%);

    z-index: -2;
}

.background::after{
    content: '';

    background-color: var(--debug-color-g);
    box-sizing: content-box;

    margin-top: calc(-1*var(--background-blur));/*-4px*/
    /*2x margin-top + wrapper-padding*/
    margin-bottom: calc(-2*var(--background-blur) - 10px);
    /*height: calc(initial + 20px);*/
    z-index: -1;
}

.wrapper{
    position: relative;
    box-sizing: padding-box;

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;

    background-color: var(--background-color);

    max-width: calc(100vw - var(--scrollbar-width));
    width: 1280px;/*var(--unit8)*/
    border-radius: 20px;
    border: white 10px solid;

    margin: var(--unit1) auto;
    min-height: calc(100vh - (2 * var(--unit1)));
}

.header{
    /*position: relative;*/
    /*width: 100%;*/

    /*box-sizing: border-box;*/

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: var(--unit5) max-content auto;

    /*background-color: var(--header-color);*/
    /*background-color: var(--debug-color-r);*/
    /*border-bottom: var(--separator);*/
    background-color: var(--debug-color-a)marine;
}

.logo{
    width: var(--unit3);
    height: var(--unit3);
    margin: auto;
}

.title{
    background-color: var(--debug-color-a);
    line-height: var(--unit3);
    /*margin-top: auto;*/
    /*margin-bottom: auto;*/
}

/*.menu-wrapper{*/
    /*width: auto;*/
    /*!*display: grid;*!*/
    /*!*grid-template-columns: auto;*!*/
    /*!*grid-template-rows: auto max-content;*!*/
/*}*/
/*.menu-wrapper::before{*/
    /*background-color: var(--debug-color-a);*/
    /*content: '';*/
/*}*/
/*.menu-wrapper1{*/
    /*display: grid;*/
    /*grid-template-columns: auto;*/
    /*grid-template-rows: auto min-content;*/
/*}*/
.menu__wrapper{
    position: relative;
    display: grid;
    /*width: auto;*/
    /*height: auto;*/
    background-color: var(--debug-color-c);
    /*display: grid;*/
    /*overflow-x: hidden;*/
}

/*.test{*/
    /*background-color: var(--debug-color-ca);*/
    /*!*height: 20px;*!*/
    /*width: 50vh;*/
/*}*/

.menu-button{
    visibility: hidden;
    display: none;
    margin: auto auto 0 auto;
}

.menu2{
    visibility: hidden;
    display: none;
}

.menu{
    right: 0px;
    bottom: 0px;
    position: absolute;
    background-color: var(--debug-color-bl);
    /*right: 0px;*/
    /*box-sizing: border-box;*/
    /*width: auto;*/
    display: grid;
    /*grid-template-rows: auto auto;*/
    /*grid-auto-rows: min-content;*/
    /*grid-auto-columns: max-content;*/
    /*--cosi: calc(50% + 1px);*/
    grid-template-columns: repeat(calc(var(--menu-cols)), auto);/*repeat(var(--menu-cols), auto);*/
    /*grid-auto-flow: column;*/
    grid-gap: var(--unit1);
    /*padding-right: var(--unit1);*/

    /*margin-top: auto;*/
    /*margin-left: auto;*/
    font-size: 1em;
    /*z-index: 100;*/
}

/*.test{*/
    /*--cosi: calc(100% / 10%);*/
    /*position: absolute;*/
    /*top: 0px;*/
    /*left: 0px;*/
    /*background-color: var(--debug-color-ca);*/
    /*width: var(--cosi);*/
    /*height: 50px;*/
/*}*/

.menu-t{
    /*background-color: var(--debug-color-bl);*/
    display: none;
    visibility: hidden;
    line-height: var(--unit2);
    /*position: relative;*/

    width: var(--unit4);
    text-align: center;
}



/*.menu::before{*/
    /*background-color: var(--debug-color-a);*/
    /*content: '';*/
/*}*/



.menu__item{
    line-height: var(--unit2);
    /*position: relative;*/color:black ;
    text-decoration: none;


    width: var(--unit4);
    text-align: center;
    /*background-color: rgba(100,100,100,0.5);*/
    /*padding-left: calc(var(--logo-gap) / 2);*/
    /*background-color: gray;*/
}

.menu2__item{
    color:black ;
    line-height: var(--unit2);
    /*position: relative;*/
    text-decoration: none;
    width: var(--unit4);
    text-align: center;
    /*background-color: rgba(100,100,100,0.5);*/
    /*padding-left: calc(var(--logo-gap) / 2);*/
    /*background-color: gray;*/
}
.menu2__item:hover{
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.menu__item:hover{
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
/*.meridlo{*/
    /*position: relative;*/
    /*top: 150px;*/
    /*width: 100%;*/
    /*height: 5px;*/
    /*background-color: var(--debug-color-a);*/
/*}*/

.preview{
    /*position: relative;*/
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 50% auto;
    /*width: 100%;*/
    min-height: var(--unit6);
    background-color: cornflowerblue;
    /*padding: var(--logo-size);*/
    overflow: hidden;
}
.preview2{
    /*position: relative;*/
    display: grid;
    box-sizing: border-box;
    /*width: 100%;*/
    background-color: cornflowerblue;
    /*padding: var(--logo-size);*/
    overflow: hidden;
}
.preview2 h2{
    text-align: center;
    margin: auto;
}


.article{
    padding: var(--unit2);
    /*width: 200px;*/
}

h1{
    font-family: var(--font2);
}

h2{
    font-family: var(--font2);
}

h3{
    /*position: relative;*/
    font-family: var(--font2);
    /*background-color: var(--debug-color-ca);*/
}
h3::before{
    /*position: relative;*/
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url('logo.png');
    background-size: cover;
}

p{
    min-width: 0;
    width: auto;
}

.img-wrapper{
    position: relative;

    background-color: cornflowerblue;
    /*overflow: hidden;*/
}

.preview-img{
    position: absolute;
    /*width: 40vw;*/
    top: 30px;
    left: 50%;
    height: 400px;
    transform: translate(-50%, 0);
    /*left: 0;*/
    /*bottom: -150px;*/
}

.articles{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(var(--articles-cols), auto);
    grid-gap: var(--unit1);

    /*font-size: 0.7em;*/
    padding: var(--unit2) var(--unit2) 0;
}

.gallery{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(var(--articles-cols), auto);
    grid-gap: 10px;

    padding: var(--unit3);
}

.gallery > img{
    width: 100%;
    border: 2px black solid
}

.article .article{
    padding: 0px;
}

.article .gallery{
    padding: 0px;
    padding-top: 20px;
    grid-template-columns: auto auto auto;
    filter: grayscale(100%);
}

.footer{
    position: relative;
    /*font-size: 2em;*/
    box-sizing: border-box;
    background-color: var(--footer-color);

    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(var(--articles-cols), 1fr);
    /*border-top: var(--separator);*/
    /*border: var(--separator);*/
    color: white;
    /*line-height: var(--logo-size);*/
    /*text-align: center;*/
}

.footer .article > a{
    color: white;
    /*position: absolute;*/
    /*height: 10px;*/
    /*bottom: 32px;*/
    /*right: 2px;*/
}

@media screen and (max-width: 1280px){
    .wrapper{
        background-color: var(--debug-color-br);
    }
}

/*@media screen and (max-width: 555px){*/
    /*.menu{*/
        /*!*background-color: var(--debug-color-a);*!*/
        /*position: absolute;*/
        /*right: 0;*/
        /*top: calc(100% - var(--unit2));*/
        /*padding-right: 0;*/
        /*background-color: rgba(100,100,100,0.5);*/
    /*}*/
    /*.menu:hover{*/
        /*!*top:100%;*!*/
    /*}*/
    /*.menu > div{*/
        /*display: none;*/
        /*visibility: hidden;*/
    /*}*/
    /*.menu-t{*/
        /*display: block;*/
        /*visibility: visible;*/
    /*}*/
    /*.menu:hover > .menu-t{*/
        /*!*background-color: var(--debug-color-r);*!*/
        /*display: none;*/
        /*visibility: hidden;*/
    /*}*/
    /*.menu:hover > div{*/
        /*display: block;*/
        /*visibility: visible;*/
    /*}*/
/*}*/

.menu2-visible{
    visibility: hidden;
    display: none;
}

@media screen and (max-width: 640px){
    :root{
        --articles-cols: 2;
    }
    .menu{
        display: none;
        visibility: hidden;
    }
    .menu-button{
        display: grid;
        visibility: visible;
    }

    .menu2-visible{
        display: grid;
        visibility: visible;
        grid-auto-rows: auto;
        grid-auto-flow: column;
    }
}

#map {
    height: 400px;  /* The height is 400 pixels */
    width: 100%;  /* The width is the width of the web page */
}

.kitten__content{
    background-color: var(--debug-color-c);
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(var(--form-cols), auto);
}
.kitten__content__form-wrapper{
    background-color: var(--debug-color-a);
}
.kitten__content__contasts{
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(calc(3 - var(--form-cols)), auto);
}
.message{
    width:100%;
    height: 100px;
    resize: none;
}
.cudel{
    margin-top: 1em;
    width: 100px;
    height: 2em;
    background-color: cornflowerblue;
    border: 0;
}
.cudel:hover{
    box-shadow: gray 2px 2px 5px;
    cursor: pointer;
}
.label{
    margin: 0.5em 0 0.5em 0;
    font-weight: bold;
}
input{
    border-radius: 1em;
    height: 2em;
}
@media screen and (max-width: 800px){
    :root{
        --form-cols: 1;
    }
}

.preview2 p{
    text-align: center;
}

.gallery-wrapper{
    position: relative;
    box-sizing: border-box;
    margin: var(--unit3);
    width: 100% - var(--unit3);
    background-color: var(--debug-color-c);
    overflow: hidden;
    height: 385px;
}
.gallery2{
    position: absolute;
    /*display: none;*/
    background-color: var(--debug-color-a);
    width: 100%;
    height: 373px;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(7, auto);
    overflow: scroll;

}
.gallery2::-webkit-scrollbar { width: 0 !important }
.gallery2 img{
    border: 2px black solid;
    margin: auto;
}
.slidecontainer {
    width: 100%; /* Width of the outside container */
    background-color: var(--debug-color-ca);
}
.article2 img{
    border: 2px black solid;
}
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: cornflowerblue; /* Green background */
    cursor: pointer; /* Cursor on hover */
}
.content{
    background-color: var(--debug-color-y);
    position: relative;
    width: 100%;
    box-sizing: padding-box;
}
.total-darkness{
    position: fixed;
    display: grid;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
}
.normal-img{

}
.wrapper_with_sidebar{
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(var(--form-cols), auto);
}
.sidebar{
    width: 250px;
}
.widget input{
    resize: none;
    box-sizing: border-box;
    margin-left: -10px;
    margin-right: 0px;
    padding: 0;
    width: calc(100%);
}
.article2 img{
    float: left;
    margin-right: 20px;
    width:200px;
}
.article2 p{
    /*white-space: nowrap;*/
    /*float: left;*/
    overflow: hidden;
    text-overflow: ellipsis;
    height: 12em;
    text-align: justify;
}
.article2{
    padding-bottom: 10px;
}
.widget{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 10px;
}
.articles2{
    /*font-size: 0.7em;*/
    padding: var(--unit2) var(--unit2) 0;
}