body {padding: 0px; margin: 0px; font-size: 16px; color: #000; font-family: 'Roboto', sans-serif; overflow-x: hidden;}
footer, nav, header, section, aside {display: block;}
h1 {padding: 0; margin: 0; margin-bottom: 30px;}
header {position: relative; width: 100%; height: 700px; background: url('images/header.jpg') center top;}
.center {max-width: 1300px; box-sizing: border-box; padding-left: 20px; padding-right: 20px; margin: auto; overflow: hidden;}
.logo {float: left; margin-top: 30px; height: 75px; background: url('images/logo.png') left center no-repeat; font-size: 16px; color: #fff; padding-left: 140px;}
.logo span b {font-size: 30px; color: #fdf99c;}
.phone {float: right; margin-top: 30px; color: #fff; font-size: 30px;}
.layoutTextTop {position: relative; width: 100%; color: #fff; margin-top: 150px;}
.titleTop {position: relative; width: 100%; font-size: 35px; font-weight: 300; text-shadow: 1px 1px 1px #000000;}
.titleTop b {font-size: 60px; font-weight: 700px;}
.border {position: relative; width: 100%; height: 3px; background: url('images/border.png') no-repeat left top; margin-top: 20px; margin-bottom: 20px;}
.spisokTop {position: relative; width: 100%;}
.spisokTop ul {padding: 0; margin: 0; font-size: 25px; font-weight: 300; text-shadow: 1px 1px 1px #000000;}
.spisokTop ul li {list-style: none; color: #fff;}
.buttonTop {position: relative; width: 300px; background: #f0cc08; color: #2b3606; font-size: 27px; font-weight: 300; text-align: center; padding-top: 10px; padding-bottom: 15px; border-radius: 40px; border: 1px solid #fff; margin-top: 50px;}
section {position: relative; width: 100%;}
.zagolovok {position: relative; color: #27310a; font-size: 40px; font-weight: 700; margin-top: 40px; margin-bottom: 40px;}
.zagolovok::after{content: " "; position: absolute; top: 50%; width: 100px; height: 5px; background: #83b101; margin-left: 20px;}
.textOkomp {position: relative; width: 100%; font-size: 20px; font-weight: 300;}
.titleMapOkomp {position: relative; width: 100%; font-size: 30px; font-weight: 500px; color: #2c5394; margin-top: 35px;}
.mapOkomo {position: relative; width: 100%; height: 400px; margin-top: 25px;}
.layoutCatalog {position: relative; width: 100%; margin-top: 40px; padding-bottom: 35px; background: #f4f5f7 url('images/fon.jpg') bottom no-repeat;}
.catalog, .otzivi {padding: 0; margin: 0; text-align: center;}
.catalog li {display: inline-block;  width: 370px; height: 450px; margin: 0 13px 26px 13px; vertical-align: top; position: relative; background: #fff; border-radius: 10px; border: 1px solid #bdccd4; box-sizing: border-box; padding: 16px;}
.imgTovar {width: 100%; height: 230px; border-radius: 10px;}
.nameTovar {width: 100%; height: 110px; overflow: hidden; font-size: 18px; color: #27310a; text-align: center; margin-top: 16px; margin-bottom: 16px;}
.priceTovar {width: 100%; height: 30px; overflow: hidden; font-size: 24px; font-weight: 700; text-align: left;}
.priceTovar span {font-size: 18px; font-weight: 300; color: #888888;}
.zakazat {width: 100%; font-size: 20px; color: #2b3606; text-align: center; background: #f0cc08; padding-top: 7px; padding-bottom: 10px; border-radius: 10px; margin-top: 16px;}
.otzivi li {display: inline-block;  width: 283px; height: 393px; margin: 0 13px 26px 13px; vertical-align: top; position: relative; background: #ceecf8; border: 2px solid #c1dde8; box-sizing: border-box; padding: 16px;}
.otzivImg {position: relative; width: 100%; height: 355px;}
.otzivImg::after {content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 355px; background: url('images/hover_otziv.png') center; opacity: 0; transition: 1s;}
.otzivi li:hover .otzivImg::after {opacity: 1;}
.layutMapBottom {position: relative; width: 100%; height: 530px; margin-top: 40px;}
.cont {position: absolute; top: 35px; width: 495px; box-sizing: border-box; padding: 20px; z-index: 1; background: rgba(255, 255, 255, 0.7);}
.titleCont {width: 100%; font-size: 40px; font-weight: 500; margin-bottom: 20px;}
footer {position: relative; width: 100%; text-align: center; color: #fff; font-size: 16px; font-weight: 300; padding-top: 10px; padding-bottom: 10px; background: #56631c; }

#price input, #zakazat input {width: 100%; border: 1px solid #d5d5d5; margin-bottom: 7px; padding: 5px; border-radius: 7px;}
.otpr {font-size: 17px; color: #2b3606; background: #f0cc08; border: none; padding: 5px 20px; margin-top: 15px; border-radius: 7px;}
.mb-3 {padding: 0; margin: 0; margin-bottom: 20px;}

@media only screen and (max-width:720px) { 
    .logo span {display: none;}
    .titleTop b {font-size: 40px;}
    .spisokTop ul {font-size: 21px;}
}

@media only screen and (max-width:400px) { 
    .logo {
    float: left;
    margin-top: 30px;
    height: 75px;
    background: url(images/logo.png) center center no-repeat;
    font-size: 16px;
    color: #fff;
    padding-left: 0px;
    width: 100%;
}
.phone {
    float: right;
    margin-top: 24px;
    color: #fff;
    font-size: 30px;
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
}
.titleTop b {
    font-size: 27px;
}
.spisokTop ul {
    font-size: 16px;
}
.titleTop {line-height: 30px;}
.buttonTop {width: auto;}
.catalog li, .otzivi li {
    width: 100%;
    margin: 0 0px 26px 0px;}
    .cont {width: 100%;}
}

/***cookie**/
#cookie_note{
    display: none;
    position: fixed;
    bottom: 25px;
    left: 45%;
    max-width: 90%;
    transform: translateX(-45%);
    padding: 20px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.layout_text_cookie {display: flex; gap: 20px; align-items: center;}

#cookie_note p{
    margin: 0;
    font-size: 0.7rem;
    text-align: left;
    color: black;
    width: 90%;
}

#cookie_note a {color: #3755fa;}
#cookie_note a:hover {text-decoration: none;}

.cookie_accept{
    width: 100px;
    height: 30px;
    background: #3755fa;
    border: none;
    color: #fff;
    border-radius: 5px;
    transition: .3s;
}

.cookie_accept:hover {cursor: pointer; background: #283eb9;}

@media (max-width: 780px){
.layout_text_cookie {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: column;
}
}

@media (min-width: 576px){
    #cookie_note.show{
        display: flex;
    }
}

@media (max-width: 575px){
    #cookie_note.show{
        display: block;
        text-align: left;
    }
}
/***cookie**/